Komponent

FDataTable , FInteractiveTable , 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.

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.

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 de läsas fortfarande upp av skärmläsare genom klassen sr-only. 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. Datumväljaren och alla inmatningfält (förutom sökfält) har stöd för att placeras i tabell.

<template>
    <div class="row">
        <div class="col col--lg-10">
            <f-interactive-table :rows="betalningar" key-attribute="id">
                <template #caption> Justera betalningar </template>
                <template #default="{ row }">
                    <f-table-column name="beskrivning" title="Beskrivning" type="text" shrink>
                        {{ row.beskrivning }}
                    </f-table-column>
                    <f-table-column name="date" 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 name="belopp" 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>
        </div>
    </div>
</template>

<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>

Även dropplista har stöd för att användas i tabellcell. I de fall en obligatorisk dropplista lämnas tom visas samma text som platshållartexten tillsammas med ikon och röd ram.

Expanderbara rader

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

För att skapa expanderbart innehåll som följer existerande kolumner så krävs det att expandable-attribute är satt och 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.

const myExpandableRows = [
    {
        id: "1",
        name: "Utbetalning",
        date: "2023-10-11",
        sum: 1200,
        expandable: [
            {
                id: "1a",
                name: "Barnbidrag",
                date: "2023-10-11",
                sum: 200,
            },
            {
                id: "1b",
                name: "Övrig ersättning",
                date: "2023-10-11",
                sum: 1000,
            },
        ],
    },
];

<script setup>
import { FInteractiveTable, FTableColumn } from "@fkui/vue";

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,
            },
        ],
    },
];
</script>

<template>
    <f-interactive-table :rows expandable-attribute="myExpandableRow" key-attribute="id">
        <template #caption> Expanderbara rader </template>
        <template #default="{ row }">
            <f-table-column name="compensation" title="Ersättning"> {{ row.name }} </f-table-column>
            <f-table-column name="id" title="Id" shrink> {{ row.id }} </f-table-column>
            <f-table-column name="date" title="Datum" type="date"> {{ row.date }} </f-table-column>
            <f-table-column name="amount" title="Summa" type="numeric">
                {{ row.sum }} kronor
            </f-table-column>
        </template>
    </f-interactive-table>
</template>

För att istället skapa expanderbara rader med valfritt innehåll används expandable slot.

<template #expandable="{ expandableRow }">
    {{ expandableRow.myAwesomeText }}
</template>

Observera att det inte är rekommenderat att skapa för komplext expanderat innehåll, så som att placera ytterligare expanderbara tabeller inuti.

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

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 skoll i tabell använder du prop scroll:

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

Props, Events & Slots

FDataTable

Används för att presentera information

Props

rows: ListArray

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

keyAttribute: string

Unique attribute in rows.

striped: boolean Optional

If true 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: unknown

empty

Slot for displaying a message when table is empty.

FTableColumn

Props

name: string

Unique (per-table) identifier.

Typically set to the row property displayed but any unique string can be used.

visible: boolean Optional

If set to true, display the column, set to false to hide it.

Default: true

rowHeader: boolean Optional

If true 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

‐

FInteractiveTable

Props

rows: ListArray

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

hover: boolean Optional

If true hovering over a row will be highlighted

Default: false

keyAttribute: string

Unique attribute in rows.

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

If true the table rows will be selectable.

Default: false

striped: boolean Optional

If true 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

v-model: ListArray | undefined Optional

V-model will bind to value containing selected rows.

Default: undefined

showActive: boolean Optional

Enable showing the active row.

Default: true

v-model:active: ListItem | undefined Optional

V-model will bind to value containing the current active row.

Default: () => undefined

Events

change

Emitted when row is activated.

Arguments:

• row: ListItem

click

Emitted when row is clicked.

Arguments:

• row: ListItem

unselect

Emitted when row is unselected.

Arguments:

• row: ListItem

update:modelValue

V-model event to update value property.

Arguments:

• <anonymous>: undefined

update:active

V-model active event.

Arguments:

• activeItem: ListItem

select

Emitted when row is selected.

Arguments:

• row: ListItem
• selectedRows: ListArray

expand

Emitted when row is expanded.

Arguments:

• row: ListItem

collapse

Emitted when row is collapsed.

Arguments:

• row: ListItem

Slots

caption

Slot for table caption.

checkbox-description

‐

Bindings:

• row: unknown

default

Slot for table row.

Bindings:

• row: unknown

expandable

Slot for expandable table row.

Bindings:

• expandableRow: unknown
• parentRow: unknown

empty

Slot for displaying a message when table is empty.