README
@fremtind/jkl-table-react
Beskrivelse
Se portalen for bruk og prinsipper.
Kom i gang
Lær hvordan du kan ta i bruk Jøkul
Bruk av React-komponenten
Se gjerne bloggposten om tabellkomponentene
Installasjon
- Installér pakken med
yarn add @fremtind/jkl-table-react
ellernpm i @fremtind/jkl-table-react
. Stil-pakken blir automatisk installert som en avhengighet. - Importér både React-pakken og stil-pakken i prosjektet ditt:
Datatabeller
import { DataTable } from "@fremtind/jkl-table-react";
import "@fremtind/jkl-table/table.min.css";
Den enkleste tabellen benyttes som en tom komponent, som tar inn kolonner og rader som props. Kolonnene (columns
) er et array av string
-verdier, mens radene (rows
) er et array av string
-arrayer:
const cols = ["Dato", "Saksnummer", "Kundenummer"]
const rows = [
["24.02.2020", "20-1234567", "010203 99887"],
["13.04.2019", "20-8382811", "010203 99887"]
]
<DataTable columns={cols} rows={rows} caption="Saksliste" />
Større fleksibilitet
Jøkul tilbyr enkeltkomponenter tilsvarende de du kjenner fra HTML. Hvert tabell-element har sin egen Jøkul-motpart du kan ta i bruk:
HTML | Jøkul |
---|---|
<table />
|
<Table />
|
<thead />
|
<TableHead />
|
<tbody />
|
<TableBody />
|
<tfoot />
|
<TableFooter />
|
<tr />
|
<TableRow />
|
<th />
|
<TableHeader />
|
<td />
|
<TableCell />
|
<caption />
|
<TableCaption />
|
<colgroup />
|
<TableColumnGroup />
|
<col />
|
<TableColumn />
|
Kompakt
Sett <Table compact={true}>
, så sørger en intern React context for å sende compact
-variabelen dit den skal. Du slipper med andre ord sette <TableCell compact={true}>
og så videre i tillegg. Du kan velge å overstyre dette selv på komponentnivå for å få ønsket størrelse.
Klikkbare rader
<TableRow clickable={{ onClick, markClickedRows }}>{/* X antall TableCells */}</TableRow>
Se for øvrig eksempelet på Table | Jøkul.