Table div's

Een div table is een table die er visueel uitziet als een table, maar is opgebouwd uit div of andere html elementen. Een complexe native table is beperkt responsive en toegankelijk te maken. Met een div table zijn er daarentegen veel meer mogelijkheden.

Het is mogelijk de table te gebruiken met en zonder checkbox. Gebruik de modifier div-table__row--with-checkbox en div-table__cell--checkbox op de row en cell.

Een tabel met checkboxes heeft een footer met actie knoppen, zodra je een rij selecteerd div-table__row--selected schuift de footer uit met div-table--has-selected.

Voor de mobiele weergave is het belangrijk dat data-col="" gevuld is. Dit is de naam van de kolom.

Het aantal cellen geef je aan met div-table--cell-4, div-table--cell-5 etc.

Tabel titel

Omschijving van de tabel
Moment
Gepland
Absent
Status
Moment 19
0
Betalingregeling ov-schuld
gepubliceerd
Moment 19
0
Betalingregeling ov-schuld
gepubliceerd
Moment 19
0
Betalingregeling ov-schuld
gepubliceerd
Moment 19
0
Betalingregeling ov-schuld
gepubliceerd
Moment 19
0
Betalingregeling ov-schuld
gepubliceerd
Moment 19
0
Betalingregeling ov-schuld
gepubliceerd
Moment 19
0
Betalingregeling ov-schuld
gepubliceerd

Accordion tabel met mobiele weergave van één rij

De onderstaande tabel heeft een mobiele weergave met paginering. Om dit mogelijk te maken is het geen native table, maar is deze tabel opgebouwd door middel van div's.

Om een rij actief te maken op kleine schermen is de class .accordion-table__row--active nodig.

Eenmalig moet je het aantal kolommen zetten met een modifier, bijvoorbeeld .accordion-table--cell-4.

Deze table word opgenomen in .div-table

Bij en afschrijvingen

Omschijving van de tabel
Boekdatum
Beschrijving
Totale studieschuld
Acties
16-10-2018
Betalingregeling ov-schuld
€ 20.000,00
16-10-2018
Betalingregeling ov-schuld
€ 20.000,00
Meer
  • Boekdatum

    16-10-2018

  • Beschrijving

    Betaling

  • Betaling

    Betaling

  • Betaling

    Betaling

  • Boekdatum

    16-10-2018

  • Beschrijving

    Betaling

  • Betaling

    Betaling

  • Betaling

    Betaling

16-10-2018
Betalingregeling ov-schuld
€ 20.000,00
16-10-2018
Betalingregeling ov-schuld
€ 20.000,00

Benodigde stylesheets

  • /uno/components/table/div-table.css