DataTable

DataTable presents a collection of data in a responsive tabular layout. Columns can be given priority to define visibility depending on screen size and optional reflow mode enables stacking on smaller screens.

Column Toggle

In column toggle mode, visibility of columns are toggled based on their priority value.

IdYearBrandColor
c59133022008VolvoWhite
293ededb2003RenaultBrown
7b31c6e31982BMWBlack
9c72531a1999FiatBlue
68c9cd291993MercedesWhite
c26713c81993BMWGreen
9fba1f3c1992VolkswagenGreen
ad345c5f2006AudiBrown
b81ef51a1998HondaYellow
ec1d55531979JaguarRed

Reflow Mode

In reflow mode, datatable displays its content as stacked.

IdYearBrandColor
Id04e1e8faYear1965BrandFordColorWhite
Id5bdbb231Year1988BrandBMWColorBlue
Id76828267Year1964BrandMercedesColorBlack
Ida23bf3c3Year1978BrandHondaColorBlue
Id4a0978f5Year1974BrandVolvoColorBlue
Id6dab53fbYear1976BrandJaguarColorWhite
Idf719b0f5Year1969BrandHondaColorBlue
Id4d390c72Year1997BrandBMWColorYellow
Id749e9266Year2006BrandVolvoColorWhite
Id6fe663e2Year1982BrandAudiColorBlack

Advanced

In addition to the responsive modes, core features such as pagination, sorting, lazy loading, dynamic columns, grouping, single and multiple selection are provided. Mobile specific events like swipeleft, swiperight, tap and taphold are available as ajax behaviors. In following datatable, swipeleft to display information in an overlay and swiperight to remove the record.

IdYearBrandColor
e924642a1990MercedesRed
b8236edc1978MercedesOrange
1d2b06421996JaguarSilver
8200cd291975BMWBlue
a094d81e2003FiatRed
3bc6dd181984BMWGreen
40e39d571989BMWRed
fcd192101965FordBlack
5d534d431989VolkswagenBlue
76758d322003BMWGreen

Source