Aksel

Meny

Komponenter / Core

Table

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

Tabeller brukes til å organisere og vise data på en strukturert 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

Har du innspill til komponenten?

Send forslag

Eksempler

Standardstørrelsen 'medium' brukes både på eksterne og interne flater.

SandboxSandbox
Åpne eksempel i nytt vindu

Retningslinjer

Justering av innhold

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

SandboxSandbox
Åpne eksempel i nytt vindu

Meny

Vurder å bruke meny som plassbesparende tiltak. De egner seg om det er flere handlinger i en tabellrad som ikke er viktig å ha fremme hele tiden.

SandboxSandbox
Åpne eksempel i nytt vindu

Overskriftceller

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 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-tag). 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.

Props

Table

size?

  • Type:
    "medium" | "small" | "large"
  • Default:
    "medium"
  • Description:

zebraStripes?

  • Type:
    boolean
  • Default:
    false
  • Description:

sort?

  • Type:
    SortState
  • Description:

onSortChange?

  • Type:
    ((sortKey: string) => void)
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLTableElement>
  • Description:

Table.Body

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLTableSectionElement>
  • Description:

Table.ColumnHeader

sortKey?

  • Type:
    string
  • Description:

sortable?

  • Type:
    boolean
  • Default:
    false
  • Description:

scope?

  • Type:
    string

align?

  • Type:
    "left" | "center" | "right"
  • Default:
    "left"
  • Description:

textSize?

  • Type:
    "medium" | "small"
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLTableCellElement>
  • Description:

Table.Header

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLTableSectionElement>
  • Description:

Table.Row

selected?

  • Type:
    boolean
  • Default:
    false
  • Description:

shadeOnHover?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLTableRowElement>
  • Description:

Table.DataCell

align?

  • Type:
    "left" | "center" | "right"
  • Default:
    "left"
  • Description:

textSize?

  • Type:
    "medium" | "small"
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLTableCellElement>
  • Description:

Table.HeaderCell

scope?

  • Type:
    string

align?

  • Type:
    "left" | "center" | "right"
  • Default:
    "left"
  • Description:

textSize?

  • Type:
    "medium" | "small"
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLTableCellElement>
  • Description:

Table.ExpandableRow

content

  • Type:
    ReactNode
  • Description:

togglePlacement?

  • Type:
    "left" | "right"
  • Default:
    left
  • Description:

open?

  • Type:
    boolean
  • Description:

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

onOpenChange?

  • Type:
    ((open: boolean) => void)
  • Description:

expansionDisabled?

  • Type:
    boolean
  • Default:
    false
  • Description:

expandOnRowClick?

  • Type:
    boolean
  • Default:
    false
  • Description:

colSpan?

  • Type:
    number
  • Default:
    999
  • Description:

selected?

  • Type:
    boolean
  • Default:
    false
  • Description:

shadeOnHover?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLTableRowElement>
  • Description:

Tokens

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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.