Kolumntyp dropplista i tabell
Innehåll
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ånkey.update(row, newValue, oldValue)används när du behöver egen uppdateringslogik.
Redigerbarhet
Som standard är det alltid möjligt att välja alternativ från en lista.
Om cellen ska vara redigerbar baserat på en rad tillhandahåller du en editable-funktion
som returnerar true eller false.
import { defineTableColumns } from "@fkui/vue";
interface Row {
fruit: string;
}
const columns = defineTableColumns<Row>([
{
type: "text",
header: "Frukt",
key: "fruit",
editable(row) {
return row.fruit !== "banana";
},
},
]);
Det är också möjligt att stänga av redigering för samtliga rader genom att sätta editable till värdet false.
import { defineTableColumns } from "@fkui/vue";
interface Row {
fruit: string;
}
const columns = defineTableColumns<Row>([
{
type: "text",
header: "Frukt",
key: "fruit",
editable: false,
},
]);
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- ‐
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. editable?: boolean | ((this: void, row: T) => boolean);Optional- When enabled, the cells are editable. Default:
true 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- ‐