@fremtind/jkl-table-react

Jøkul react table components

Usage no npm install needed!

<script type="module">
  import fremtindJklTableReact from 'https://cdn.skypack.dev/@fremtind/jkl-table-react';
</script>

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

  1. Installér pakken med yarn add @fremtind/jkl-table-react eller npm i @fremtind/jkl-table-react. Stil-pakken blir automatisk installert som en avhengighet.
  2. 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.