Komponenter

Table

Table brukes for å vise strukturert informasjon på en ryddig og oversiktlig måte. Tabeller kan gjøre det enklere for brukerne å skanne og sammenligne informasjon.

Oversikt Kode Tilgjengelighet

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Preview = () => {
  return (
    <Table>
      <caption>Table caption</caption>
      <Table.Head>
        <Table.Row>
          <Table.HeaderCell>Header 1</Table.HeaderCell>
          <Table.HeaderCell>Header 2</Table.HeaderCell>
          <Table.HeaderCell>Header 3</Table.HeaderCell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Cell 1</Table.Cell>
          <Table.Cell>Cell 2</Table.Cell>
          <Table.Cell>Cell 3</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cell 4</Table.Cell>
          <Table.Cell>Cell 5</Table.Cell>
          <Table.Cell>Cell 6</Table.Cell>
        </Table.Row>
      </Table.Body>
      <Table.Foot>
        <Table.Row>
          <Table.HeaderCell>Footer 1</Table.HeaderCell>
          <Table.HeaderCell>Footer 2</Table.HeaderCell>
          <Table.HeaderCell>Footer 3</Table.HeaderCell>
        </Table.Row>
      </Table.Foot>
    </Table>
  );
};

render(<Preview />)

Bruk

Det anbefales å lese om <table> på MDN (mozilla.org) for en grundig gjennomgang av HTML-tabeller og deres semantikk.

Klassenavnet ds-table legges på <table>-elementet.

Ved å legge <button> i en <th> med aria-sort="*" får du en visuell knapp for sortering. Du kobler selv logikken for sortering på knappen. Legg på type="button" for å unngå at knappen oppfører seg som en submit-knapp.

Du kan legge på data-clickdelegatefor på en <tr> for å delegere klikkhendelser til et element i raden, for eksempel en <a>-tag.

Bruk data-border="true" for å legge til en synlig kant rundt tabellen.

CSS variabler og data-attributter

Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.

CSS-variabler
Navn	Verdi
--dsc-table-background--hover	var(--ds-color-surface-hover)
--dsc-table-background--zebra	var(--ds-color-surface-tinted)
--dsc-table-background	transparent
--dsc-table-border-color	var(--ds-color-border-subtle)
--dsc-table-border-radius	var(--ds-border-radius-md)
--dsc-table-border-style	solid
--dsc-table-border-width	var(--ds-border-width-default)
--dsc-table-color	var(--ds-color-text-default)
--dsc-table-divider-border-color	var(--dsc-table-border-color)
--dsc-table-divider-border-style	solid
--dsc-table-divider-border-width	calc(var(--ds-border-width-default) + 1px)
--dsc-table-header-background--hover	var(--ds-color-surface-hover)
--dsc-table-header-background--sorted	var(--ds-color-surface-tinted)
--dsc-table-header-background--sticky	var(--ds-color-surface-default)
--dsc-table-header-background	transparent
--dsc-table-padding	var(--ds-size-2) var(--ds-size-3)
--dsc-table-sort-size	var(--ds-size-6)

Data-attributter
Navn	Verdi
data-border
data-sticky-header
data-zebra
data-hover

Eksempel

Sortering

Du kan bruke props på Table.HeaderCell for å vise at tabellen kan sorteres etter innholdet i en kolonne.

Bruk sort-prop'en for å indikere sorteringsretningen:
- "none" - ingen sortering
- "ascending" - stigende rekkefølge
- "descending" - synkende rekkefølge
Bruk onClick for å håndtere hva som skal skje når brukeren klikker på kolonneoverskriften.

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Sortable = () => {
  const dummyData = [
    {
      id: 1,
      navn: 'Lise Nordmann',
      epost: 'lise@nordmann.no',
      telefon: '22345678',
    },
    {
      id: 2,
      navn: 'Kari Nordmann',
      epost: 'kari@nordmann.no',
      telefon: '87654321',
    },
    {
      id: 3,
      navn: 'Ola Nordmann',
      epost: 'ola@nordmann.no',
      telefon: '32345678',
    },
    {
      id: 4,
      navn: 'Per Nordmann',
      epost: 'per@nordmann.no',
      telefon: '12345678',
    },
  ];

  const [sortField, setSortField] = useState<
    keyof (typeof dummyData)[0] | null
  >(null);
  const [sortDirection, setSortDirection] =
    useState<TableHeaderCellProps['sort']>(undefined);

  const handleSort = (field: keyof (typeof dummyData)[0]) => {
    if (sortField === field && sortDirection === 'descending') {
      setSortField(null);
      setSortDirection(undefined);
    } else {
      setSortField(field);
      setSortDirection(
        sortField === field && sortDirection === 'ascending'
          ? 'descending'
          : 'ascending',
      );
    }
  };

  const sortedData = [...dummyData].sort((a, b) => {
    if (sortField === null) return 0;
    if (a[sortField] < b[sortField])
      return sortDirection === 'ascending' ? -1 : 1;
    if (a[sortField] > b[sortField])
      return sortDirection === 'ascending' ? 1 : -1;
    return 0;
  });

  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.HeaderCell
            sort={sortField === 'navn' ? sortDirection : 'none'}
            onClick={() => handleSort('navn')}
          >
            Navn
          </Table.HeaderCell>
          <Table.HeaderCell>Epost</Table.HeaderCell>
          <Table.HeaderCell
            sort={sortField === 'telefon' ? sortDirection : 'none'}
            onClick={() => handleSort('telefon')}
          >
            Telefon
          </Table.HeaderCell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        {sortedData.map((row) => (
          <Table.Row key={row.id}>
            <Table.Cell>{row.navn}</Table.Cell>
            <Table.Cell>{row.epost}</Table.Cell>
            <Table.Cell>{row.telefon}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
};

render(<Sortable />)

Fast kolonnebredde

Du kan bruke table-layout: fixed for å hindre at kolonnebreddene endrer seg når innholdet i tabellen oppdateres. Dette gir jevnere layout, og hjelper nettleseren med å tegne tabellen raskere.

Det er spesielt nyttig i tabeller med paginering eller annen dynamisk oppdatering av innhold, der stabil kolonnebredde gir bedre brukeropplevelse.

Klikkbar rad

React

import { Table } from "@digdir/designsystemet-react";
<Table>  <Table.Head>    <Table.Row>      <Table.HeaderCell>Header</Table.HeaderCell>    </Table.Row>  </Table.Head>  <Table.Body>    <Table.Row>      <Table.Cell>Cell</Table.Cell>    </Table.Row>  </Table.Body></Table>;

zebra
Description: Will give the table zebra striping
Type: boolean
Default: false

stickyHeader
Description: Will make the table header sticky
Type: boolean
Default: false

border
Description: Will give the table a rounded border
Type: boolean
Default: false

hover
Description: Will give the table a hover effect on rows
Type: boolean
Default: false

Name	Type	Default	Description
zebra	`boolean`	false	Will give the table zebra striping
stickyHeader	`boolean`	false	Will make the table header sticky
border	`boolean`	false	Will give the table a rounded border
hover	`boolean`	false	Will give the table a hover effect on rows

TableHeaderCell

sort
Description: If 'none' | 'ascending' | 'descending' | 'other' will add a button to the header cell and change aria-sort and icon
Type: "none" | "ascending" | "descending" | "other"
Default: undefined

Name	Type	Default	Description
sort	`"none" \| "ascending" \| "descending" \| "other"`	undefined	If 'none' \| 'ascending' \| 'descending' \| 'other' will add a button to the header cell and change aria-sort and icon

Rediger denne siden på github.com (åpnes i ny fane)