Anpassa egen kolumntyp i tabell

Innehåll

Bra att veta
Parametrar

Använd kolumntypen renderat innehåll (render) när du behöver presentera något som inte ryms i de övriga färdiga kolumntyperna.

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

interface Row {
    status: string;
}

const columns = defineTableColumns<Row>([
    {
        header: "Status",
        render(row) {
            return h("td", row.status);
        },
    },
]);

Bra att veta

Den här varianten använder render(row) i stället för ett vanligt type-värde.
Använd den sparsamt, välj i första hand någon av de färdiga kolumntyperna.
Eget renderat innehåll passar bra när du behöver en helt anpassad presentation.

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

‐

render(this: void, row: T): VNode | Component;

Render function to render cell contents.

See Render Functions in the Vue documentation for details.

Kakor på webbplatsen

Anpassa egen kolumntyp i tabell

Bra att veta

Parametrar