Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

Table

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

StabilOppdatert 23. juni 2025
Github FigmaEndringslogg

Egnet til:

  • Vise data i rader og kolonner

Eksempler

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.

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

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. Les mer om det nye themingsystemet.

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