Komponent

FDataTable FInteractiveTable FTableButton FTableColumn

Status

Produktionsklar

Använd en tabell när användaren behöver analysera och jämföra information strukturerad i rader och kolumner. Tabeller kan antingen vara enkla datatabeller för presentation, eller vara mer avancerade interaktiva tabeller.

I en tabell har varje rad samma grupper av information som visas kolumnvis, till exempel namn, datum, belopp och diarienummer.

Datatabell

FDataTable

Använd för att endast presentera information.

Användning

Komponenten har en prop rows som du sätter till de rader som ska presenteras.

Slotten default renderas för varje item i rows och har en slot attribute row som innehåller nuvarande rad.

Varje kolumn som tabellen ska innehålla skapas genom att använda komponenten FTableColumn.

<f-data-table :rows>
    <template #caption> Tabell exempel </template>
    <template #default="{ row }">
        <f-table-column title="Kolumnrubrik" type="text">
            {{ row.value }}
        </f-table-column>
    </template>
</f-data-table>

Innehåller cellen numeriska värden, datum eller annan data som inte är löptext bör du använd direktivet v-format för att formatera och undvika radbryt i cellen.

 <f-data-table :rows>
     <template #caption> Tabell exempel </template>
     <template #default="{ row }">
-        <f-table-column title="Kolumnrubrik" type="text">
-            {{ row.value }}
-        </f-table-column>
+        <f-table-column
+            title="Kolumnrubrik"
+            type="numeric"
+            v-format:number="row.value"
+        ></f-table-column>
     </template>
 </f-data-table>

Interaktiv tabell

FInteractiveTable

Använd en interaktiv tabell när användaren behöver interagera med tabellen. Det kan handla om att välja, lägga till, ändra, ta bort en rad eller utföra andra åtgärder via knappar eller genom att klicka på hela raden.

Användning

Komponenten har en prop rows som du sätter till de rader som ska presenteras.

Slotten default renderas för varje item i rows och har en slot attribute row som innehåller nuvarande rad.

Varje kolumn som tabellen ska innehålla skapas genom att använda komponenten FTableColumn.

<f-interactive-table :rows>
    <template #caption> Tabell exempel </template>
    <template #default="{ row }">
        <f-table-column title="Kolumn A" type="text">
            {{ row.foo }}
        </f-table-column>
        <f-table-column title="Kolumn B" type="text">
            {{ row.bar }}
        </f-table-column>
        <f-table-column title="Kolumn C" type="text">
            {{ row.baz }}
        </f-table-column>
    </template>
</f-interactive-table>

Innehåller cellen numeriska värden, datum eller annan data som inte är löptext bör du använd direktivet v-format för att formatera och undvika radbryt i cellen.

 <f-interactive-table :rows>
     <template #caption> Tabell exempel </template>
     <template #default="{ row }">
-        <f-table-column title="Kolumn A" type="text">
-            {{ row.foo }}
-        </f-table-column>
+        <f-table-column
+            title="Kolumn A"
+            type="numeric"
+            v-format:number="row.foo"
+        ></f-table-column>
         <f-table-column title="Kolumn B" type="text">
             {{ row.bar }}
         </f-table-column>

Hantera rader

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

Inmatning i tabell

Inmatningsfält kan placeras i en tabell för att direkt kunna redigera värdet i cellen. Fältens standardetikett är visuellt dolda och ersätts av tabellrubrik för en seende användare, men inmatningfältets etikett läsas fortfarande upp av skärmläsare. Fel vid fältvalidering i en tabell indikeras med varningstriangel och röd ram på samma sätt som fält i ett vanligt formulär men felmeddelandet visas i en popup. Felmeddelandet visas när det felmarkerade fältet har fokus.

Följande inmatningfält kan användas:

• textbaserade inmatningsfält (FTextField) förutom sökfält
• datumväljare (FDatepickerField)
• dropplista (FSelectField).

     <template #caption> Tabell exempel </template>
     <template #default="{ row }">
         <f-table-column title="Kolumn A" type="text">
-            {{ row.foo }}
+            <f-datepicker-field v-model="row.foo" v-validation.required>
+                Kolumn A
+            </f-datepicker-field>
         </f-table-column>
         <f-table-column title="Kolumn B" type="text">
             {{ row.bar }}

<script lang="ts">
import { defineComponent } from "vue";
import { FDatepickerField, FInteractiveTable, FTableColumn, FNumericTextField } from "@fkui/vue";

