Table #294

Rozerinay · 2024-07-05T08:28:23Z

Rozerinay
Jul 5, 2024
Collaborator

We willen graag meer leren over de Table component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

Naam

Table

Doel

Structureert data in rijen en kolommen.

Ook bekend als

Data table

Gerelateerde componenten

Description List, Form Summary

Onderzoek

Styling Tables the mordern CSS way - Piccalilli
Artikel waarin Andy Bell stap voor stap uitlegt hoe hij een Table opzet in HTML/CSS.

Data table - BBC Gel
Uitgebreide documentatie bij BBC over het opzetten van een Data Table, inclusief responsive gedrag.

Data tables - Inclusive Components
Uitgebreid artikel over het opzetten van een Data Table, inclusief responsive gedrag.

How screen-readers-navigate-data-tables - Tink.uk
Léonie Watson beschrijft hoe schermlezers omgaan met Tabellen.

Product Spec Sheets: 4 Ways to Make Spec Sheets More Scannable for Users - Baymard Institute
In dit artikel vind je inzichten en aanbevelingen voor het ontwerpen van grote, complexe tabellen op e-commerce productpagina’s om de scanbaarheid en toegankelijkheid van productinformatie voor gebruikers te verbeteren.

Mobile Tables: Comparisons and Other Data Tables - Nielsen Normal Group
Dit artikel bespreekt strategieën om grote hoeveelheden data overzichtelijk weer te geven op kleine schermen, met alternatieven voor het beperken van rijen of kolommen en voorbeelden van gebruiksvriendelijke mobiele tabellen.

Designing Tables 101 - UXmatters
Dit artikel behandelt de basisprincipes van goed tabelontwerp vanuit het perspectief van een informatieontwikkelaar, met aandacht voor visueel ontwerp en interactiviteit, en benadrukt dat eenvoud essentieel is om tabellen begrijpelijk en effectief te houden voor gebruikers.

Table - GOV.UK
Table implementatie bij GOV.UK. Bij de Table Discussion wordt meer informatie, onderzoek en aanpassingen gedeeld. Enkele interessante comments:

Icoon bij sorteren. Het toevoegen van een dubbele pijl (één omhoog en één omlaag) aan kolomkoppen in een tabel vergroot de gebruiksvriendelijkheid. Zonder deze dubbele pijl kan het gebruik van alleen een enkele pijlpictogram bij de gesorteerde kolom verwarring veroorzaken. Gebruikers interpreteren de niet-geselecteerde kolomkoppen verkeerd als links naar extra informatie over de kolomkoppen.
Breedte van een tabel. Tabellen zouden alleen zo breed moeten zijn als de inhoud erin vereist, in plaats van 100% breed. Te brede tabellen kunnen het moeilijk maken om de rijen te scannen, vooral wanneer de tabel wordt vergroot.
Tekstuitlijning van kolomlabels. Er wordt voorgesteld om de tekstuitlijning van kolomlabels in tabellen aan te passen van “boven” naar “onder.” Dit is vooral relevant voor kolomlabels die lang zijn en meerdere regels nodig hebben. In een onderzoek dat er is gedaan blijkt dat deze aanpassing het makkelijker maakt om labels te lokaliseren en te begrijpen.

Rozerinay · 2024-10-29T15:56:36Z

Rozerinay
Oct 29, 2024
Collaborator Author

Amsterdam

Screenshots / Varianten

Storybook

Default

With Footer And Row Headers
Use table headers to tell users what the rows and columns represent. Use the scope attribute to help users of assistive technology distinguish between row and column headers. Use Table.Footer for a summary row.

Responsive gedrag

Figma
Geen toegang. Tbc.

Notities

Caption: aanwezig.
Table Header is bold. Alignment: top.
Table Row is regular. Alignment: top.
Mogelijkheid voor een Table Footer en gebruik van <th> in de Table Row.
Lange woorden worden niet afgebroken, maar komen op de volgende regel te staan.
Geen states aanwezig.
Responsive gedrag: Table verandert niet van weergave. Er verschijnt een horizontale scrollbalk.
Kolombreedte past zich automatische aan op basis van de inhoud.
Richtlijnen beschikbaar.

0 replies

Rozerinay · 2024-10-29T16:02:28Z

Rozerinay
Oct 29, 2024
Collaborator Author

