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
8aa35c7c1990RenaultMaroon
00903cac2008VolvoBrown
ff40d4f21997RenaultWhite
ca0142fe1973AudiMaroon
7014a9141972VolkswagenRed
4015fc2f1993RenaultWhite
92ea0c881987RenaultBlack
29dbbaa81976BMWOrange
bac84c522001HondaRed
bc5a7acd1962JaguarMaroon

Reflow Mode

In reflow mode, datatable displays its content as stacked.

IdYearBrandColor
Ide33710ccYear2005BrandHondaColorBlack
Id39caab25Year1997BrandBMWColorYellow
Id5d430126Year2000BrandFordColorBlack
Idf27d852dYear1979BrandVolkswagenColorRed
Id5d8d5d1fYear1997BrandHondaColorBrown
Id8419b52fYear2007BrandBMWColorSilver
Idf2f28a97Year1981BrandAudiColorGreen
Id7f75dec6Year1999BrandBMWColorBlack
Id05f8c46eYear1981BrandVolkswagenColorBlack
Idb7c12744Year1987BrandVolkswagenColorSilver

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
212c9fce1965MercedesGreen
9ada6e172003VolvoBlack
04ff41ed1968VolkswagenMaroon
5ea6dc4a1973FiatYellow
e6a1f0171999FordRed
6d020df62004VolkswagenGreen
4da7e0e22004HondaBrown
1bfe3f321965JaguarMaroon
e9d0230e1963RenaultYellow
d356d0681960FiatGreen

Source