export default defineComponent({
    name: "FInteractiveTableInputExample",
    components: {
        FInteractiveTable,
        FTableColumn,
        FDatepickerField,
        FNumericTextField,
    },
    data() {
        return {
            betalningar: [
                {
                    id: "1",
                    date: "2024-05-25",
                    belopp: "",
                    beskrivning: "Första utbetalning",
                },
                {
                    id: "2",
                    date: "2024-06-25",
                    belopp: "",
                    beskrivning: "Andra utbetalning",
                },
                {
                    id: "3",
                    date: "2024-07-24",
                    belopp: "",
                    beskrivning: "Tredje utbetalning",
                },
            ],
        };
    },
});
</script>

<template>
    <f-interactive-table :rows="betalningar" key-attribute="id">
        <template #caption> Justera betalningar </template>
        <template #default="{ row }">
            <f-table-column title="Beskrivning" type="text" shrink>
                {{ row.beskrivning }}
            </f-table-column>
            <f-table-column title="Utbetalningsdatum" type="text" shrink>
                <f-datepicker-field v-model="row.date" v-validation.required>
                    Utbetalningsdatum
                </f-datepicker-field>
            </f-table-column>

            <f-table-column title="Utbetalat belopp" type="text" shrink>
                <f-numeric-text-field v-model="row.belopp" v-validation.required>
                    Utbetalt belopp
                </f-numeric-text-field>
            </f-table-column>
        </template>
    </f-interactive-table>
</template>

Åtgärdsknappar

Åtgärdsknappar kan placeras i en tabell för att utföra en operation på raden. Åtgärdsknappar måste ha en etikett men etiketten behöver inte vara visuellt synlig. Etiketten behöver tydligt förklara åtgärden och kontext (exempelvis något som förklarar vilken rad som påverkas). Kolumnens typ ska sättas till action.

         <f-table-column title="Kolumn C" type="text">
             {{ row.baz }}
         </f-table-column>
+        <f-table-column title="Åtgärder" type="action" shrink>
+            <f-table-button icon="pen" @click="modifyRow(row)">
+                Redigera rad {{ row.id }}
+            </f-table-button>
+        </f-table-column>
     </template>
 </f-interactive-table>

Om etiketten ska vara synlig använder du propen label. En <span> med sr-only kan användas för att ge ytterligare kontext till skärmläsare:

             {{ row.baz }}
         </f-table-column>
         <f-table-column title="Åtgärder" type="action" shrink>
-            <f-table-button icon="pen" @click="modifyRow(row)">
-                Redigera rad {{ row.id }}
+            <f-table-button icon="pen" label @click="modifyRow(row)">
+                Redigera <span class="sr-only">rad {{ row.id }}</span>
             </f-table-button>
         </f-table-column>
     </template>

Länkar i tabell använder table__anchor klassen:

         <f-table-column title="Kolumn C" type="text">
             {{ row.baz }}
         </f-table-column>
+        <f-table-column title="Länk" type="action" shrink>
+            <a class="anchor table__anchor" href="#" target="_blank">
+                Öppna dokument
+                <span class="sr-only">{{ row.id }}</span>
+                <f-icon name="new-window"></f-icon>
+                <span class="sr-only">öppnas i ny flik</span>
+            </a>
+        </f-table-column>
     </template>
 </f-interactive-table>

Välja rader

En interaktiv tabell med selectable prop lägger till kryssrutor som kan användas för att välja rader. När en rad väljs uppdateras v-model med referens till alla rader som är valda.

-<f-interactive-table :rows="myRows">
 <f-interactive-table
+   v-model="selectedRows"
    :rows="myRows"
+   selectable
 >

Du kan även lägga till eller ta bort valda rader genom att ändra referenserna som skickas till v-model. På så sätt kan du till exempel förvälja vissa rader eller skapa bulk-åtgärder som väljer vissa typer av rader. Notera att v-model kräver referenser till objekt som du skickat till rows prop för att kunna välja dessa.

const rows = [
    { name: "Banan", type: "Frukt" },
    { name: "Äpple", type: "Frukt" },
    { name: "Vitkål", type: "Grönsak" },
    { name: "Spenat", type: "Grönsak" },
];

// Preselect all rows that are fruit type.
const selectedRows = rows.filter((row) => row.type === "Frukt");

Expanderbara rader

Med expanderbara rader går det att skapa ytterligare tabellrader som visas när man trycker på en expanderbar rad.

Expanderbara rader kan presenteras på två sätt:

• Rader som följer existerande kolumner
• Rader med Valfritt innehåll

