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
5b4fab171994VolvoSilver
2d3551791989VolkswagenSilver
c83910b02007FiatMaroon
ec450ed21977FordBlack
6b114b031965AudiBrown
3cc468051969FordOrange
be9bbe511969HondaMaroon
17ebd4371972FordRed
e58a018b1985AudiBlue
d4635b491987AudiSilver

Reflow Mode

In reflow mode, datatable displays its content as stacked.

IdYearBrandColor
Id20c7fae4Year1989BrandHondaColorGreen
Id85dcafc7Year1973BrandJaguarColorGreen
Idf4c0bca4Year1968BrandFordColorRed
Id2fb3888bYear1997BrandVolkswagenColorSilver
Id30965347Year1990BrandMercedesColorBlack
Id4b3a8b3dYear1982BrandMercedesColorMaroon
Idb1d774a2Year1969BrandMercedesColorOrange
Idbf3c58dcYear1960BrandFordColorGreen
Id4a0b3a0aYear1996BrandBMWColorMaroon
Idef8f400cYear1979BrandAudiColorYellow

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
a29f2e8f1966VolkswagenGreen
39eed6791994MercedesMaroon
75f21ac01961BMWRed
6c81f44f2000AudiBlack
4a4a58f81967JaguarBlue
e888631f1989VolvoSilver
e34558431961JaguarOrange
490fa8ca1985HondaBlue
ec46efa21972VolkswagenMaroon
1b7f96d01986RenaultMaroon

Source