Kolumntyp länk i tabell
Innehåll
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,sizeochenabled.
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
falseto 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