Kolumntyp dropplista i tabell

Innehåll

Bra att veta
Parametrar

Använd kolumntypen dropplista (select) när användaren ska kunna välja ett värde från en fördefinierad lista direkt i cellen.

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

interface Row {
    season: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "select",
        header: "Säsong",
        key: "season",
        options: ["Vår", "Sommar", "Höst", "Vinter"],
        label() {
            return "Välj säsong";
        },
    },
]);

Bra att veta

options är obligatorisk.
selected(row) kan användas om du inte vill läsa från key.
update(row, newValue, oldValue) används när du behöver egen uppdateringslogik.

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

‐

key?: K; Optional

‐

label?(this: void, row: T): string; Optional

Screenreader text

options: string[];

List of options

selected?(this: void, row: T): string; Optional

‐

type: "select";

Column type

update?(this: void, row: T, newValue: string, oldValue: string): void; Optional

‐

Kakor på webbplatsen

Kolumntyp dropplista i tabell

Bra att veta

Parametrar