Kolumntyp knapp i tabell

Innehåll

Bra att veta
Parametrar

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

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

interface Row {
    id: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "button",
        header: "Åtgärd",
        text() {
            return "Visa";
        },
        onClick(row) {
            console.log("Visa rad", row.id);
        },
        icon: "search",
    },
]);

Bra att veta

text(row) styr knappens skärmläsartext.
onClick(row) kör åtgärden för raden.
icon och iconLibrary är valfria.

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.

icon?: string; Optional

Name of icon to show on the button, see FIcon for list of icons.

iconLibrary?: string; Optional

The icon library to use when rendering an icon. If not set, the default icon library will be used.

key?: K; Optional

‐

onClick?(this: void, row: T): void; Optional

Callback when button is clicked

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

Screenreader text

type: "button";

Column type

Kakor på webbplatsen

Kolumntyp knapp i tabell

Bra att veta

Parametrar