Kolumntyp kryssruta i tabell

Innehåll

Bra att veta
Parametrar

Använd kolumntypen kryssruta (checkbox) när användaren ska kunna utföra en radbunden åtgärd.

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

interface Row {
    selected: boolean;
}

const columns = defineTableColumns<Row>([
    {
        type: "checkbox",
        header: "Vald",
        key: "selected",
        label() {
            return "Välj rad";
        },
    },
]);

Bra att veta

Använd key eller checked(row) för att läsa aktuellt värde.
Använd update(row, newValue, oldValue) om du behöver egen uppdateringslogik.
label(row) bör alltid sättas för tydlig skärmläsartext.

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

‐

visible?: (this: void, row: T) => boolean; Optional

Show cell content.

A callback that can be used for hiding specific cells in the column.

Default () => true.

checked?(this: void, row: T): boolean; Optional

‐

key?: K; Optional

‐

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

Screenreader text

type: "checkbox";

Column type

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

‐

Kakor på webbplatsen

Kolumntyp kryssruta i tabell

Bra att veta

Parametrar