Den Haag

Screenshots / Varianten

Storybook

Default

Hover

Focus

Horizontal Align

Vertical Align

Simple

Long Title

With Link

Responsive gedrag

Figma - Huidig

The headers at the top and on the left side

Responsive gedrag

Figma - WIP

Columns en rows
Table bevat standaard 10 columns en 10 rows. Columns en rows die je niet nodig hebt kun je uitzetten zonder te ‘detachen’. Hieronder vind je enkele voorbeelden.

Caption
Standaard heeft Table een caption. Een caption gebruik je om de tabel te beschrijven. Via het component panel is het mogelijk de caption visueel te verbergen. Zorg er wel voor dat deze in code wordt toegevoegd als het ontwerp daar om vraagt.

Tabel header
Standaard heeft Table een table header. Via het component panel is het mogelijk de table header visueel te verbergen. Zorg er wel voor dat deze in code wordt toegevoegd als het ontwerp daar om vraagt.

Tabel footer
Standaard heeft Table géén table footer. Via het component panel is het mogelijk om de table footer toe te voegen als het ontwerp daar om vraagt.

Responsive gedrag
Bij onvoldoende ruimte kan men Table horizontaal scrollen. Horizontale lijnen, schaduw en aangesneden woorden helpen dit te verduidelijken.

Alignment
De content van een cell kan links of rechts worden uitgelijnd.
Laatste column rechts uitgelijnd.

Content
Standaard heeft een Data cell geen specifieke opmaak. Via het component panel is het mogelijk om de content van een Data cell met een link te vullen.

Sorteren
Standaard is een tabel niet sorteerbaar. Via het component panel is er een sorteer functie aan een Table header cell toe te voegen.

Notities

Caption: aanwezig.
Table Header is bold. Alignment: top.
Table Row is regular. Alignment: top. Text alignment: left, center en right.
Mogelijkheid voor een Table Footer en gebruik van <th> in de Table Row.
Lange woorden worden niet afgebroken, maar komen op de volgende regel te staan.
Hover en Focus state aanwezig.
Responsive gedrag: Table verandert niet van weergave. In Figma zijn er 2 Buttons met de icons chevron-left en chevron-right te zien waarmee je horizontaal kunt navigeren in de weergave.
Kolombreedte past zich automatische aan op basis van de inhoud.
Kan bestaan uit een Link.
Richtlijnen beschikbaar.

0 replies

Rozerinay · 2024-10-30T08:14:49Z

Rozerinay
Oct 30, 2024
Collaborator Author

DSO

Screenshots / Varianten

Storybook

Default

With dso-image-overlay

With vertical lines

Sorted ascending

Sorted descending

Responsive gedrag

Notities

Caption: screenreader-only.
Table Header is bold. Alignment is bottom.
Table Row is regular. Uitlijning: left, center en right.
Lange woorden worden niet afgebroken, maar komen op de volgende regel te staan.
Responsive gedrag: Table verandert niet van weergave. Er verschijnt een horizontale scrollbalk.
Kolombreedte past zich automatische aan op basis van de inhoud.
Kan bestaan uit een Link en een Image in een <tr>. Image wordt kleiner bij een kleiner viewport.
Styling: horizontale en verticale lines. Mogelijkheid om verticale lines niet te tonen.
Sorteermogelijkheid.
Richtlijnen beschikbaar.

0 replies

Rozerinay · 2024-10-30T08:47:21Z

Rozerinay
Oct 30, 2024
Collaborator Author

DUO

Documentatie website

Screenshots / Varianten

Basic
Je gebruikt standaard een eenvoudige tabel. Deze variant is ideaal voor tabellen met weinig kolommen, een enkele header en simpele, snel af te lezen data.

Complexe tabel
Alleen gebruiken op medewerkersschermen. Een complexe tabel, ideaal voor veel data, beslaat de volledige breedte van het scherm. Het kan meerdere headers hebben, evenals een kleinere tekstgrootte.

Sticky headers
Met een sticky header blijft de contextuele informatie van de table header zichtbaar, zelfs bij het scrollen door lange tabellen. Dit zorgt ervoor dat de gebruiker altijd begrijpt wat er in de tabel wordt weergegeven. De sticky header blijft sticky totdat de laatste rij is bereikt, waarna de header uit beeld verdwijnt.

