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
6283adbf1988HondaSilver
89c1ce921962FordWhite
99f48f181965FiatSilver
e68a21001964FordWhite
5d482e6e1962MercedesGreen
f9f4170e1975FordBlue
a4b39c9e1993BMWBlack
f69037e82000VolvoWhite
8bf53b7f1971VolkswagenBlue
2be864161989VolkswagenYellow

Reflow Mode

In reflow mode, datatable displays its content as stacked.

IdYearBrandColor
Id1a858138Year2002BrandRenaultColorBlack
Idb9c419c3Year1995BrandJaguarColorBlack
Id38330f9eYear1999BrandHondaColorRed
Id418a210cYear1982BrandVolkswagenColorBlack
Id20983800Year1988BrandVolkswagenColorBrown
Id6dcf6d93Year1974BrandAudiColorWhite
Id483e51ccYear1989BrandMercedesColorGreen
Id1c3d3e9bYear1972BrandHondaColorRed
Idf173b330Year1990BrandHondaColorWhite
Idd10d1628Year1973BrandAudiColorYellow

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
009caef91987AudiRed
f0b5b2871965BMWBlue
225fc5b61979FordYellow
f807ee812004AudiOrange
3a74456d1967FiatBlack
2e61e1111975HondaBlue
b34b19371975HondaBlack
11b5a57a2005AudiRed
0b7cd5f61993AudiGreen
1f3734121983JaguarBlack

Source