Kakor på webbplatsen

Vi använder kakor (cookies) för att webbplatsen ska fungera så bra som möjligt för dig.
Vi använder också kakor för webbanalys för att göra webbplatsen bättre.

Godkänner du att vi också använder kakor för webbanalys?

FK Designsystem

Tabell (kod)

Den här sidan innehåller information om hur du sätter upp komponenten tabell i din applikation.

Du sätter upp din tabell genom att definiera kolumner och rader som ska ingå.

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

// definiera data
interface Row {
    namn: string;
}

// definiera kolumner
const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Namn",
    },
]);

// definiera rader
const rows = useDatasetRef<Row>([
    {
        namn: "Banan",
    },
]);

<f-table :columns :rows></f-table>

Kolumner

Du konfigurerar kolumner i tabellen med funktionen defineTableColumns.

I funktionen definierar du upp kolumnerna i tabellen genom att bland annat bestämma/sätta kolumnrubrik, vänster-/högerjustering av innehåll, formatering, kolumntyp med mera.

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Namn",
        key: "namn",
    },
    {
        type: "text",
        header: "Land",
        key: "land",
    },
]);

type anger typen av kolumn. Det finns flera olika typer av kolumner. Läs mer om olika kolumntyper.

header anger kolumnens rubrik och kan antingen sättas till en statisk text eller en ref. Läs mer om kolumnrubriker.

key anger vilken egenskap i radobjektet som tabellcellen visar. Läs mer om att mappa data till kolumner.

Utöver ovan har olika kolumntyper ofta egna konfigurationsmöjligheter.

Mappa data till kolumner

interface Row {
    namn: string;
    land: string;
}

När du definierar kolumnen kan du ange key, där key måste vara en av de kända egenskaperna i radobjektet.

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

interface Row {
    namn: string;
}

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Namn",
        key: "namn",
    },
]);

I det här fallet kommer tabellen att presentera värdet från namn-fältet i ditt radobjekt.

Är du i behov av att ha mer kontroll över värde som presenteras eller skrivs kan du använda dig av funktionerna value och update.

const columns = defineTableColumns<Row>([
    {
        type: "text",
        header: "Namn",
        value(row) {
            return row.namn;
        },
        update(row, value: string) {
            row.namn = value;
        },
    },
]);

Kolumnrubrik

För att sätta kolumnrubrik använder du header.

const columns = defineTableColumns<Row>([
    {
        header: "Namn",
    },
]);

I det här fallet kommer kolumnens rubrik att sättas till "Namn".

const columns = defineTableColumns<Row>([
    {
        header: computed(() => `Namn ${index.value}`),
    },
]);

Om du behöver ha dynamiskt namn på din kolumn kan du använda ref (computed).

Utöver header kan du också använda description för att sätta hjälptext.

const columns = defineTableColumns<Row>([
    {
        header: "Namn",
        description: "Hjälptext",
    },
]);

Kolumnbredder

Kolumnens storlek sätts med egenskapen size.

  • shrink - kolumnen ta så lite plats den kan
  • grow - kolumnen tar så mycket plats den kan.
const columns = defineTableColumns<Row>([
    {
        header: "Namn",
        size: "shrink",
    },
    {
        header: "Land",
        size: "grow",
    },
]);

Vänster- och högerjustering

Kolumnen kan höger- eller vänsterjusteras med egenskapen align.

  • left - kolumnens innehåll vänsterjusteras (standard)
  • right - kolumnens innehåll högerjusteras.
const columns = defineTableColumns<Row>([
    {
        header: "Namn",
        align: "left",
    },
    {
        header: "Land",
        align: "right",
    },
]);

Tabulära nummer

Om kolumnen presenterar numerisk data, bör egenskapen tnum sättas till true för att aktivera tabulära nummer.

const columns = defineTableColumns<Row>([
    {
        header: "Värde",
        tnum: true,
    },
]);

Radrubrik

Det finns en egen kolumntyp för radrubrik.

Läs mer om kolumntyp radrubrik och hur den används.

Framhäva rader

För att få zebrarandig tabell använd propen striped.

<f-table :columns :rows striped></f-table>

Det går även att sätta egna css-klasser på rader med propen rowClass. Funktionen tar emot raden och kan returnera string, string[] eller ett objekt med klassnamn.

function bananaRowClass(row: Row): string | undefined {
    return row.namn === "Banan" ? "banana" : undefined;
}

<f-table :columns :rows :rowClass="bananaRowClass" key-attribute="id"></f-table>

Tom tabell

Använd sloten #empty för att styra vad som visas när tabellen är tom. Som standard visas textnyckeln fkui.ftable.empty.text, se Textnycklar.

<f-table :columns :rows>
    <template #empty> Eget innehåll </template>
</f-table>

Tabellrubrik

En tabell ska alltid ha en rubrik, antingen med caption-elementet eller en associerad rubrik (heading). Tabellrubriken ska hjälpa användaren att hitta till, navigera i och förstå tabellen.

Om tabellen har en rubrik (heading) i nära anslutning som också förklarar tabellens innebörd assoccierar du den med aria-labelledby.

<h2 id="rubrik">Rubrik</h2>
<f-table :columns :rows aria-labelledby="rubrik"></f-table>

Använd caption om tabellen inte har en naturlig rubrik.

<f-table :columns :rows>
    <template #caption> Rubrik </template>
</f-table>

I undantagsfall kan du också använda en dold skärmläsartext i caption, men tänk på att tabellens innehåll måste vara begripligt för alla.

<f-table :columns :rows>
    <template #caption
        ><span class="sr-only">Dold skärmläsartext</span>
    </template>
</f-table>

Felhantering

Om ett fel uppstår vid hämtning av tabellens data kan du se till att ett felmeddelande visas med hjälp av #empty-sloten.

<f-table :columns :rows>
    <template #empty> Felmeddelande </template>
</f-table>

Textnycklar

fkui.ftable.empty.text
‐

Default: "Tabellen är tom"

Läs mer om textnycklar.

API

Props

columns: TableColumn[]
‐
rows: Dataset
‐
keyAttribute: KeyAttribute Optional
‐
rowClass: TSFunctionType Optional

Optional callback for setting classes on table rows (<tr> element).

striped: boolean Optional
‐
disableDividers: boolean Optional
‐
selectable: "single" | "multi" Optional
‐

Slots

caption

Slot for table caption

empty

Slot for content when table is empty

expandable

Slot for rendering custom expandable content

Bindings:

  • row: unknown — The expanded row (from the dataset nested attribute of the parent row)
footer

Slot for table footer

Relaterat

Tabell

Sök

Esc för att stänga Pil upp/ner för att navigera Enter för att välja

Välj version

Var god vänta, laddar versionsdata...