För båda varianterna gäller att du sätter propen expandable-attribute till den egenskap i objektet som innehåller rader med expanderat innehåll.

Givet följande struktur sätter man expandable-attribute till myExpandableRow:

const rows = [
    {
        id: "1",
        name: "Utbetalning",
        date: "2023-09-27",
        sum: 1200,
        myExpandableRow: [
            {
                id: "1a",
                name: "Barnbidrag",
                date: "2023-09-25",
                sum: 200,
            },
            {
                id: "1b",
                name: "Övrig ersättning",
                date: "2023-09-27",
                sum: 1000,
            },
        ],
    },
    {
        id: "2",
        name: "Utbetalning",
        date: "2023-12-25",
        sum: 1000,
        myExpandableRow: [
            {
                id: "2a",
                name: "Barnbidrag",
                date: "2023-12-25",
                sum: 1000,
            },
        ],
    },
];

Följa existerande kolumner

För att skapa expanderbart innehåll som följer existerande kolumner så krävs det att expandable-attribute är satt och att expandable slot inte används. Innehållet måste då följa samma datastruktur som ordinarie rader.

Se nedan exempel av data som kan användas för att generera en expanderbar rad som innehåller två tabellrader.

-<f-interactive-table :rows key-attribute="id">
+<f-interactive-table :rows key-attribute="id" expandable-attribute="myExpandableRow">
     <template #caption> Expanderbara rader </template>
     <template #default="{ row }">
         <f-table-column title="Ersättning"> {{ row.name }} </f-table-column>

Valfritt innehåll

För att själv ta kontroll över hur raden presenteras kan du använda slotten expandable. Ditt innehåll placeras i en cell som sträcker sig över hela raden och vad som ligger i datastrukturen behöver inte följa ordinarie rader.

             <span v-format:number="row.sum"></span> kronor
         </f-table-column>
     </template>
+    <template #expandable="{ expandableRow }">
+        Anpassat innehåll för expanderad rad "{{ expandableRow.name }}".
+    </template>
 </f-interactive-table>

Ange nyckel (keyAttribute)

Med keyAttribute så kan du ange namnet för en nyckel (key) som finns i varje rad-ojekt och innehåller ett värde som kan användas för att identifiera olika rader. Om detta anges, så måste varje rad (även expanderade rader) innehålla denna nyckel med ett unikt värde.

Att använda keyAttribute är valfritt och behövs inte anges om du inte har nåt naturligt id att ange för dina rader. Men om det är tänkt att dina rader ska laddas om från REST-api eller liknande så måste du använda keyAttribute för att aktuell status för raderna ska kunna bibehållas.

-<f-interactive-table :rows="myRows">
+<f-interactive-table :rows="myRows" key-attribute="id">

// The key "id" is used for "keyAttribute".
const myRows = [
    { id: "a", name: "Banan" },
    { id: "b", name: "Äpple" },
];

Tabellrubrik

En tabell ska alltid ha en rubrik, antingen med caption-elementet eller en associerad heading.

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

-<h3>Tabellrubrik</h3>
-<f-data-table>
+<h3 id="awesome-heading">Tabellrubrik</h3>
+<f-data-table aria-labelledby="awesome-header">
   ...
 </f-data-table>

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

 <f-data-table>
+  <template #caption> Tabellrubrik </template>
   ...
 </f-data-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-data-table>
+  <template #caption>
+    <span class="sr-only"> Tabellrubrik </span>
+  </template>
   ...
 </f-data-table>

Tänk på det här

• Gör en ordentlig analys av vilken information som måste visas i tabellen. Målet bör vara att alla kolumner får plats på skärmen.
• Hjälp användaren att hitta i en tabell med mycket information genom att lägga till möjlighet att söka eller sortera. Använd komponent Datamängdssorteraren
• Formatera datan i tabellen så den blir lätt att läsa. Använd med fördel Format Plugin för att både formatera och undvika radbryt mitt i ett värde.

Utforma en tabell

• Anpassa bredden på tabellen till innehållet, gör den inte bredare än den behöver vara. Samma princip gäller för kolumner.
• Tabellen kommer radbryta innehåll om det inte får plats. Använd istället skroll-funktionen om innehållet blir svårläst.
• Du kan ange vilka kolumner som tar maximal bredd och vilka som får ta minsta möjliga.
• Text i en tabellcell ska i regel vara vänsterställd. Undantag är belopp och andra numeriska värden som till exempel procent som ska visas högerställt för att lättare kunna jämföras.
• Använd zebra-randiga rader när du har långa och många rader.  Det gör det enklare att visuellt skanna av tabellen och följa rader.

