Tabell
- 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.
Ä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,
},
],
},
];
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
orshrink
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 highlightedDefault:
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.