Komponenter

Table

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

StabilOppdatert 5. mai 2026

Egnet til:

Vise data i rader og kolonner

Eksempler

TSX
<Table>
  <Table.Header>
    <Table.Row>
      <Table.DataCell>
        <Checkbox
          checked={selectedRows.length === data.length}
          indeterminate={
            selectedRows.length > 0 && selectedRows.length !== data.length
          }
          onChange={() => {
            selectedRows.length
              ? setSelectedRows([])
              : setSelectedRows(data.map(({ fnr }) => fnr));
          }}
          hideLabel
        >
          Velg alle rader
        </Checkbox>
      </Table.DataCell>

      <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} selected={selectedRows.includes(fnr)}>
          <Table.DataCell>
            <Checkbox
              hideLabel
              checked={selectedRows.includes(fnr)}
              onChange={() => toggleSelectedRow(fnr)}
              aria-labelledby={`id-${fnr}`}
            >
              {" "}
            </Checkbox>
          </Table.DataCell>
          <Table.HeaderCell scope="row">
            <span id={`id-${fnr}`}>{name}</span>
          </Table.HeaderCell>
          <Table.DataCell>{fnr}</Table.DataCell>
          <Table.DataCell>{format(new Date(start))}</Table.DataCell>
        </Table.Row>
      );
    })}
  </Table.Body>
</Table>

Retningslinjer

Justering av innhold

Tekst venstrestilles. Kvantitative tall høyrestilles for enklere sammenligning, slik som beløp, alder og antall (men ikke fødselsnummer, postnummer o.l.)

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-API-et betyr det at du som regel skal bruke <Table.HeaderCell> i stedet for <Table.DataCell> i første rad og kolonne. Se kodeeksemplene.

Tilgjengelighet

Skjermlesere presenterer som regel bare én celle av gangen. 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 (<Table.HeaderCell>). 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
ref?: Type:
Ref<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
ref?: Type:
Ref<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"
Description:
Adjusts font-size
className?: Type:
string
ref?: Type:
Ref<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
ref?: Type:
Ref<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.
onRowClick?: Type:
((event: MouseEvent<HTMLTableRowElement, MouseEvent>) => void)
Description:
Click handler for row. This differs from onClick by not being called when clicking on interactive elements within the row (buttons, links, inputs etc).

Warning: This will not be accessible by keyboard! Provide an alternative way to select the row, e.g. a checkbox or a button.
className?: Type:
string
ref?: Type:
Ref<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"
Description:
Adjusts font-size
className?: Type:
string
ref?: Type:
Ref<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"
Description:
Adjusts font-size
className?: Type:
string
ref?: Type:
Ref<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
ref?: Type:
Ref<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

Gammel dokumentasjon for disse finner du på jsDelivr

Table

Egnet til:

Eksempler

Retningslinjer

Justering av innhold

Meny

Overskriftceller

Tilgjengelighet

Caption

Props

Table

size?

zebraStripes?

stickyHeader?

sort?

onSortChange?

className?

ref?

Table.Body

className?

ref?

Table.ColumnHeader

sortKey?

sortable?

scope?

align?

textSize?

className?

ref?

Table.Header

className?

ref?

Table.Row

selected?

shadeOnHover?

onRowClick?

className?

ref?

Table.DataCell

align?

textSize?

className?

ref?

Table.HeaderCell

scope?

align?

textSize?

className?

ref?

Table.ExpandableRow

content

togglePlacement?

open?

defaultOpen?

onOpenChange?

expansionDisabled?

expandOnRowClick?

colSpan?

contentGutter?

selected?

shadeOnHover?

className?

ref?

Tokens

Komponent-tokens ble fjernet i versjon 8