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
7fa867d41978HondaRed
79ab8c631980FiatMaroon
789db92f1983AudiBrown
644d25aa2002MercedesGreen
132692771960AudiRed
57596dbe1972RenaultRed
af8bb0c01994VolkswagenBlack
4278fb071998MercedesGreen
c598a1d62008AudiGreen
093f17bf1981JaguarRed

Reflow Mode

In reflow mode, datatable displays its content as stacked.

IdYearBrandColor
Id2e08e357Year1969BrandJaguarColorGreen
Idc2740421Year1999BrandJaguarColorOrange
Id374595ecYear1974BrandAudiColorSilver
Idbcc07fabYear2003BrandHondaColorOrange
Idf7b94fc0Year2000BrandBMWColorWhite
Id369a5dfaYear1997BrandFiatColorBlue
Idcb230524Year1988BrandVolkswagenColorMaroon
Id79a22919Year1991BrandMercedesColorGreen
Idd8ba55f6Year2002BrandFordColorYellow
Id71de85a4Year2008BrandVolkswagenColorYellow

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
c0a212ab1965MercedesGreen
201a873a1966FiatWhite
b6e298061968HondaSilver
1017b7a61971BMWGreen
377494d91987MercedesBlue
34e6b0c81987MercedesOrange
02a415341971AudiYellow
571dfcb01968MercedesSilver
ad428ec11966VolvoBrown
10a65db31976RenaultBrown

Source