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.

<table class="pkt-table pkt-table--basic pkt-table--responsive">
<thead>
    <tr>
      <th> Kolonnetittel</th>
      <th> Kolonnetittel</th>
      <th> Kolonnetittel</th>
      <th> Kolonnetittel</th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td data-label="Kolonnetittel"> Celle data</td>
      <td data-label="Kolonnetittel"> Celle data</td>
      <td data-label="Kolonnetittel"> Celle data</td>
      <td data-label="Kolonnetittel"> Celle data</td>
  </tr>
    <tr >
      <td data-label="Kolonnetittel">
        <span class="pkt-table__cell-wrapper">
          <span>tag</span>
          <span>tag</span>
        </span>
      </td>
      <td data-label="Kolonnetittel"> Celle data</td>
      <td data-label="Kolonnetittel"> Celle data</td>
      <td data-label="Kolonnetittel"> Celle data</td>
    </tr>
  </tbody>
</table>

<PktTable>
  <PktTableHeader>
      <PktTableRow>
        <PktTableHeaderCell> KolonneTittel</PktTableHeaderCell>
        <PktTableHeaderCell> KolonneTittel</PktTableHeaderCell>
      </PktTableRow>
    </PktTableHeader>
    <PktTableBody>
      <PktTableRow>
        <PktTableDataCell :dataLabel="KolonneTittel"> Celle </PktTableDataCell>
      </PktTableRow>
    </PktTableBody>
</PktTable>

  <PktTable skin="basic" responsiveView>
    <PktTableHeader>
      <PktTableRow>
        {tableData.map((data) => (
          <PktTableHeaderCell>{data.label}</PktTableHeaderCell>
        ))}
      </PktTableRow>
    </PktTableHeader>
    <PktTableBody>
      {[...Array(3)].map((_, index) => (
        <PktTableRow key={index}>
          {tableData.map((data) => (
            <PktTableDataCell dataLabel={data.label}>
              {data.value}
            </PktTableDataCell>
          ))}
        </PktTableRow>
      ))}
    </PktTableBody>
  </PktTable>

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.

  <table class="pkt-table pkt-table--basic pkt-table--responsive">
    <thead class="pkt-table__header">
      <tr class="pkt-table__row" role="row">
        <th class="pkt-table__header-cell"> Dato og tid</th>
        <th class="pkt-table__header-cell"> Status</th>
        <th class="pkt-table__header-cell"> Memo</th>
        <th class="pkt-table__header-cell"> Vurdering</th>
        <th class="pkt-table__header-cell"> Vurdert av</th>
      </tr>
    </thead>
    <tbody class="pkt-table__body">
      <tr class="pkt-table__row" role="row">
        <td class="pkt-table__data-cell" data-label="Dato og tid"> 19.01.2023 08:08</td>
        <td class="pkt-table__data-cell" data-label="Status">
          <span class="pkt-table__cell-wrapper">
            <span class="pkt-tag pkt-tag--thin-text pkt-tag--yellow">Normal</span>
          </span>
        </td>
        <td class="pkt-table__data-cell" data-label="Vurdering">
          <span class="pkt-table__cell-wrapper">
            <span class="pkt-tag pkt-tag--thin-text pkt-tag--green">Normal</span>
          </span>
        </td>
        <td class="pkt-table__data-cell" data-label="Vurdert av"> Ted Mosby</td>
      </tr>
    </tbody>
  </table>

<PktTable responsiveView :skin="skinType" compact>
  <PktTableHeader>
    <PktTableRow>
      <PktTableHeaderCell v-for="data in basicTableData" :key="data.label">{{ data.label }}</PktTableHeaderCell>
    </PktTableRow>
  </PktTableHeader>
  <PktTableBody>
    <PktTableRow v-for="n in 3" :key="n">
      <PktTableDataCell
        v-for="(data, index) in basicTableData"
        :key="`${data.value}-${index}`"
        :dataLabel="data.label"
        >{{ data.value }}</PktTableDataCell
      >
    </PktTableRow>
  </PktTableBody>
</PktTable>

<PktTable skin="basic" responsiveView>
  <PktTableHeader>
    <PktTableRow>
      {tableData.map((data) => (
        <PktTableHeaderCell>{data.label}</PktTableHeaderCell>
      ))}
    </PktTableRow>
  </PktTableHeader>
  <PktTableBody>
    {[...Array(3)].map((_, index) => (
      <PktTableRow key={index}>
        {tableData.map((data) => (
          <PktTableDataCell dataLabel={data.label}>
            {data.value}
          </PktTableDataCell>
        ))}
      </PktTableRow>
    ))}
  </PktTableBody>
</PktTable>

CSS oversikt

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

Props og slots

<Table/>

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

<TableDataCell>