Aksel

Meny

Table

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

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

Egnet til:

  • Vise data i rader og kolonner

Har du innspill til komponenten?

Send forslag

Eksempler

Medium er standardstørrelsen på både 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

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

SandboxSandbox
Åpne eksempel i nytt vindu

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:

zebraStripes?

  • Type:
    boolean
  • Default:
    false
  • Description:

stickyHeader?

  • Type:
    boolean
  • Default:
    false
  • Description:

sort?

  • Type:
    SortState
  • Description:

onSortChange?

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

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLTableElement>
  • Description:

Table.Body

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLTableCellElement>
  • Description:

Table.Header

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLTableSectionElement>
  • Description:

Table.Row

selected?

  • Type:
    boolean
  • Default:
    false
  • Description:

shadeOnHover?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLTableRowElement>
  • Description:

Table.DataCell

align?

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

textSize?

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

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

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

data-color?

  • Type:
    (string & {}) | AkselColor

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:

contentGutter?

  • Type:
    "left" | "right" | "none"
  • Default:
    Same as `togglePlacement`
  • Description:

selected?

  • Type:
    boolean
  • Default:
    false
  • Description:

shadeOnHover?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

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.

Relaterte komponenter