Skroll i tabell

För att lägga till skroll i tabell använder du prop scroll:

-<f-data-table :rows>
+<f-data-table :rows scroll="horizontal">
     <template #default="{ row }">
         <!-- [...] -->
     </template>
 </f-data-table>

Tomt läge i tabellen

Texten för en tom tabell går att anpassas till att bättre passa innehållet, till exempel "Det finns inga betalningar", "Ingen anslutning finns" Texten sätts i slot #empty:

 <f-data-table :rows>
     <template #caption> Kända ankeborgare </template>
+    <template #empty> Det finns inga rättigheter </template>
     <template #default="{ row }">
         <!-- [...] -->
     </template>
 </f-data-table>

Valbara rader

För interaktiv tabell kan rader kan göras valbara med propen selectable. v-model kan användas för att komma åt lista med valda rader.

Slotten checkbox-description måste användas för att ge en beskrivning av kryssrutan för skärmläsare. Texten bör innehålla något som tydligt identifierar raden från andra rader.

-<f-interactive-table :rows>
+<f-interactive-table :rows selectable v-model="selectedRows">
     <template #caption> Tabell exempel </template>
     <template #default="{ row }">
         <f-table-column title="Kolumn A" type="text">
@@ -11,4 +11,7 @@
             {{ row.baz }}
         </f-table-column>
     </template>
+    <template #checkbox-description="{ row }">
+        Välj rad {{ row.value }}
+    </template>
 </f-interactive-table>

Radrubriker

Både datatabell och interaktiv tabell kan använda radrubriker utöver kolumnrubriker. En radrubrik underlättar för skärmläsareanvändare genom att markera vilken eller vilka celler som utgör en rubrik och blir upplästa automatiskt när skärmläsaren navigerar i tabellen.

Använd radrubriker om det finns många kolumner och/eller en tydlig cell som identifierar rader från andra rader.

 <f-data-table :rows>
     <template #caption> Tabell exempel </template>
     <template #default="{ row }">
-        <f-table-column title="Kolumnrubrik" type="text">
+        <f-table-column title="Kolumnrubrik" type="text" row-header>
             {{ row.value }}
         </f-table-column>
     </template>

Kolumnbredd

Kolumnents bredd justeras generellt sett av cellernas innehåll men med proparna expand och shrink kan du indikera att en kolumn ska använda så mycket eller så lite utrymme som möjligt.

• En kolumn med expand tar så mycket utrymme den kan.
• En kolumn med shrink tar så lite utrymme den kan.

Med shrink kommer cellernas innehåll att radbrytas om du inte använt direktivet v-format eller på annat sätt förbindrat radbrytning.

Om flera kolumner har expand fördelas storleken godtycklingt efter webbläsarens preferens.

Om inget anges fungerar kolumnen som om expand är satt. Det är ett fel att sätta både expand och shrink samtidigt.

Kolumntyper

Kolumner har fyra olika typer som påverkar hur cellen presenteras:

• text (default) - standardformatering
• date - font med tabulär bredd på tecken.
• numeric - högerställt och font med tabular bredd på tecken.
• action - för kolumner som innehåller åtgärdsknappar.

Typen anges genom att sätta propen type:

-<f-table-column title="Kolumnrubrik">
+<f-table-column title="Kolumnrubrik" type="numeric">

Textnycklar

Läs mer om att anpassa och översätta text.

fkui.data-table.empty

Text som visas som standardinnehåll i slotten empty (när tabellen är tom).

Default: "Tabellen är tom"

fkui.interactive-table.expand

Kolumnrubrik som visas för skärmläsare om funktionen för expanderbara rader (expandable-attribute) aktiveras

Default: "Expandera"

fkui.interactive-table.select

Kolumnrubrik som visas för skärmläsare om funktionen för valbara rader (selectable) aktiveras

Default: "Markera"

fkui.interactive-table.empty

Text som visas som standardinnehåll i slotten empty (när tabellen är tom).

Default: "Tabellen är tom"

Props, Events & Slots

FDataTable

Används för att presentera information

Props

rows: T[]

The rows to be listed. The rows will be listed in the given array order.

keyAttribute: string Optional

Unique attribute in rows.

Default: undefined

striped: boolean Optional

When enabled alternating rows will use a different background color.

Default: false

scroll: TableScroll Optional

Enable scrolling inside table.

Can be one of the following values:

• "horizontal": Enables horizontal scrolling
• "vertical": Enables vertical scrolling
• "both": Enables scrolling in both directions
• "none": Disables scrolling (default)

