Datatabell

Använd en datatabell när du behöver visa information i en tabell och där användaren till exempel ska kunna söka, filtrera och sortera innehållet. Komponenten innehåller designen och du får själv bygga funktionaliteten utifrån de specifika kraven i ditt projekt.

Design och språk

Texten på rubriker

  • Ska vara kort och tydlig.
  • Ska helst inte innehålla förkortningar och tecken som till exempel snedstreck.
  • Ska börja med stor bokstav.

Placering av innehåll i cellerna

För att det ska vara lätt att läsa informationen i tabellen ska

  • celler med text vara vänsterjusterade
  • celler med tal vara högerjusterade.

Centrerad text är svårläst så undvik det.

Brytpunkter

Två olika klassnamnsprefix används för att identifiera enhetens brytpunkter vid olika enhetsbredder. md:klassnamn och sm:klassnamn.

  • md betyder medelstora skärmar och nedåt, till exempel surfplattor.
  • sm betyder små skärmar och nedåt, till exempel mobil.

Komponenter och kod

Komponenten driftsattes första gången i version 19.8.6.

Stödansökan

Journalnummer
Datum
2021-11-20
Namn
Stöd för bredband
Komplett
Status
Inskickad
Journalnummer
4567-8901-2
Datum
2021-12-05
Namn
Inköp av en ny maskin
Komplett
Status
Inskickad
Journalnummer
3456-7890-1
HTML
<style>
    td:nth-child(3) {
      text-align: center;
    }
  </style>

<div class="c-datatable">
  <div class="c-datatable__header">
    <h2 class="c-datatable__header-heading">Stödansökan</h2>
    <div class="c-datatable__header-filters"></div>
  </div>
  <div class="c-datatable__wrapper">
    <table class="c-datatable__table md:c-datatable__table--card--flex">
      <colgroup>
        <col />
        <col />
        <col />
        <col />
        <col />
      </colgroup>
      <thead class="c-datatable__table-header">
        <tr>
          <th class="c-datatable__table-header-col">
            <button class="c-datatable__table-header__button">
              <span>Datum</span>
              <span
                class="c-datatable__table-header__icon sjv-i-chevron-ner"
              ></span>
            </button>
          </th>
          <th class="c-datatable__table-header-col">
            <button class="c-datatable__table-header__button">
              <span>Namn</span>
              <span class="c-datatable__table-header__icon"></span>
            </button>
          </th>
          <th class="c-datatable__table-header-col">
            <button class="c-datatable__table-header__button l-align--center">
              <span>Komplett</span>
              <span class="c-datatable__table-header__icon"></span>
            </button>
          </th>
          <th class="c-datatable__table-header-col">
            <button class="c-datatable__table-header__button">
              <span>Status</span>
              <span class="c-datatable__table-header__icon"></span>
            </button>
          </th>
          <th class="c-datatable__table-header-col">
            <span class="c-datatable__table-header__text">Journalnummer</span>
          </th>
          <td class="c-datatable__table-header-col"></td>
        </tr>
      </thead>
      <tbody class="c-datatable__table-body">
        <tr>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">Datum</dt>
              <dd>2021-11-20</dd>
            </dl>
          </td>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">Namn</dt>
              <dd>Stöd för bredband</dd>
            </dl>
          </td>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">
                Komplett
              </dt>
              <dd aria-label="Ja">
                <span aria-hidden="true" class="sjv-i-check"></span>
              </dd>
            </dl>
          </td>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">Status</dt>
              <dd>Inskickad</dd>
            </dl>
          </td>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">
                Journalnummer
              </dt>
              <dd>4567-8901-2</dd>
            </dl>
          </td>
        </tr>
        <tr>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">Datum</dt>
              <dd>2021-12-05</dd>
            </dl>
          </td>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">Namn</dt>
              <dd>Inköp av en ny maskin</dd>
            </dl>
          </td>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">
                Komplett
              </dt>
              <dd aria-label="Nej">
                <span aria-hidden="true" class="sjv-i-minus"></span>
              </dd>
            </dl>
          </td>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">Status</dt>
              <dd>Inskickad</dd>
            </dl>
          </td>
          <td>
            <dl class="c-datatable__table-body__cell">
              <dt class="c-datatable__table-body__cell-description">
                Journalnummer
              </dt>
              <dd>3456-7890-1</dd>
            </dl>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="c-datatable__footer"></div>
  </div>
</div>

Översikt över datatabell-klasserna

Klasser för datatabell

Namn

Klassnamn

Beskrivning

Medium

c-datatable--medium

Standard tabell

Small

c-datatable--small

Kompakt tabell (uppfyller inte kraven på tillgänglighet)

Tabell-layout fixed

c-datatable__table--fixed

Alla tabellkolumner har samma bredd.

Kort

c-datatable__table--card

Kortvy på mindre enheter.
Vi har två CSS variabler som styrs när en kort ska konverterats till staplad kort.
--c-datatabell-card-first-child-min-width: 8rem
--c-datatabell-card-last-child-min-width: 60%.

Tillåter horisontell scroll

c-datatable__table--nowrap

Tabellbredden anpassas inte efter tillgänglig plats. Om innehållets bredd är större än enhetens bredd, navigerar du med rullningslisten.

Teknisk information

Teknisk information som till exempel kodskelett hittar du i designsystemet. Där har du också möjlighet att se hur datatabellen ser ut med olika tillägg som till exempel table-layout och scroll.

Teknisk information för datatabell Länk till annan webbplats. (länken nås bara av personer som arbetar på Jordbruksverket)

Senast publicerad

Sidansvarig för sidan är Styleguide