Table

npm install @entur/table

@import '@entur/table/dist/styles.css';

Kom i gang

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

<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. For å endre på tettheten mellom radnene kan du bruke spacing-propen.

Om du ønsker en mer kompakt tabell, så kan du spesifisere middle-propen.

TableHead, TableBody og TableFooter

<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

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

HeaderCell og DataCell

<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

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.

Eksempler

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 (pilikon – opp og ned), sortert etter stigende rekkefølge (pilikon – opp) eller sortert etter synkende rekkefølge (pilikon – ned). Ikonene indikerer gjeldende sortert tilstand og vises bare på kolonner der useSortableData sine props er tatt i bruk.

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.

Sticky header

Ønsker du en såkalt «sticky header», altså en topp-rad som forblir synlig på skjermen når man skroller i tabellen, kan du bruke stickyHeader-propen.

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.

Props

Table

import { Table } from '@entur/table';

Denne komponenten har ingen props

TableHead, TableBody og TableFooter

import { TableHead, TableBody, TableFooter } from '@entur/table';

Denne komponenten har ingen props

TableRow

import { TableRow } from '@entur/table';

Denne komponenten har ingen props

HeaderCell og DataCell

import { HeaderCell, DataCell } from '@entur/table';

Denne komponenten har ingen props

Denne komponenten har ingen props

ExpandableRow og ExpandableRowButton

import { ExpandableRow, ExpandableRowButton } from '@entur/table';

Denne komponenten har ingen props

Denne komponenten har ingen props