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
Eksempler
Standardstørrelsen 'medium' brukes både på eksterne og interne flater.
Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
Rader kan utvides for å vise ekstra informasjon. Man kan velge om knappen for å utvide/lukke vises i starten eller enden av raden.
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
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.
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
HTML
Det er svært viktig at du koder tabeller riktig slik at innholdet blir forståelig og tilgjengelig også for personer som bruker hjelpemidler.
Dette innebærer at du må sørge for at:
- Innhold som fungerer som rad- og kolonneoverskrifter kodes som overskrifter.
- Overskriftceller ikke er tomme, unntatt for kolonner som kun inneholder interaktive elementer.
- Knapper, avkryssingsbokser og nedtrekkslister har en tilgjengelig ledetekst.
- Det kun er én komponent per celle.
Props
Table
- size?"large" | "medium" | "small"
- Changes padding around Cells
- zebraStripes?boolean
- Zebra striped table
- sort? SortState
- Sort state
- onSortChange? ((sortKey?: string) => void)
- Callback whens sort state changes
- className? string
- ref? Ref<HTMLTableElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table extends HTMLTableElement
Table.Body
- className? string
- ref? Ref<HTMLTableSectionElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.Body extends HTMLTableSectionElement
Table.ColumnHeader
- sortKey? string
- Key to sort by
- sortable?boolean
- Column is sortable, adds indicators to show sorting
- scope? string
- align?"left" | "center" | "right"
- Content alignment inside cell
- className? string
- ref? Ref<HTMLTableCellElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.ColumnHeader extends HTMLTableCellElement
Table.Header
- className? string
- ref? Ref<HTMLTableSectionElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.Header extends HTMLTableSectionElement
Table.Row
- selected?boolean
- Row is selected
- shadeOnHover?boolean
- Shade the table row on hover.
- className? string
- ref? Ref<HTMLTableRowElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.Row extends HTMLTableRowElement
Table.DataCell
- align?"left" | "center" | "right"
- Content alignment inside cell
- className? string
- ref? Ref<HTMLTableCellElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.DataCell extends HTMLTableCellElement
Table.HeaderCell
- scope? string
- align?"left" | "center" | "right"
- Content alignment inside cell
- className? string
- ref? Ref<HTMLTableCellElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.HeaderCell extends HTMLTableCellElement
Table.ExpandableRow
- content ReactNode
- Content of the expanded row
- togglePlacement?"left" | "right"
- Placement of toggle button
- open? boolean
- Opens component if 'true', closes if 'false' Using this props removes automatic control of open-state
- defaultOpen?boolean
- Opened state default
- onOpenChange? ((open: boolean) => void)
- Change handler for open
- expansionDisabled?boolean
- Disable expansion. shadeOnHover will not be visible.
- expandOnRowClick?boolean
- Makes the whole row clickable
- colSpan?number
- The width of the expanded row's internal cell
- selected?boolean
- Row is selected
- shadeOnHover?boolean
- Shade the table row on hover.
- className? string
- ref? Ref<HTMLTableRowElement>
- 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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Table.ExpandableRow extends HTMLTableRowElement