Redigera innehåll i tabell

Innehåll

Inline-redigering
Redigering via modaler
Mobila enheter och redigerbar tabell
Kod

För tabell finns det två typer av redigering: inline-redigering (exempel nedan) och via modal.

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

interface Row {
    namn: string;
    land: string;
    pris?: number;
}

const lander = [
    "",
    "Colombia",
    "Costa Rica",
    "Dominikanska republiken",
    "Ecuador",
    "Frankrike",
    "Italien",
    "Spanien",
    "Sverige",
    "Sydafrika",
];

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Frukt",
        key: "namn",
    },
    {
        type: "select",
        options: lander,
        header: "Land",
        label: () => "Land",
        key: "land",
    },
    {
        type: "text:currency",
        header: "Pris per kilo",
        key: "pris",
        editable: true,
    },
]);

const rows = useDatasetRef<Row>([
    {
        namn: "Apelsin",
        land: "Spanien",
        pris: 30,
    },
    {
        namn: "Banan",
        land: "Equador",
        pris: 15,
    },
    {
        namn: "Äpple",
        land: "Sverige",
        pris: 22,
    },
]);

const sortableAttributes = { namn: "Frukt" };
</script>

<template>
    <f-sort-filter-dataset :data="rows" :sortable-attributes>
        <template #default="{ sortFilterResult }">
            <f-table ref="table" :rows="sortFilterResult" :columns striped>
                <template #caption><span class="sr-only">Redigera innehåll-exempel</span></template>
            </f-table>
        </template>
    </f-sort-filter-dataset>
</template>

Inline-redigering

Användaren redigerar direkt innehållet på en rad genom att stå i aktuell cell.

Kolumntyperna Text och Dropplista har stöd för inline-redigering.

Text

Redigering påbörjas genom att:

trycka på Enter i fokuserad cell (redigera innehåll)
börja skriva i fokuserad cell (ersätter innehåll)
klicka på cell

Redigering avslutas genom att:

trycka på Enter (fokus hamnar på underliggande cell)
trycka på Tab (fokus hamnar på nästa cell)
trycka på Shift + Tab (fokus hamnar på föregående cell)
klicka utanför cellen

Redigering avbryts genom att:

klicka på Escape (fokus kvarstår på cell)

Dropplista

Redigering påbörjas genom att:

trycka på Enter i fokuserad cell
klicka på cell

Redigering avslutas genom att på valt alternativ:

trycka på Enter (fokus hamnar på underliggande cell)
klicka på ett alternativ (fokus hamnar på underliggande cell)

Redigering avbryts genom att:

klicka på Escape (fokus kvarstår på cell)
trycka på Tab (fokus hamnar på nästa cell)
trycka på Shift + Tab (fokus hamnar på föregående cell)
klicka utanför cellen

Redigering via modaler

Användaren öppnar separat formulär eller modal för att redigera innehåll på en rad.

<script setup lang="ts">
import {
    type TableColumn,
    FCrudDataset,
    FCurrencyTextField,
    FSelectField,
    FTable,
    FTextField,
    defineTableColumns,
    useDatasetRef,
} from "@fkui/vue";

interface Row {
    namn: string;
    land: string;
    pris?: number;
}

const lander = [
    "",
    "Colombia",
    "Costa Rica",
    "Dominikanska republiken",
    "Ecuador",
    "Frankrike",
    "Italien",
    "Spanien",
    "Sverige",
    "Sydafrika",
];

function getColumns(
    updateItem: (item: Row) => void,
    deleteItem: (item: Row) => void,
): Array<TableColumn<Row>> {
    return defineTableColumns<Row>([
        {
            type: "text",
            header: "Frukt",
            key: "namn",
        },
        {
            type: "text",
            header: "Land",
            key: "land",
        },
        {
            type: "text:currency",
            header: "Pris per kilo",
            key: "pris",
        },
        {
            type: "menu",
            header: "Åtgärder",
            text(row) {
                return `Visa åtgärder för ${row.namn}`;
            },
            actions: [
                {
                    label: "Ändra",
                    icon: "pen",
                    onClick: updateItem,
                },
                {
                    label: "Ta bort",
                    icon: "trashcan",
                    onClick: deleteItem,
                },
            ],
        },
    ]);
}

const rows = useDatasetRef<Row>([
    {
        namn: "Apelsin",
        land: "Spanien",
        pris: 30,
    },
    {
        namn: "Banan",
        land: "Equador",
        pris: 15,
    },
    {
        namn: "Äpple",
        land: "Sverige",
        pris: 22,
    },
]);
</script>

<template>
    <f-crud-dataset v-model="rows">
        <template #default="{ updateItem, deleteItem }">
            <f-table ref="table" :rows :columns="getColumns(updateItem, deleteItem)" striped>
                <template #caption><span class="sr-only">Redigera innehåll-exempel</span></template>
            </f-table>
        </template>

        <template #modify="{ item }">
            <f-select-field v-model="item.land">
                <template #label>Land</template>
                <option disabled hidden value="">Välj..</option>
                <option v-for="land in lander" :key="land">{{ land }}</option>
            </f-select-field>
            <f-currency-text-field v-model="item.pris"> Pris </f-currency-text-field>
        </template>

        <template #delete="{ item }"> Vill du verkligen ta bort "{{ item.namn }}"? </template>
    </f-crud-dataset>
</template>

Med Datamängdredigeraren kan du lägga till funktionalitet för att skapa, ändra och ta bort rader i tabellen via modaler.

Mobila enheter och redigerbar tabell

En redigerbar tabell ska inte användas i de fall användaren har mobila enheter/surfplattor. Den redigerbara tabellen har begränsningar som gör det omöjligt för en användare att kunna redigera och få översikt. Samma sak gäller även för redigerbar tabell och användare med skärmläsarverktyg som voiceover och talkback.

Läs mer om mobila enheter och tabell.

Kod

Läs om hur du sätter upp att redigera innehåll i tabell.