ProDemos Design System

Tables

There are two types of tables styled: responsive and non responsive. It's up to the layout of the page and the use of the table to decide which one to use.

Take a good look at the role- and data-attributes, they are an important part of the responsive and accessible behaviour, so don't forget them. The cells data-label is printed as table headers on each row on mobile.

Elements and modifiers

  • .pds-c-table[.responsive]
  • .pds-c-table > thead > tr > th,td
  • .pds-c-table > tbody > tr > th,td
First name Last name Job title Date of birth
James Matman Chief sandwich Eater January 13th 1979
James Matman Chief sandwich Eater January 13th 1979

Table, default, not responsive

<table class="pds-c-table pds-t-corporate" role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">First name</th>
      <th role="columnheader">Last name</th>
      <th role="columnheader">Job title</th>
      <th role="columnheader">Date of birth</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td role="cell" data-label="First name">James</td>
      <td role="cell" data-label="Last name">Matman</td>
      <td role="cell" data-label="Job title">Chief sandwich Eater</td>
      <td role="cell" data-label="Date of birth">January 13th 1979</td>
    </tr>
    <tr role="row">
      <td role="cell" data-label="First name">James</td>
      <td role="cell" data-label="Last name">Matman</td>
      <td role="cell" data-label="Job title">Chief sandwich Eater</td>
      <td role="cell" data-label="Date of birth">January 13th 1979</td>
    </tr>
  </tbody>
</table>
First name Last name Job title Favorite Color Wars or Trek ? Secret Alias Date of Birth Dream Vacation City GPA Arbitrary Data
James Matman Chief Sandwich Eater Lettuce Green Trek Digby Green January 13, 1979 Gotham City 3.1 RBX-12
The Tick Crimefighter Sorta Blue Wars John Smith July 19, 1968 Athens N/A Edlund, Ben (July 1996).
Jokey Smurf Giving Exploding Presents Smurflow Smurf Smurflane Smurfmutt Smurfuary Smurfteenth, 1945 New Smurf City 4.Smurf One
Cindy Beyler Sales Representative Red Wars Lori Quivey July 5, 1956 Paris 3.4 3451
Captain Cool Tree Crusher Blue Wars Steve 42nd December 13, 1982 Las Vegas 1.9 Under the couch

Table, default, responsive

<table class="pds-c-table pds-t-corporate responsive" role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">First name</th>
      <th role="columnheader">Last name</th>
      <th role="columnheader">Job title</th>
      <th role="columnheader">Favorite Color</th>
      <th role="columnheader">Wars or Trek ?</th>
      <th role="columnheader">Secret Alias</th>
      <th role="columnheader">Date of Birth</th>
      <th role="columnheader">Dream Vacation City</th>
      <th role="columnheader">GPA</th>
      <th role="columnheader">Arbitrary Data</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" data-label="First name">James</td>
      <td role="cell" data-label="Last name">Matman</td>
      <td role="cell" data-label="Job title">Chief Sandwich Eater</td>
      <td role="cell" data-label="Favorite Color">Lettuce Green</td>
      <td role="cell" data-label="Wars or Trek ?">Trek</td>
      <td role="cell" data-label="Secret Alias">Digby Green</td>
      <td role="cell" data-label="Date of Birth">January 13, 1979</td>
      <td role="cell" data-label="Dream Vacation City">Gotham City</td>
      <td role="cell" data-label="GPA">3.1</td>
      <td role="cell" data-label="Arbitrary Data">RBX-12</td>
    </tr>
    <tr role="row">
      <td role="cell" data-label="First name">The</td>
      <td role="cell" data-label="Last name">Tick</td>
      <td role="cell" data-label="Job title">Crimefighter Sorta</td>
      <td role="cell" data-label="Favorite Color">Blue</td>
      <td role="cell" data-label="Wars or Trek ?">Wars</td>
      <td role="cell" data-label="Secret Alias">John Smith</td>
      <td role="cell" data-label="Date of Birth">July 19, 1968</td>
      <td role="cell" data-label="Dream Vacation City">Athens</td>
      <td role="cell" data-label="GPA">N/A</td>
      <td role="cell" data-label="Arbitrary Data">Edlund, Ben (July 1996).</td>
    </tr>
    <tr role="row">
      <td role="cell" data-label="First name">Jokey</td>
      <td role="cell" data-label="Last name">Smurf</td>
      <td role="cell" data-label="Job title">Giving Exploding Presents</td>
      <td role="cell" data-label="Favorite Color">Smurflow</td>
      <td role="cell" data-label="Wars or Trek ?">Smurf</td>
      <td role="cell" data-label="Secret Alias">Smurflane Smurfmutt</td>
      <td role="cell" data-label="Date of Birth">Smurfuary Smurfteenth, 1945</td>
      <td role="cell" data-label="Dream Vacation City">New Smurf City</td>
      <td role="cell" data-label="GPA">4.Smurf</td>
      <td role="cell" data-label="Arbitrary Data">One</td>
    </tr>
    <tr role="row">
      <td role="cell" data-label="First name">Cindy</td>
      <td role="cell" data-label="Last name">Beyler</td>
      <td role="cell" data-label="Job title">Sales Representative</td>
      <td role="cell" data-label="Favorite Color">Red</td>
      <td role="cell" data-label="Wars or Trek ?">Wars</td>
      <td role="cell" data-label="Secret Alias">Lori Quivey</td>
      <td role="cell" data-label="Date of Birth">July 5, 1956</td>
      <td role="cell" data-label="Dream Vacation City">Paris</td>
      <td role="cell" data-label="GPA">3.4</td>
      <td role="cell" data-label="Arbitrary Data">3451</td>
    </tr>
    <tr role="row">
      <td role="cell" data-label="First name">Captain</td>
      <td role="cell" data-label="Last name">Cool</td>
      <td role="cell" data-label="Job title">Tree Crusher</td>
      <td role="cell" data-label="Favorite Color">Blue</td>
      <td role="cell" data-label="Wars or Trek ?">Wars</td>
      <td role="cell" data-label="Secret Alias">Steve 42nd</td>
      <td role="cell" data-label="Date of Birth">December 13, 1982</td>
      <td role="cell" data-label="Dream Vacation City">Las Vegas</td>
      <td role="cell" data-label="GPA">1.9</td>
      <td role="cell" data-label="Arbitrary Data">Under the couch</td>
    </tr>
  </tbody>
</table>
wo 4 maart Programma Taal Vrij Prijs p.p. Selecteer
10:00 uur (duur:1:30) Staten-Generaaltour Info Nederl. 30 € 11,00
Selecteer
10:00 uur (duur:1:15) Buitenwandeling met audioset (Dutch) Ferry Mingelen Info Nederl. 4 € 5,50
Selecteer
10:30 uur (duur:1:30) Staten-Generaaltour Info Nederl. 21 € 11,00
Selecteer

Table, default, responsive

Example with realistic content, taken from:
https://reserveren.prodemos.nl/bezoekerscentrum/2020-03-04