Hopp til innhold

Tabeller i 2021

William Killerud

2021.10.25

Under en avstemming på GitHub tidligere i høst ble det tydelig at tabellene i Jøkul trengte litt kjærleik. Første versjon av de nye tabellene er laget, og her er hvordan du kan bruke dem.

Mye større fleksibilitet

Det vi raskt oppdaget var at tabellkomponenten i Jøkul ikke lett lot seg tilpasse til de mange ulike behovene der ute. Det håper vi de nye komponentene kan rette opp i.

Nytt fra i dag er at Jøkul tilbyr enkeltkomponenter tilsvarende de du finner i HTML. Hvert tabell-element har sin egen Jøkul-motpart du kan ta i bruk:

HTMLJøkul
<table /><Table />
<thead /><TableHead />
<tbody /><TableBody />
<tfoot /><TableFooter />
<tr /><TableRow />
<th /><TableHeader />
<td /><TableCell />
<caption /><TableCaption />
<colgroup /><TableColumnGroup />
<col /><TableColumn />

Merk at ikke alle elementene har noen eksplisitt CSS fra Jøkul i dag, men vi anbefaler å bruke Jøkul-komponentene framfor HTML for å være sikret å få med riktig styling om det skulle komme senere. Det å unngå blanding i koden gir også bedre aesthetics 😉 💅

Eksempler på bruk

Gjennom intervjuer og demoer fikk vi se flere av behovene til Jøkul-brukere som vi var nødt til å støtte. Vi har samlet dokumentasjon på flere typer tabeller i tillegg til den vanlige datatabellen:

  • Rader med knapper
  • Klikkbare rader
  • Responsive tabeller i to varianter

Les igjennom dokumentasjonen for tabellkomponentene for å se hvordan du kan lage disse tabellene.

Migrering til nye komponenter

Om du er en av de som brukte den gamle tabellen fra Jøkul har vi fremdeles en variant som fungerer omtrent likt.

Saksliste
DatoKundenavnMilepælFølger saken
24.02.2020Ola NordmannOpprettetSiri Saksbehandler
13.04.2019Kari NordkvinneOpprettetSiri Saksbehandler
31.07.2017Kari NordkvinneOpprettetPer Persen

Vi har fjernet muligheten for å merke rader som klikkbare i denne komponenten. Om du trenger det kan du se på eksempler på bruk for de nye komponentene.

Hva trenger du?

Er det en variant vi har glemt? Er det noe du savner fra dokumentasjonen? Fortsett gjerne tabelldiskusjonen på GitHub og fortell oss mer om hva du trenger.