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
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
Benodigde stylesheets
/uno/components/table/div-table.css