Table

Kildekode på GitHub · Les som Markdown

Table er en strukturert datatabell med konsistent styling for header, body, footer og caption. Ren HTML-semantikk med Tailwind-styling.

Importering

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@kilden/designsystem";

Grunnleggende bruk

<Table>
<TableCaption>Liste over ansatte</TableCaption>
<TableHeader>
  <TableRow>
    <TableHead>Navn</TableHead>
    <TableHead>Rolle</TableHead>
    <TableHead>Avdeling</TableHead>
  </TableRow>
</TableHeader>
<TableBody>
  <TableRow>
    <TableCell>Ola Nordmann</TableCell>
    <TableCell>Utvikler</TableCell>
    <TableCell>Teknologi</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>Kari Nordmann</TableCell>
    <TableCell>Designer</TableCell>
    <TableCell>Design</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>Per Hansen</TableCell>
    <TableCell>Prosjektleder</TableCell>
    <TableCell>Ledelse</TableCell>
  </TableRow>
</TableBody>
</Table>

Med footer

<Table>
<TableHeader>
  <TableRow>
    <TableHead>Produkt</TableHead>
    <TableHead style={{ textAlign: "right" }}>Pris</TableHead>
  </TableRow>
</TableHeader>
<TableBody>
  <TableRow>
    <TableCell>Designsystem-lisens</TableCell>
    <TableCell style={{ textAlign: "right" }}>5 000 kr</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>Konsulentbistand</TableCell>
    <TableCell style={{ textAlign: "right" }}>15 000 kr</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>Opplæring</TableCell>
    <TableCell style={{ textAlign: "right" }}>3 000 kr</TableCell>
  </TableRow>
</TableBody>
<TableFooter>
  <TableRow>
    <TableCell style={{ fontWeight: 600 }}>Totalt</TableCell>
    <TableCell style={{ textAlign: "right", fontWeight: 600 }}>23 000 kr</TableCell>
  </TableRow>
</TableFooter>
</Table>

Med badges

<Table>
<TableHeader>
  <TableRow>
    <TableHead>Oppgave</TableHead>
    <TableHead>Ansvarlig</TableHead>
    <TableHead>Status</TableHead>
  </TableRow>
</TableHeader>
<TableBody>
  <TableRow>
    <TableCell>Implementer Button</TableCell>
    <TableCell>Ola</TableCell>
    <TableCell><Badge variant="success">Ferdig</Badge></TableCell>
  </TableRow>
  <TableRow>
    <TableCell>Design tokens</TableCell>
    <TableCell>Kari</TableCell>
    <TableCell><Badge variant="warning">Pågår</Badge></TableCell>
  </TableRow>
  <TableRow>
    <TableCell>Dokumentasjon</TableCell>
    <TableCell>Per</TableCell>
    <TableCell><Badge variant="outline">Planlagt</Badge></TableCell>
  </TableRow>
</TableBody>
</Table>

Bruksanbefalinger

Navn | Rolle | Status

Bruk for strukturert data

Table egner seg for data med tydelige kolonner — som lister, priser, statuser eller sammenligninger.

<Table> brukt til å plassere navigasjon og innhold side om side

Ikke bruk for layout

Tabeller er for data, ikke layout. Bruk CSS Grid eller Flexbox for visuell plassering av elementer.

Tilgjengelighet

Bruker semantisk HTML (<table>, <thead>, <tbody>, <th>, <td>)
TableCaption gir en beskrivelse av tabellen for skjermlesere
TableHead (<th>) gir kontekst til dataceller i samme kolonne
Wrapper med overflow-auto for horisontal scrolling på smale skjermer

Props

Alle komponenter arver standard HTML-attributter for sine respektive elementer:

Komponent	HTML-element	Beskrivelse
`Table`	`<table>`	Rot-tabellen med scroll-wrapper
`TableHeader`	`<thead>`	Header-seksjon
`TableBody`	`<tbody>`	Body-seksjon
`TableFooter`	`<tfoot>`	Footer-seksjon
`TableRow`	`<tr>`	Tabellrad med hover-effekt
`TableHead`	`<th>`	Header-celle
`TableCell`	`<td>`	Data-celle
`TableCaption`	`<caption>`	Tabellbeskrivelse