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
c6dd607a1964HondaSilver
214d1e391976JaguarMaroon
585eb40f2005JaguarYellow
ee38cde11988VolkswagenYellow
7d03257f1969FiatRed
2a3dbfc81993VolkswagenBlue
a4552acc1973FordBrown
0636a2341960VolkswagenBrown
51e1901f1973HondaMaroon
45aea1931968RenaultRed

Reflow Mode

In reflow mode, datatable displays its content as stacked.

IdYearBrandColor
Id0c0191ddYear2006BrandFordColorBlack
Idea3b1081Year1994BrandVolvoColorYellow
Idb38c9d62Year1970BrandHondaColorYellow
Ide8029d2fYear1994BrandFiatColorRed
Ide796f47dYear2004BrandVolvoColorGreen
Id4c578b39Year1965BrandFiatColorBlack
Id82c6dcc5Year2006BrandMercedesColorRed
Ideb714e50Year1989BrandVolkswagenColorSilver
Ide4151260Year1977BrandVolkswagenColorMaroon
Idc4940f7cYear1967BrandMercedesColorSilver

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
16daab502002FordSilver
b318d1031996JaguarBlue
cc4321661971RenaultYellow
6410688f1966HondaBrown
3a07553b1975VolkswagenMaroon
2e02a55d1984VolvoWhite
b39439141968JaguarSilver
abf0f0f11978VolvoWhite
9c1ae67a1992BMWBlack
77c3a7d61996FordOrange

Source