Gå til hovedinnhold
KOMPONENTER

Table

npmv4.5.18

Tabeller brukes for å vise frem strukturert data

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

Denne komponenten har ingen props

<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 middle-propen.

TableHead, TableBody og TableFooter

NavnTypePåkrevd?Beskrivelse
classNamestring

Esktra klassenavn

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?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

hoverboolean false

Hvis satt, så vil tabellraden endre fargen ved hover

activeboolean false

Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet

errorboolean false

Signalisere om at det er en feil i tabellraden

childrenReactNode

Tabellceller

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

HeaderCell og DataCell

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

childrenReactNode

Kolonneoverskrift

namestring

Navnet det skal sorteres på. Benyttes via useSortableTable

sortableboolean false

Om komponenten brukes til sortering. Benytt via useSortableTable

sortConfigExternalSortConfig

Konfigurering og rekkefølgen på sortering. Benyttes via useSortableTable

padding"default" | "checkbox" | "radio" | "overflow-menu" default

Størrelse som settes for HeaderCell for ulikt innhold av komponenter

sortableButtonPropsDetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>

Ekstra props som kan sendes til sorteringsknappelementet. Benyttes via useSortableTable

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

padding"default" | "checkbox" | "radio" | "overflow-menu" default

Størrelse som settes for DataCell for ulikt innhold av komponenter

status"positive" | "negative" | "neutral" undefined

Viser en status-sirkel for DataCell

childrenReactNode

Innholdet i tabellcellen

<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 />.

ExpandableRow og ExpandableRowButton

NavnTypePåkrevd?Default-verdiBeskrivelse
colSpannumber

Antall kolonner tabellraden er

childrenReactNode

Innholdet til ExpandableRow

openboolean false

Om ExpandableRow er åpen

NavnTypePåkrevd?Beskrivelse
openboolean
onClick((e: MouseEvent<Element, MouseEvent>) => void) & MouseEventHandler<HTMLButtonElement>

Merk colSpan-propen til ExpandableRow. Denne må settes til antallet kolonner du har i tabellen, for at innholdet som ekspanderes skal vises til hele bredden av tabellen. Se eksempelet under for hvordan dette kan gjøres.

Sortering av tabell

Sorteringsfunksjonene er plassert i kolonneoverskriftene. Ved å klikke på en kolonneoverskrift sorteres tabellen basert på dataene innen - alfabetisk, numerisk, dato osv. En sortert tabell har tre tilstander: usortert, sortert etter stigende rekkefølge (pilikon - opp) eller sortert etter synkende rekkefølge (pilikon - ned). Ikonene indikerer gjeldende sortert tilstand og vises bare hvis sortering er aktivert. Det er kun kolonnen som blir sortert som skal vise et ikon, usorterte ikoner er bare synlige ved “hover”.

Her brukes hooken useSortableData med dataen man vil ha i tabellen som output. Merk bruken av getSortableHeaderProps hvor man må sende inn en verdi for name som tilsvarer den i datasettet du bruker.

Obs for Typescript: useSortableData benytter seg av generic-types, dermed ville den i eksemplet over sett ut slikt:

const {
    sortedData,
    getSortableHeaderProps,
    getSortableTableProps,
  } = useSortableData<{name:string; age:number }>(data);

Table density

Tabellkomponenten tilbyr tre størrelser: Default, Middle og Small. Dette tillater brukeren å veksle mellom ulike radhøyder for brukstilfeller der økt tetthet foredrer brukeropplevelsen.

Checkbox-tabell

Checkbox: Tabeller med valgbare rader som inneholder en Checkbox brukes i tilfeller der det er en liste over alternativer og brukeren kan velge ett eller flere alternativer. I tillegg brukes en global checkbox i tabelloverskriften for å kunne raskt velge eller fjerne markeringen av alle radene i tabellen.

Rader kan velges ved å gjøre første kolonne som en valgbar kolonne.

Expandable tabell

En utvidbar tabell lar brukeren vise og skjule innholdet på en rad. Utvidbare tabeller er nyttig for å presentere store datamengder på et lite sted.

Radio-tabell

Radio: Tabeller med valgbare rader som inneholder Radio knapper brukes i tilfeller der brukeren kun kan velge ett alternativ.

Statustabell

En tabell kan vise ulike status via en statusindikator som vises i tabellradene. Statusindikatorene hjelper brukeren med å se hvilke rader som kan kreve spesiell oppmerksomhet. I dette eksemplet kan brukeren identifisere hvilke samtykker som er publisert (grønn), hvilke som er kladd (grå) og hvilke som er utløpt (rød).

Sammenligningstabell

En sammenligningstabell er godt egnet til å visualisere og sammenligne data for produkter eller tjenester. Den gir mulighet for rask og enkel sammenligning mellom hvert produkts funksjoner og egenskaper. Alle kolonner skal være sorterte i enten stigende eller synkende rekkefølge fra høyre eller venstre, slik at alle likheter samles henholdsvis til høyre eller venstre.

Table actions

Handlinger som en bruker kan utføre fra en enkel tabellrad vises i kolonnen helt til høyre og er synlige ved hover. Hvis tabellraden har mer en tre alternativer bruker vi en OverflowMenu som inneholder handlinger relatert til den tabellraden. Har menyen en "slett" alternativ, bør det være på bunnen.

Inneholder over-flow menyen mindre enn tre alternativer, vis handlingene på linje som ikonknapper i stedet. Dette reduserer 1 klikk og gjør tilgjengelige handlinger synlige for brukerne med en gang.

Eksempler på handlingsikoner er info ikon for å vise mer detaljert informasjon, pen ikon for å konfigurere/redigere og søppelkasse ikon for å fjerne/slette en tabellrad.

Inline editing

I noen tilfeller ønsker man å endre informasjonen som står i tabellene. Man kan da bruke EditableCell-komponenten for å gi tabeller redigerbarhet, sammenlignet med regnearksprogrammer som f.eks. Excel.

Obs: bruk hover-propen for å symbolisere at cellene i raden er redigerbare.

Pagination

Paginering i tabeller fungerer ved å presentere et sett antall rader i en visning, med mulighet til å navigere til et annet sett. Brukes for å hjelpe brukerne å analysere et stort antall elementer når det er for mange resultater til å vises samtidig, slik at de ikke blir overveldet av for mye informasjon. Tabeller med mer enn 20 elementer bør inkludere paginering som alltid ligger under eller både over og under tabellen. Pagineringskontroller er tilgjengelig for å gi rask tilgang til alle sider og indikerer at flere sider eksisterer.

Kontrollene som støttes er:

  • Rader per side: Viser antall resultater slik at brukeren kan tilpasse hvor mye de ønsker å se.
  • Venstre og høyre pil: Lar brukeren navigere til neste eller forrige side.
  • Gå til side: Lar brukeren hoppe direkte til en ønsket side.

Tastaturnavigering i tabell

Hvis du ønsker tastaturnavigering i tabell, så kan man benytte seg av hooken useTableKeyboardNavigation. Én tabellrad vil da være fokuserbar. Man navigerer seg deretter i tabellen ved bruk av pil opp og pil ned.

Prøv på eksempelet under ved å klikke på en rad, og deretter endre rad med piltastene.

Filter tables

Tabeller med filtrering hjelper til med å begrense søkeresultatene, slik at brukeren kan finne mer nøyaktige resultater de leter etter, få ulik innsikt og gjøre sammenligninger. Det er tre typer filter-kontroller tilgjengelig:

Tabellsøk

Ved å benytte et søkefelt som begrenser resultatene som er vist basert på hva brukeren taster inn.

Rediger denne siden på Bitbucket