Intro
Tabeller brukes til å organisere og vise data på en effektiv måte. De kan være enkle med få rader og kolonner, men de kan også være innholdsrike med interaktive komponenter som lenker, knapper, avkryssingsbokser og nedtrekkslister.
Egnet til:
- Organisere og vise data
Eksempler
Varianter
Størrelser
Tabeller kommer i to størrelser:
- Medium er standard, og brukes både på eksterne og interne flater.
- Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
Valgte rader
Når man trenger å utføre handlinger for én eller flere rader.
Sortering
Når man trenger å sortere innhold i kolonner.
Se også avsnittet om sortering og ikonknapper under Tilgjengelighet.
Ekspanderbare rader
Rader kan utvides for å vise ekstra informasjon. En knapp brukes i radene for å utvide og lukke.
Retningslinjer
Justering av innhold
Som standard er innhold venstrejustert, dette gir enklest oversikt. Det eneste unntaket er numeriske data relatert til størrelse, disse tallene bør være justert til høyre for å gjøre det lettere å identifisere tallstørrelser.
Lenketekst i tabell
Det må være lett for folk å se forskjellen mellom vanlig tekst og lenketekst. Du bør aller helst bruke vanlig lenkestil med underline, da er det sikkert at alle kan skille lenker fra vanlig tekst. Hvis du ikke vil bruke underline til lenker i tabeller, må du velge en annen måte å skille lenker fra vanlig tekst på, for eksempel med ikon eller at kontrastforskjellen mellom lenketekst og vanlig tekst blir minst 3:1
Ekspanderbare rader
Ved bruk av ekspanderbare rader benyttes en knapp i hver rad for å åpne og lukke. Man kan velge om knappen vises i starten eller enden av raden. Vi har valgt ikke å tilby at hele raden kan trykkes for å åpne/lukke siden dette kommer i konflikt med andre interaktive elementer i radene vi ikke kan ta høyde for.
Meny
Vurder å bruke meny som plassbesparende tiltak. De egner seg om det er flere handlinger i en tabellrad og når det er sekundærinformasjon som ikke er viktig å ha fremme hele tiden.
Bruk <th> og ikke <td> i alle overskriftceller. En celle er en overskrift hvis den beskriver innholdet i cellene under eller ved siden av.
I Aksel-APIet betyr det at du som regel skal bruke <Table.HeaderCell> i stedet for <Table.DataCell> i første rad og kolonne.
Se demoen under bruksseksjonen for et kodeeksempel.
Tilgjengelighet
HTML
Det er svært viktig du koder tabeller riktig slik at innholdet blir forståelig og tilgjengelig også for personer som bruker hjelpemidler.
Dette innebærer at du må sørge for at:
- Innhold som fungerer som rad- og kolonneoverskrifter skal kodes som overskrifter.
- Overskriftceller skal ikke være tomme.
- Knapper, avkryssingsbokser og nedtrekkslister må ha en tilgjengelig ledetekst.
- Du skal også kunne navigere til, samt bruke disse med kun tastatur.
- Det er kun en komponent i en tabellcelle.
Sortering
Sorteringsfunksjonen i tabellene består av Ikon-knapper, og skal i følge WCAG alltid ha en alternativ tekstbeskrivelse. Jobber du med våre interne systemer, kan og bør du tenke litt ekstra på hvordan tabellen oppleves for saksbehandlere som bruker hjelpemidler. Brukerne og konteksten er ikke helt den samme som eksterne nettsider. Det er viktig at de interne løsningene våre oppleves som effektive arbeidsverktøy.
Tastaturinteraksjon
Tabeller med interaktive komponenter skal kunne brukes med kun bruk av tastatur. Detaljer om hvordan komponenter skal fungere finner du på siden til komponenten.
Her er de mest vanligste kombinasjonene.
| Kommando | Interaksjon |
|---|---|
| Tab | Flytter fokus det neste interaktive elementet |
| Shift+Tab | Flytter fokus det forrige interaktive elementet |
| Space/Enter | Interagere med elementer |
Props
Table
- size?"large" | "medium" | "small"
- Changes padding around Cells
- zebraStripes?boolean
- Zebra striped table
- sort? SortState
- Sort state
- onSortChange? ((sortKey?: string) => void)
- Callback whens sort state changes
- className? string
- ref? Ref<HTMLTableElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table extends HTMLTableElement
Table.Body
- className? string
- ref? Ref<HTMLTableSectionElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.Body extends HTMLTableSectionElement
Table.ColumnHeader
- sortKey? string
- Key to sort by
- sortable?boolean
- Column is sortable, adds indicators to show sorting
- scope? string
- align?"left" | "center" | "right"
- Content alignment inside cell
- className? string
- ref? Ref<HTMLTableCellElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.ColumnHeader extends HTMLTableCellElement
Table.Header
- className? string
- ref? Ref<HTMLTableSectionElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.Header extends HTMLTableSectionElement
Table.Row
- selected?boolean
- Row is selected
- shadeOnHover?boolean
- Shade the table row on hover.
- className? string
- ref? Ref<HTMLTableRowElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.Row extends HTMLTableRowElement
Table.DataCell
- align?"left" | "center" | "right"
- Content alignment inside cell
- className? string
- ref? Ref<HTMLTableCellElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.DataCell extends HTMLTableCellElement
Table.HeaderCell
- scope? string
- align?"left" | "center" | "right"
- Content alignment inside cell
- className? string
- ref? Ref<HTMLTableCellElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.HeaderCell extends HTMLTableCellElement
Table.ExpandableRow
- content ReactNode
- Content of the expanded row
- togglePlacement?"left" | "right"
- Placement of toggle button
- open? boolean
- Opens component if 'true', closes if 'false' Using this props removes automatic control of open-state
- defaultOpen?boolean
- Opened state default
- onOpenChange? ((open: boolean) => void)
- Change handler for open
- expansionDisabled?boolean
- Disable expansion. shadeOnHover will not be visible.
- expandOnRowClick?boolean
- Makes the whole row clickable
- colSpan?number
- The width of the expanded row's internal cell
- selected?boolean
- Row is selected
- shadeOnHover?boolean
- Shade the table row on hover.
- className? string
- ref? Ref<HTMLTableRowElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.ExpandableRow extends HTMLTableRowElement
Tokens
| Token | Fallback |
|---|---|
| --ac-table-row-hover | --a-bg-subtle |
| --ac-table-row-selected | --a-surface-action-subtle |
| --ac-table-row-selected-hover | --a-surface-action-subtle-hover |
| --ac-table-row-zebra | --a-surface-subtle |
| --ac-table-row-border | --a-border-default |
| --ac-table-row-hover-border | --a-border-strong |
| --ac-table-sort-button-text | --a-text-action |
| --ac-table-sort-button-hover-bg | --a-bg-subtle |
| --ac-table-sort-button-sorted-bg | --a-surface-selected |
| --ac-table-sort-button-sorted-text | --a-text-action-on-action-subtle |