Jøkul Table

Jøkul · Komponenter

Pakke: @fremtind/jokul

Table i Jøkul er en sammensatt komponent med tydelige deler: caption, head, headerceller, rader og dataceller.

Siden komponenten ofte brukes med store datamengder og på små skjermer, må docs vise både delene, de gyldige komposisjonene og de viktigste responsivitetshensynene.

Eksemplet under bruker ekte Jøkul-klasser og CSS fra monopakka `@fremtind/jokul`.

Eksempel

Props

Density

Full width

Collapse to list

Caption skjult

Beløp-justering

density="comfortable" · fullWidth=false · collapseToList=false · captionSrOnly=false · amountAlign="right"

Bestillinger fra denne uka
Kunde	Status	Beløp
Anna Olsen	Sendt	12 500 kr
Jonas Nilsen	Under behandling	4 200 kr
Mina Berg	Klar	980 kr

Kode

React · tsx

import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/table/table.min.css";
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@fremtind/jokul/table";

export function Example() {
    return (
        <div data-density="comfortable">
            <Table
                caption={
                <TableCaption>Bestillinger fra denne uka</TableCaption>
                }
            >
                <TableHead>
                    <TableRow>
                        <TableHeader>Kunde</TableHeader>
                        <TableHeader>Status</TableHeader>
                        <TableHeader align="right">Beløp</TableHeader>
                    </TableRow>
                </TableHead>
                <TableBody>
                    <TableRow>
                        <TableCell data-th="Kunde">Anna Olsen</TableCell>
                        <TableCell data-th="Status">Sendt</TableCell>
                        <TableCell data-th="Beløp" align="right">12 500 kr</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell data-th="Kunde">Jonas Nilsen</TableCell>
                        <TableCell data-th="Status">Under behandling</TableCell>
                        <TableCell data-th="Beløp" align="right">4 200 kr</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell data-th="Kunde">Mina Berg</TableCell>
                        <TableCell data-th="Status">Klar</TableCell>
                        <TableCell data-th="Beløp" align="right">980 kr</TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </div>
    );
}

Props

Disse prop-tabellene gjelder rotelementet Table.

Jøkul-props

Tverrgående Jøkul-kontekst som påvirker tabellens rytme og tetthet.

Prop	Type	Standard	Beskrivelse
layoutDensity	"comfortable" \| "compact"	"comfortable"	Tettheten arves fra layoutkonteksten og påvirker padding i både headers og celler.

React-props

Props på `Table` som styrer overordnet bredde og responsiv nedbrytning.

Prop	Type	Standard	Beskrivelse
caption	ReactNode	påkrevd	Navngir tabellen semantisk og bør beskrive hva datasettet faktisk inneholder.
children	ReactNode	påkrevd	Innholdet i tabellen, vanligvis satt sammen av TableHead, TableBody, TableRow og celler.
fullWidth	boolean	false	Setter `jkl-table--full-width` slik at tabellen fyller hele den tilgjengelige bredden.
collapseToList	boolean	false	Bryter ned tabellen til listevisning på små skjermer. Da må hver celle ha `data-th`.

Delkomponenter

TableCaption

API: TableCaption · Selektor: caption, .jkl-table-caption

Navngir tabellen og kan skjules visuelt uten å miste den semantiske captionen.

Relaterte deler: Caption

Brukes i komposisjonene: Standard tabell , Collapse to list , Sticky head

React-props

Props på `TableCaption` som styrer synlighet og innhold.

Prop	Type	Standard	Beskrivelse
srOnly	boolean	false	Skjuler caption visuelt når tabellen allerede er tydelig navngitt av omgivelsene.
children	ReactNode	påkrevd	Caption-innholdet som navngir datasettet for både synlige brukere og skjermlesere.

TableHead

API: TableHead · Selektor: thead, .jkl-table-head

Omslutter header-raden og styrer om headeren skal være sticky i scrollede tabeller.

Relaterte deler: Head section

Brukes i komposisjonene: Sticky head

React-props

Props på `TableHead` som styrer headeroppførsel.

