Gå til hovedinnhold
KOMPONENTER

Tabeller

Tabeller brukes for å vise frem strukturert data

FraAvgangTilAnkomst
Majorstua10.00Østerås10.28
Majorstua11.00Østerås11.28
Majorstua12.00Østerås12.28

Komponenter

En tabell settes sammen av flere forskjellige komponenter. Rekkefølgen er viktig her, så følg nøye med om du ikke har brukt denne pakken før:

Table

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

compactboolean false

Lager en mer kompakt tabell. Typisk for sider med høy informasjonstetthet

fixedboolean false

Setter kolonne-layout til å være uavhengig av innhold

childrenReactNode

Innholdet i tabellen

<Table /> er grunnkomponenten til en tabell. Den wrapper man rundt en eller flere seksjonskomponenter (se <TableHead />, <TableBody /> og <TableFooter />), for å lage en tabell. Du kan også sende inn en <caption /> for å gi en tittel til tabellen din. <caption /> må i så fall være første barneelement.

Du kan spesifisere fixed-propen for å ha like kolonnestørrelser.

Om du ønsker en mer kompakt tabell, så kan du spesifisere compact-propen.

TableHead, TableBody og TableFooter

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Kolonneoverskrifter

<TableHead />, <TableBody /> og <TableFooter /> er såkalte seksjonskomponenter, og brukes for å dele inn innholdet i tabellen din. <TableHead /> inneholder overskriftene, <TableBody /> inneholder selve den tabulære dataen, og <TableFooter /> inneholder raden eller radene som oppsummerer de andre radene.

TableRow

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Tabellceller

classNamestring

Ekstra klassenavn

<TableRow /> er en rad i tabellen, og inneholder enten <HeaderCell />- eller <DataCell />-komponenter.

HeaderCell og DataCell

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Kolonneoverskrift

classNamestring

Ekstra klassenavn

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Innholdet i tabellcellen

classNamestring

Ekstra klassenavn

<HeaderCell /> brukes som kolonneoverskrifter, og skal plasseres inni en <TableRow /> inni en <TableHead />. Gi et godt og oppsummerende navn.

Det er ikke støtte for å ha rad-overskrifter, altså overskrifter til venstre for en rad.

<DataCell />-komponentene inneholder den tabulære dataen, og "cellen" i regnearket. Disse plasseres inni en <TableRow /> inni en <TableBody /> eller en <TableFooter />.