Default: TableScroll.NONE

Slots

caption

Slot for table caption.

default

Slot for table row.

Bindings:

• row: T — Current row being rendered.

empty

Slot for displaying a message when table is empty. Default text is 'Tabellen är tom' (key fkui.data-table.empty).

FTableButton

Props

icon: string Optional

When set to an icon name an icon is displayed next to the label.

label: boolean Optional

By default the label is visually hidden. When this prop is enabled the label is rendered visually as well.

Events

click

Emitted when the button is pressed.

Slots

default

Label text.

FTableColumn

Props

name: string Optional

Unique (per-table) identifier. Typically set to the row property displayed but any unique string can be used.

Only required when used with FSortFilterDataset.

Default: undefined

visible: boolean Optional

When enabled controls column visibility (default true)

Should be used instead of v-if or v-show.

Default: true

rowHeader: boolean Optional

When enabled this cell will be a row header (<th> as opposed to <td>).

Default: false

title: string

Text to show in column header. In order to force newlines use \n.

description: string Optional

Additional column description.

Default: ""

shrink: boolean Optional

Set this column to shrink as small as possible.

Cannot be combined with expand

Default: false

expand: boolean Optional

Set this column to expand as large as possible.

Cannot be combined with shrink

Default if neither expand or shrink is set.

Default: false

type: string Optional

Type of data the rows contains.

Applies proper alignment and some styling (e.g. "numeric" uses fixed width numbers).

Can be one of the following values:

• "text": regular text data (default)
• "date": date (should be YYYY-MM-DD)
• "numeric": numeric data
• "action": buttons to perform actions on row

Default: FTableColumnType.TEXT

Slots

default

Content to be rendered in table cell.

FInteractiveTable

Props

rows: T[]

The rows to be listed. The rows will be listed in the given array order.

hover: boolean Optional

When enabled hovering over a row will be highlighted.

Default: false

keyAttribute: string Optional

Unique attribute in rows.

Default: undefined

expandableAttribute: string Optional

Attribute of expandable content in rows. If provided, the table can contain expandable rows.

Default: ""

expandableDescribedby: string Optional

Element id for aria-describedby on expandable rows to describe expanded content.

Default: ""

selectable: boolean Optional

When enabled the table rows will be selectable.

The current set of selected rows can be accessed with v-model.

The select and unselect events will be emitted when a row is selected or deselected.

Default: false

striped: boolean Optional

When enabled alternating rows will use a different background color.

Default: false

scroll: TableScroll Optional

Enable scrolling inside table.

Can be one of the following values:

• "horizontal": Enables horizontal scrolling
• "vertical": Does nothing (deprecated)
• "both": Acts as horizontal (deprecated)
• "none": Disables scrolling (default)

Default: TableScroll.NONE

showActive: boolean Optional

Enable showing the active row.

Default: true

v-model: T[] | undefined Optional

Currently selected rows. Requires selectable to be set.

Default: undefined

v-model:active: T | undefined Optional

Current active row.

Default: undefined

Events

change

Emitted when row is activated.

Note: This event is being emitted even if prop showActive is set to false!

Arguments:

• row: T — Row being activated.

click

Emitted when row is clicked.

Arguments:

• row: T — Row being clicked.

select

Emitted when row is selected. See also unselect.

This event is only emitted when using prop selectable.

Arguments:

• row: T — Row being selected.

unselect

Emitted when row is unselected. See also select.

This event is only emitted when using prop selectable.

Arguments:

• row: T — Row being unselected.

expand

Emitted when row is expanded. See also collapse.

This event is only emitted when using expandable rows.

Arguments:

• row: T — The parent row holding rows to be expanded.

collapse

Emitted when row is collapsed. See also expand.

Arguments:

• row: T — The parent row holding rows to be collapsed.

update:modelValue

V-momdel event for selected rows.

Arguments:

• rows: Array — Array of all currently selected rows.

update:active

V-model event for active row.

Arguments:

• row: union — Current active row or undefined if no row is active.

Slots

row-description

Text to use as aria-label on the table row element (<tr>).

caption

Slot for table caption.

default

Slot for table row.

Bindings:

• row: T — Current row being rendered.

checkbox-description

Screenreader label for the checkbox when using selectable.

Bindings:

• row: T — Current row being rendered.

expandable

Slot for expandable table row.

Bindings:

• expandableRow: T — Current expandable row being rendered.
• parentRow: T — The parent row of the expandable rows.

empty

Slot for displaying a message when table is empty.