Table

Om komponenten

Tabellen er en enkel og stilren tabellkomponent som kan brukes til å vise data på en oversiktlig måte. Tabellen er som en standard responsiv og vil tilpasse seg skjermstørrelsen. Denne funksjonaliteten kan slåes av.

Tabellen kan brukes i ren HTML med å legge på .pkt-table, eller som en komponent i Vue eller React. Dersom tabellen skal brukes i ren html med kun css-klassene, må man huske å legge på en av skinsene for å få riktig farge.

For nå vil tabellen kun endre stil og farge. Senere er tanken å legge til mer funksjonalitet som sortering og filtrering i Vue og React komponentene.

Se et mer komplekst eksempel helt nederst.

Varianter

Tabellen kommer i flere varianter som kan brukes for seg selv eller sammen. Disse er:

• .pkt-table--compact
• .pkt-table--responsive

Som standard er tabellen satt til å ha en god del spacing og være responsiv. Ønsker man ha mindre padding mellom cellene, kan man bruke .pkt-table--compact klassen eller sette prop’en compact i Vue eller React. Dette kan endres ved å sette prop-en responsiveView til false for React og Vue.

Kompakt tabell

For å få en mer kompakt tabell, kan man bruke klassen .pkt-table--compact eller sette prop-en compact til true for React og Vue. Som en standard, er denne satt til false.

// Ren html med kun stylingklasser
<table class="pkt-table pkt-table--compact">
  ...
</table>

// Vue og React

<PktTable compact> ... </PktTable>

Responsive tabeller

For å tilpasse tabeller på små skjermer kan man bruke klassen .pkt-table--responsive. Da vil hver celle stables under hverandre i tillegg til å vise kolonnetitler. Når skjermstørrelsen blir mindre enn 768px (breakpoint: tablet), vil tabellen bli endres til en listevisning av tabellen.

For React og Vue, kan man endre på prop-en responsiveView for å velge om man ønsker en slik responsivitet eller ikke. Som en standard, er denne satt til true.

I mobilvisning, vil flere elementer fungere som normalt ved bruk av wrapperen .pkt-table__celle-wrapper i de fleste nettlesere.

// Ren html med kun stylingklasser
<table class="pkt-table pkt-table--responsive">
  ...
</table>

// Vue og React

<PktTable responsiveView> ... </PktTable>

Farger

Tabellen har to ulike skins: “basic” og “zebra-blue”. Disse kan brukes for å gi tabellen en spesifikk farge. Disse kan settes ved hjelp av klassen direkte i html eller via props i Vue og React.

• .pkt-table--basic
• .pkt-table--zebra-blue

// Ren html med kun stylingklasser
<table class="pkt-table pkt-table--zebra-blue">
  ...
</table>

// Vue og React

<PktTable skin="zebra-blue"> ... </PktTable>

Flere elementer i én celle

For å legge til flere elementer i én celle, kan man gruppere elementene i en <span> med klassen .pkt-table--cell-wrapper. Dette vil gi en finere visning av innholdet i cellen. Se eksempel under.

Eksempel med mer fyldig data

Under er et kodeeksempel på en tabell med mer komplekst innhold. Den er responsiv, inneholder flere <Tag>-komponenter, og har et skin kalt basic.

CSS oversikt

I Punkt brukes BEM-styling. Under er Table sin CSS-struktur.

Props og slots

<Table/>

<TableBody/>, <TableHeader/>, <TableHeaderCell/> og <TableRow/>

<TableDataCell>