<script setup lang="ts">
import { ref } from "vue";
import { useDatasetRef } from "@fkui/vue";
import { FTable, defineTableColumns } from "@fkui/vue";

interface Row {
    id: string;
    fruit: string;
    land: string;
    pris: string;
}

const rows = useDatasetRef<Row>([
    { id: "1", fruit: "Apelsin", land: "Spanien", pris: "30" },
    { id: "2", fruit: "Banan", land: "Ecuador", pris: "15" },
    { id: "3", fruit: "Äpple", land: "Sverige", pris: "22" },
]);

const selectedRows = ref<Row[]>([]);

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "fruit",
    },
    {
        type: "text",
        header: "Land",
        key: "land",
    },
    {
        type: "text:currency",
        header: "Pris per kilo",
        key: "pris",
    },
]);
</script>

<template>
    <f-table
        v-model:selected-rows="selectedRows"
        :rows
        :columns
        key-attribute="id"
        selectable="multi"
    >
    </f-table>
</template>

Flerval

Använd selectable="multi" för att låta användaren välja flera rader i tabellen.

Valda rader exponeras genom v-model:selected-rows.

const selectedRows = ref<Row[]>([]);

<f-table
    v-model:selected-rows="selectedRows"
    :columns
    :rows
    selectable="multi"
></f-table>

selectedRows innehåller de radobjekt som användaren har valt.

Bulkoperation

Vid flerval kan du utföra bulkoperationer på de valda raderna.

Om användaren kan ta bort innehåll från tabellen bör du låta användaren bekräfta åtgärden innan den genomförs.

const selectedRows = ref<Row[]>([]);

const { confirmModal } = useModal();

async function removeSelected(): Promise<void> {
    if (selectedRows.value.length === 0) {
        return;
    }

    const selectedCount = selectedRows.value.length;
    const selectedFruitText =
        selectedCount === 1 ? "vald frukt" : "valda frukter";

    const confirmed = await confirmModal({
        heading: "Ta bort frukt(er)",
        content: `Är du säker att du vill ta bort ${selectedCount} ${selectedFruitText}?`,
        confirm: "Ja, ta bort",
        dismiss: "Nej, behåll",
    });

    if (confirmed) {
        removeDatasetRows(rows, selectedRows);
    }
}

<f-button size="medium" variant="secondary" @click="removeSelected">
    Ta bort valda
</f-button>

<f-table
    v-model:selected-rows="selectedRows"
    :columns
    :rows
    selectable="multi"
></f-table>

Läs mer om att lägga till och ta bort rader.

Enkelval

Använd selectable="single" för att låta användaren välja en rad i taget.

Vid enkelval innehåller selectedRows högst en rad.

const selectedRows = ref<Row[]>([]);

<f-table
    v-model:selected-rows="selectedRows"
    :columns
    :rows
    selectable="single"
></f-table>

Textnycklar

Det är möjligt att anpassa skärmläsartexter vid flerval (bulkkryssruta, kryssruta) och enkelval (radioknapp).

fkui.ftable.select-all.aria-label

Screenreader text for "toggle all" checkbox when not all rows are selected.

Default: "Välj alla rader"

fkui.ftable.unselect-all.aria-label

Screenreader text for "toggle all" checkbox when all rows are selected.

Default: "Avmarkera alla rader"

fkui.table.selectable.checkbox

Screenreader text for checkbox in multi select table row.

Default: "Välj rad"

fkui.table.selectable.radio

Screenreader text for radio button in single select table row.

Default: "Välj rad"

Relaterat

Kod för tabell

Välja rader i tabell