Prop	Type	Standard	Beskrivelse
srOnly	boolean	false	Skjuler headerseksjonen visuelt når konteksten allerede gjør kolonneetikettene tydelige, men beholder dem for hjelpemidler.
sticky	boolean	false	Holder header-raden synlig når brukeren blar i lange tabeller.

TableHeader

API: TableHeader · Selektor: th, .jkl-table-header

Representerer hver headercelle og eier både semantikk og justering for kolonnene.

Relaterte deler: Header cell

Brukes i komposisjonene: Standard tabell , Collapse to list , Sticky head

React-props

Props på `TableHeader` som påvirker presentasjonen av kolonneheaderen.

Prop	Type	Standard	Beskrivelse
bold	boolean	false	Brukes når headeren trenger ekstra vekt, for eksempel i mer kompakte eller tette tabelloppsett.
align	"left" \| "center" \| "right"	"left"	Justerer headerinnholdet. Bruk samme verdi som i tilhørende `TableCell` for tallkolonner.

Native HTML-props

Native `th`-attributter som gjør headeren forståelig for hjelpemidler.

Prop	Type	Standard	Beskrivelse
srOnly	boolean	false	Skjuler headerinnholdet visuelt, men beholder det for skjermlesere når kolonneetiketten ellers vises i omgivelsene.
scope	"col" \| "row"	"col"	Headerceller bør sette `scope` korrekt slik at sammenhengen mellom header og celle blir tydelig.
sortable	TableSortProps	ingen sortering	Aktiverer sorteringskontrakten når headeren også skal styre rekkefølgen i datasettet.

TableCell

API: TableCell · Selektor: td, .jkl-table-cell

Vanlige dataceller som må kunne speile både justering og mobil etikettering fra kolonnene.

Relaterte deler: Data cell

Brukes i komposisjonene: Standard tabell , Collapse to list , Sticky head

React-props

Props på `TableCell` som påvirker layout og lesbarhet i kolonnene.

Prop	Type	Standard	Beskrivelse
align	"left" \| "center" \| "right"	"left"	Justerer celleinnholdet. Beløp og andre tallkolonner bør vanligvis høyrejusteres.
verticalAlign	"center" \| "top"	"top"	Lar celleinnholdet topp- eller midtstilles avhengig av om raden hovedsakelig består av tekst eller kontroller.

Native HTML-props

Native `td`-attributter og datasettkontrakter som trengs for responsiv listevisning.

Prop	Type	Standard	Beskrivelse
data-th	string	påkrevd når `collapseToList` er aktiv	Mobil listevisning trenger `data-th` på hver celle for å vise hvilken kolonne verdien tilhører.

Komposisjoner

Standard tabell

Grunnkomposisjonen for vanlige datasett med caption, header-rad og semantiske celler.

Påkrevde deler: Table root , Caption , Head section , Header cell , Body row , Data cell

Bestillinger fra denne uka
Kunde	Status	Beløp
Anna Olsen	Sendt	12 500 kr

Kode

CSS-importer · ts

import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/table/table.min.css";

Collapse to list

Brukes når tabellen må kunne brytes ned til listevisning på små skjermer uten å miste kolonneetikettene.

Påkrevde deler: Table root , Caption , Head section , Header cell , Body row , Data cell

Bestillinger fra denne uka
Kunde	Status	Beløp
Anna Olsen	Sendt	12 500 kr

Kode

CSS-importer · ts

import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/table/table.min.css";

Sticky head

Passer for lengre tabeller der brukeren ellers mister oversikten over kolonnene under scrolling.

Påkrevde deler: Table root , Caption , Head section , Header cell , Body row , Data cell

Bestillinger fra denne uka
Kunde	Status	Beløp
Anna Olsen	Sendt	12 500 kr
Jonas Nilsen	Under behandling	4 200 kr

Kode

CSS-importer · ts

import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/table/table.min.css";

Anatomi