Sortering
Meestal wordt de volgorde van de tabel bepaald door hoe je hem invult. Je kunt echter de gebruiker ook de optie geven om de tabel real-time te sorteren met een sorteerfunctionaliteit.

Responsive tables
Tabellen zijn van zichzelf niet responsive. Op mobiele devices is het lastig tabulaire data overzichtelijk weer te geven.

Automatisch responsive tabellen
Met javascript kunnen eenvoudige tabellen (1 rij headings) responsive gemaakt worden. De data-col attributen worden dan automatisch op de cellen geplaatst.

Tabel met hover effect
Voor tabellen waarbij complete rijen klikbaar en/of selecteerbaar zijn, kan de class .table--hoverable worden toegevoegd.

Selectie van 1 of meerdere rijen

Laatste kolom uitlijning
Bedragen worden enkel in de laatste kolom van een tabel rechts uitgelijnd. Deze benadering zorgt voor een strakke en geordende presentatie van financiële informatie, wat bijdraagt aan een beter begrip en verwerking van de gegevens.

Responsive gedrag

Notities

Caption: niet aanwezig.
Table Header is bold en regular. Alignment: top.
Table Header kan <abbr> bevatten.
Table Row is regular. Alignment: left en right.
Lange woorden worden niet afgebroken, maar komen op de volgende regel te staan.
Responsive gedrag: Table verandert standaard niet van weergave. De font-size van de koppen en data worden kleiner. Middels een modifier kan de tabel wel responsive worden gemaakt.
Kolombreedte past zich automatische aan op basis van de inhoud.
Kan bestaan uit een Link in een <th>.
Styling: horizontale lines. Mogelijkheid om verticale lines niet te tonen.
Selectie van een rij mogelijk.
Bedragen worden rechts uitgelijnd.
Sorteermogelijkheid.
Richtlijnen beschikbaar.

0 replies

MariekeBrouwer · 2024-10-30T10:47:48Z

MariekeBrouwer
Oct 30, 2024

Voor Groningen is deze vergelijkbaar met Den Haag/ Amsterdam, en maken gebruik van het Open Online product :) (alleen tekst, geen linkjes, afbeeldingen, etc.)

We gebruiken deze vaak voor bedragen / inkomensgrenzen, overzicht van feestdagen, etc,

Tabel heeft momenteel randen rondom
Titel moet handmatig worden opgemaakt nu in bold

0 replies

Rozerinay · 2024-10-31T11:10:21Z

Rozerinay
Oct 31, 2024
Collaborator Author

OpenGemeenten

Screenshots / Varianten

Documentatie website

Responsive gedrag

Pattern Lab

Table

Table Caption

Footnote

HeaderAbove

HeaderLeft

Responsive gedrag

Notities

Caption: aanwezig.
Table Header is bold. Alignment: top.
Table Row is regular. Alignment: left.
Mogelijkheid om <th> in de eerste kolom te tonen of zelfs in z'n geheel niet te tonen.
Lange woorden worden niet afgebroken, maar komen op de volgende regel te staan.
Responsive gedrag: Table verandert niet van weergave. Er verschijnt een horizontale scrollbalk en een begeleidende tekst boven de Table die aangeeft dat je kan scrollen.
Kolombreedte past zich automatische aan op basis van de inhoud.
Styling: horizontale lines.
Richtlijnen beschikbaar.

0 replies

Rozerinay · 2024-10-31T11:25:30Z

Rozerinay
Oct 31, 2024
Collaborator Author

Rotterdam

Screenshots / Varianten

Storybook

Default

Hover

Rows with edit link

Rows with badges

Responsive gedrag

Figma

Base

Interactive
Tables may contain links (like in this example), to link to a detail page with more information. In some cases, (multiple) rows can be selected to perform an action. For that, there is an ‘active state’.

Pagination
In the case you want to use pagination, please make sure that there is a possibility on both top and bottom to go to the next of previous page (or first and last).

Horizontal scroll for smaller screens
When there isn’t enough space on smaller devices (e.g. a smartphone) and there isn’t another way of displaying the data instead of a table use a horizontal scroll overflow.

Notities

