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

Bruk Table når

målet er å gjøre det enkelt for brukerne å sammenligne informasjon
data trenger en tydelig struktur i rader og kolonner
innholdet består av informasjon som kan sorteres

Unngå Table når

formålet er å lage layout eller organisere innhold visuelt på en side
informasjonen passer bedre i liste- eller kortvisning
innholdet er svært begrenset, for eksempel bare én kolonne eller få datapunkter uten behov for sammenligning
tabellen blir vanskelig å lese på mobil fordi datamengden er stor

Eksempel

Zebra striper

Med border

Bruk border for å legge til en synlig kant rundt tabellen. Dette kan hjelpe brukerne med å skille tabellen fra annet innhold på siden, og gir en mer strukturert visning av dataene.

Sortering

Du kan vise at tabellen kan sorteres etter innholdet i en kolonne.

Du kan sortere i 3 retninger:
- "none" - ingen sortering
- "ascending" - stigende rekkefølge
- "descending" - synkende rekkefølge

Dette gir brukeren visuell tilbakemelding på sorteringsstatus og gjør det mulig å implementere egendefinert sorteringslogikk.

React

Trykk Enter for å redigere

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

Fast bredde på kolonner er spesielt nyttig i tabeller med paginering eller annen dynamisk oppdatering av innhold, der stabil kolonnebredde gir bedre brukeropplevelse.

Tall i en tabell

Når det er tall i en tabell som skal sammenlignes, plasser tallene til høyre i tabellfeltet.

Retningslinjer

Bruk Table når du skal organisere og vise data strukturert i rader og kolonner.

Innhold i tabeller bør være venstrejustert, med unntak av tall, som bør høyrejusteres for å gjøre det lettere å sammenligne tallverdier.
Bruk <Table.HeaderCell> i overskriftceller, ikke <Table.Cell>. En celle regnes som en overskrift dersom den beskriver innholdet i samme rad eller kolonne.
For å spare plass i tabellrader med flere handlinger, kan du bruke en meny dersom handlingene ikke må være synlige hele tiden.

Tekst

Unngå lange tekster i tabellceller. Hold innholdet kort og presist, slik at det er lett å skanne på tvers av rader og kolonner. Hvis du trenger å vise mer informasjon, kan du vurdere å lenke til en detaljside. Bruk overskrifter til å fortelle brukerne hva slags innhold de finner i radene og kolonnene.

Som hovedregel skal innhold i celler være venstrejustert, slik at det blir lettere å lese og skanne informasjon. Unntaket er tall og valuta, og noen ganger skjemaelementer og knapper.

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