Komponenter

Table

Tabeller brukes til å organisere og vise data på en strukturert måte.

StabilOppdatert 23. juni 2025

Github Figma Endringslogg

Egnet til:

Vise data i rader og kolonner

Eksempler

Medium er standardstørrelsen på både eksterne og interne flater.

TSX

<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
      <Table.HeaderCell scope="col">Fødselsnr.</Table.HeaderCell>
      <Table.HeaderCell scope="col">Start</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    {data.map(({ name, fnr, start }, i) => {
      return (
        <Table.Row key={i + fnr}>
          <Table.HeaderCell scope="row">{name}</Table.HeaderCell>
          <Table.DataCell>{fnr}</Table.DataCell>
          <Table.DataCell>{format(new Date(start))}</Table.DataCell>
        </Table.Row>
      );
    })}
  </Table.Body>
</Table>

Retningslinjer

Justering av innhold

Alt bør være venstrejustert, unntatt tall, som bør høyrejusteres for å gjøre det enklere å sammenligne tallene.

Meny

Bruk ActionMenu dersom det er flere handlinger i en tabellrad. Dette gir en ryddigere tabell og sparer plass.

Overskriftceller

Bruk <th> og ikke <td> i alle overskriftceller. 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 kodeeksemplene.

Tilgjengelighet

Ulike skjermlesere håndterer tabeller litt forskjellig, men felles er at bare en liten del av tabellen kan presenteres av gangen: ofte bare én celle. Det er en fordel at tabellceller ikke slås sammen, og at cellene ikke inneholder mer enn ett interaktivt element. Det er viktig å bruke rad- og kolonneoverskrifter (<th>). Unntaket er kolonner som kun inneholder interaktive elementer, som skal ha label. (Se eksempel "Selectable".)

Jaws med standardinnstillinger, som er ganske tilsvarende andre skjermlesere, fungerer slik:

Når du går fra celle til celle i en rad (horisontalt) leses kolonneoverskrift og deretter data i den cellen du kommer til. Jaws antar at du vet hvilken rad du står i.
Når du går fra celle til celle i en kolonne (vertikalt) leses radoverskrift og deretter data i den cellen du kommer til. Jaws antar at du vet hvilken kolonne du står i.

Du bør lære deg tastene for å navigere i tabeller hvis du skal teste. De enkleste kommandoene er:

Jaws/NVDA: Ctrl + Alt + Piltaster
VoiceOver på Mac: Kontroll + Tilvalg + Piltaster

Spesielt Jaws har veldig mange innstillinger for tabeller. Skal du sikre at du tester på riktig måte kan det være nødvendig å kjenne til innstillingene i de ulike skjermleserne.

Caption

For skjermlesere er det en fordel å ha en <caption>. Denne vises hvis du hopper til tabellen eller viser en liste over tabeller. Dette er ekstra viktig hvis du har mange tabeller på samme side.

Props

Table

size?: Type:
"medium" | "small" | "large"
Default:
""medium""
Description:
Changes padding around Cells
zebraStripes?: Type:
boolean
Default:
false
Description:
Zebra striped table
stickyHeader?: Type:
boolean
Default:
false
Description:
Makes the header sticky
sort?: Type:
SortState
Description:
Sort state
onSortChange?: Type:
((sortKey: string) => void)
Description:
Callback whens sort state changes
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLTableElement>
Description:
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). React Docs

Table.Body

className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLTableSectionElement>
Description:
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). React Docs

Table.ColumnHeader

sortKey?: Type:
string
Description:
Key to sort by
sortable?: Type:
boolean
Default:
false
Description:
Column is sortable, adds indicators to show sorting
scope?: Type:
string
align?: Type:
"left" | "center" | "right"
Default:
""left""
Description:
Content alignment inside cell
textSize?: Type:
"medium" | "small"
Default:
"null"
Description:
Adjusts font-size
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLTableCellElement>
Description:
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). React Docs

Table.Header

className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLTableSectionElement>
Description:
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). React Docs

Table.Row

selected?: Type:
boolean
Default:
false
Description:
Row is selected
shadeOnHover?: Type:
boolean
Default:
true
Description:
Shade the table row on hover.
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLTableRowElement>
Description:
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). React Docs

Table.DataCell

align?: Type:
"left" | "center" | "right"
Default:
""left""
Description:
Content alignment inside cell
textSize?: Type:
"medium" | "small"
Default:
"null"
Description:
Adjusts font-size
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLTableCellElement>
Description:
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). React Docs

Table.HeaderCell

scope?: Type:
string
align?: Type:
"left" | "center" | "right"
Default:
""left""
Description:
Content alignment inside cell
textSize?: Type:
"medium" | "small"
Default:
"null"
Description:
Adjusts font-size
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLTableCellElement>
Description:
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). React Docs

Table.ExpandableRow

content: Type:
ReactNode
Description:
Content of the expanded row
togglePlacement?: Type:
"left" | "right"
Default:
"left"
Description:
Placement of toggle button
open?: Type:
boolean
Description:
Opens component if 'true', closes if 'false' Using this prop removes automatic control of open-state
defaultOpen?: Type:
boolean
Default:
false
Description:
Opened state default
onOpenChange?: Type:
((open: boolean) => void)
Description:
Change handler for open
expansionDisabled?: Type:
boolean
Default:
false
Description:
Disable expansion. shadeOnHover will not be visible.
expandOnRowClick?: Type:
boolean
Default:
false
Description:
Makes the whole row clickable
colSpan?: Type:
number
Default:
999
Description:
The width of the expanded row's internal cell
contentGutter?: Type:
"left" | "right" | "none"
Default:
"Same as `togglePlacement`"
Description:
Optional left, right-gutter for content
selected?: Type:
boolean
Default:
false
Description:
Row is selected
shadeOnHover?: Type:
boolean
Default:
true
Description:
Shade the table row on hover.
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLTableRowElement>
Description:
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). React Docs

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

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

Informasjonskapsler på aksel.nav.no

Table

Egnet til:

Eksempler

Retningslinjer

Justering av innhold

Meny

Overskriftceller

Tilgjengelighet

Caption

Props

Table

size?

zebraStripes?

stickyHeader?

sort?

onSortChange?

className?

data-color?

ref?

Table.Body

className?

data-color?

ref?

Table.ColumnHeader

sortKey?

sortable?

scope?

align?

textSize?

className?

data-color?

ref?

Table.Header

className?

data-color?

ref?

Table.Row

selected?

shadeOnHover?

className?

data-color?

ref?

Table.DataCell

align?

textSize?

className?

data-color?

ref?

Table.HeaderCell

scope?

align?

textSize?

className?

data-color?

ref?

Table.ExpandableRow

content

togglePlacement?

open?

defaultOpen?

onOpenChange?

expansionDisabled?

expandOnRowClick?

colSpan?

contentGutter?

selected?

shadeOnHover?

className?

data-color?

ref?

Tokens