Del	Selektor	Forelder	Kreves	Gjentas	Beskrivelse
Table root	`.jkl-table`	Ingen	Ja	Nei	Rotelementet som samler tabellens layout, breddevalg og responsiv listevisning.
Caption	`caption`	Table root	Ja	Nei	Navngir datasettet semantisk. Kan skjules visuelt med `jkl-table-caption--sr-only`.
Head section	`.jkl-table-head`	Table root	Ja	Nei	Omslutter header-raden og kan gjøres sticky for lange tabeller.
Header cell	`.jkl-table-header`	Head section	Ja	Ja	Kolonne- eller radheader med align- og sticky-relatert oppførsel.
Body row	`.jkl-table-row`	Table root	Ja	Ja	Gjentas for hver datarad og bærer hover-, klikk- og ekspanderingsstiler.
Data cell	`.jkl-table-cell`	Body row	Ja	Ja	Vanlige dataceller. Når tabellen kan brytes ned til listevisning må de også ha `data-th`.

Når du skal bruke Table

Bruk Table når brukeren trenger å skanne og sammenligne verdier på tvers av rader og kolonner.

Hvis innholdet egentlig er en liste med få felter eller en enkel oppsummering, er det ofte bedre å bruke kort, liste eller beskrivelsesliste i stedet.

Gi tabellen en tydelig caption som beskriver hva datasettet inneholder.
Hold samme type data i samme kolonne gjennom hele tabellen.
Tenk gjennom hvordan tabellen skal fungere på små skjermer før du legger til mange kolonner.

Tilgjengelighet

Semantisk tabellmarkup er avgjørende for at skjermlesere skal kunne lese sammenhengen mellom header og celle riktig.

Når tabellen kan brytes ned til listevisning må hver datacelle fortsatt fortelle hvilken kolonne den tilhører.

Bruk riktige `scope`-verdier på headerceller.
Legg til `data-th` på hver celle når du bruker `collapseToList`.
Skjul ikke caption visuelt uten at tabellen er tydelig navngitt et annet sted i konteksten.

Komponentprofil

Klient-JS: Ingen
Hydrering: Ingen
Ikoner: Ingen
Dekket API-props: 11
Playground-kontroller: 5
Delkomponenter: 4
Anatomideler: 6
Komposisjoner: 3
Utfasete props: 0

Stiler

@fremtind/jokul/styles/core/core.css
@fremtind/jokul/styles/components/table/table.min.css

Ikonkontrakt

Bruk: Ingen

Komponenten krever ingen egen ikonkontrakt i grunnoppsettet.

Propkontrakt

Dekning: Komplett

Scope: Pakkens offentlige props, uten generiske DOM-props

Table · TableProps · @fremtind/jokul/table · 4 props
TableCaption · TableCaptionProps · @fremtind/jokul/table · 1 props
TableHead · TableHeadProps · @fremtind/jokul/table · 2 props
TableHeader · TableHeaderProps · @fremtind/jokul/table · 5 props
TableCell · TableCellProps · @fremtind/jokul/table · 2 props

Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

Tilgjengelighet

Tastatur: Bruker native tabellsemantikk; tastaturnavigasjon skjer via eventuelle interaktive elementer inni cellene.

Semantikk som kreves

Tabellen trenger en meningsfull caption.
Headerceller må bruke riktig scope.
Når collapseToList brukes, trenger hver datacelle data-th.

Automatiserte kontroller

Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

Manuelle kontroller

Bekreft at tabellen fortsatt kan skannes på små skjermer.
Bekreft at caption fortsatt gir mening i konteksten, også når den skjules visuelt.
Bekreft at sticky head ikke skjuler innhold eller viktige filterkontroller.

Ytelse

Standardtabellen i docs krever ikke klient-JS eller hydrering.
Store datasett bør pagineres eller virtualiseres utenfor basekomponenten.

Relatert

Spacing : Spacing-tokenene påvirker rytmen mellom celler, tabellseksjoner og omkringliggende filtre.
Skeleton loader : Bruk skeleton loader når tabellstrukturen er kjent, men dataene lastes inn.
Installer Jøkul : Monopakka og komponentstilene må være på plass før tabellen vises riktig.