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
6468e71c1997JaguarBrown
23e145a41984FiatSilver
5e53785b2005AudiBlue
f36144d71975FordBlue
55018f071965BMWWhite
a7e86f0e1976MercedesGreen
c95087122009HondaOrange
c1b668aa1991FordSilver
fb3218901976FiatBrown
47ae35342005MercedesBlack

Reflow Mode

In reflow mode, datatable displays its content as stacked.

IdYearBrandColor
Ida24b79f9Year1983BrandFordColorGreen
Idc18dfc2aYear1970BrandVolvoColorOrange
Id174b3b2eYear2006BrandBMWColorMaroon
Id0daae149Year1979BrandVolkswagenColorRed
Idca05dc5eYear1967BrandMercedesColorMaroon
Ide35e166bYear2002BrandMercedesColorBlue
Id912f59d3Year2003BrandVolkswagenColorOrange
Id27c22ae2Year1966BrandMercedesColorBrown
Id6f5a7c57Year1976BrandFordColorWhite
Id2cd06e74Year1983BrandFordColorYellow

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
3155ac131995RenaultBrown
f5c97f331961JaguarWhite
b40ebaa21964BMWBlack
5cae86721977VolvoWhite
622196071974FordBlue
adf9be621980FiatRed
45c4729a1965HondaSilver
a5a67fda2009HondaWhite
827720f61989FordBlack
b190b52a1971FordWhite

Source