Caption: aanwezig. Wordt gecentreerd ten opzichte van de tabel.
Table Header is bold. Alignment: bottom.
Table Row is regular. Alignment: left en right.
Table Footer is bold.
Bedragen worden rechts uitgelijnd.
Kan bestaan uit een Link en Badge.
Lange woorden worden niet afgebroken, maar komen op de volgende regel te staan.
Responsive gedrag: Table verandert niet van weergave. Er verschijnt een horizontale scrollbalk.
Kolombreedte past zich automatische aan op basis van de inhoud.
Styling: horizontale lines.
Hover state aanwezig.
In Figma is er een sorteermogelijkheid, Pagination (zowel aan de boven- als onderkant van de tabel) en een 'Toon meer' Button bij meer dan 25 rows.
Richtlijnen beschikbaar (Figma).

0 replies

Rozerinay · 2024-10-31T11:31:28Z

Rozerinay
Oct 31, 2024
Collaborator Author

RVO

Screenshots / Varianten

Documentatie website

Storybook

Responsive gedrag

Figma

Notities

Caption: aanwezig.
Table Header is regular. Alignment: top.
Table Header kan Button bevatten voor de sorteermogelijkheid.
Table Row is regular. Alignment: left en right.
Lange woorden worden niet afgebroken, maar komen op de volgende regel te staan.
Responsive gedrag: Table verandert niet van weergave. Er verschijnt een horizontale scrollbalk.
Kolombreedte past zich automatische aan op basis van de inhoud.
Kan bestaan uit een Link.
Styling: horizontale lines en zebra stripes.
Bedragen worden rechts uitgelijnd.
Richtlijnen beschikbaar.

0 replies

Rozerinay · 2024-10-31T14:00:48Z

Rozerinay
Oct 31, 2024
Collaborator Author

Utrecht

Screenshots / Varianten

Storybook

Default

Table Data Duration
Tijden hebben nummers, maar een tijd wordt niet rechts uitgelijnd.

Table Time Period
Tijden hebben nummers, maar een tijd wordt niet rechts uitgelijnd.

Table Time Period Week
Tijden hebben nummers, maar een tijd wordt niet rechts uitgelijnd.

Table Financial
Tijden hebben nummers, maar een tijd wordt niet rechts uitgelijnd.

Table (right-to-left-script)

Table with subheadings

Table with sticky subheadings

Table Header Hidden
Soms is de tabel erg simpel en lijkt de heading niet nodig.

Table Row Alternate Color

Table Row Hover

Table Row Focus Within
In sommige situaties is het handig goed te zien in welke table row de focus is. Gebruik dan de utrecht-table--row-focus-within class name.
De stijl is alleen bedoeld voor tabelrijen met data, in de table body. Het effect werkt niet voor rows in de table header of de table footer.

Table with rich text
De eerste regels van een gewone tabelcel en cellen met een unordered list, ordered list of paragraph moeten op gelijke hoogte staan.

Table with footnote
Een verwijzing naar een voetnoet in een tekst kan onduidelijk en moeilijk te gebruiken zijn. De font-size van een voetnoot is vaak kleiner dan omliggende tekst, daarom is een voetnoot soms niet groot genoeg. Als de voetnoot-verwijzing een link is, dan kan die te klein zijn om aan te klikken.

Table Mark Data

Table URL Data

Table Multiline Value
Sommige soorten data zijn moeten op meerdere regels staan om duidelijk te zijn, zoals bijvoorbeeld een adres.

Table Fixed Layout Values
In een fixed layout moet je kiezen hoe breed elke kolom is. Voor veel soorten data hebben we goede eerste keus voor de breedte van de kolom.

Table Header Sticky
A sticky table heading must have a color and background color, otherwise the heading will overlap the table body and both become unreadable..

Table Footer Sticky
Like the sticky header, a sticky footer must have background-color and color defined. Without the colors the content will be unreadable.

Table Header Cell Sticky
When the page is viewed at 400% zoom, the sticky heading cells might not leave enough room after the cell to view the table data. This can lead to the page not being accessible.

Figure Caption

Table with empty table body

Heading Label

Table row with a button

Table row with a button group
Gebruik een button group component als je meerdere buttons bij een tabelrij wilt hebben.

Table row with a checkbox

Table row with a link

Selected table row

Table with a selected column

Table column with the status of selected columns

Selected table cell

Table row with a sort button for a sorted column

Table Status Badge