Kolumntyp länk i tabell

Använd kolumntypen länk (anchor) när en cell ska navigera vidare till mer information. Varje rad visar en länktext och en href.

import { defineTableColumns } from "@fkui/vue";

interface Row {
    id: string;
    name: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "anchor",
        header: "Ärende",
        href(row) {
            return `https://example.com/${row.id}`;
        },
        text(row) {
            return row.name;
        },
    },
]);

Bra att veta

  • text(row) styr vilken text som ska visas för länken.
  • href(row) styr vilken adress som länken ska peka på.
  • Som alla kolumntyper kan du även använda header, description, size och enabled.

Parametrar

description?: string | Readonly<Ref<string | null>>; Optional

Format description (shown in header)

enabled?: MaybeRef<boolean>; Optional

When enabled, the column is rendered. Set to false to hide the column and its cells. Default: true.

header: string | Readonly<Ref<string>>;

Column header

size?: TableColumnSize | Readonly<Ref<TableColumnSize | null>>; Optional

Column size, can be one of:

  • "grow": the column occupies as much space as it can.
  • "shrink": the column occupies as little space as it can.

Default: "grow".

sort?: boolean; Optional

href: string | ((this: void, row: T) => string);

Link destination

key?: K; Optional

text(this: void, row: T): string | null;

Link text

type: "anchor";

Column type

Sök

Esc för att stänga Pil upp/ner för att navigera Enter för att välja

Välj version

Var god vänta, laddar versionsdata...