Komponenter
Table
Tabeller brukes til å organisere og vise data på en strukturert måte.
Egnet til:
- Vise data i rader og kolonner
Eksempler
<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
tonull
(or call the ref withnull
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
tonull
(or call the ref withnull
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
tonull
(or call the ref withnull
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
tonull
(or call the ref withnull
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
tonull
(or call the ref withnull
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
tonull
(or call the ref withnull
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
tonull
(or call the ref withnull
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
tonull
(or call the ref withnull
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 |