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
525ad0e51996VolvoGreen
882f6e4f1998MercedesWhite
7ec7b33d1979VolvoBrown
f1c859b71997VolkswagenBlack
402f5bbf1993MercedesYellow
716f19c61974BMWBlue
ad26fc562009FiatBlack
edbf758a2002FordYellow
88ee75a61994FiatRed
f18544041987HondaGreen

Reflow Mode

In reflow mode, datatable displays its content as stacked.

IdYearBrandColor
Id963d8039Year2007BrandMercedesColorMaroon
Id179a5e06Year2002BrandHondaColorMaroon
Ide6c238fcYear1978BrandHondaColorBlack
Id56f57a36Year1974BrandJaguarColorBlue
Id5d07e5c6Year2008BrandVolkswagenColorOrange
Ida45decfdYear1992BrandBMWColorGreen
Idd562317dYear2008BrandFordColorBlue
Idb1f48059Year1989BrandVolkswagenColorMaroon
Idb5079a02Year1988BrandHondaColorBlue
Id7b27c570Year2008BrandVolkswagenColorBlue

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
a7cddf8a1973HondaOrange
b40695aa2002FiatGreen
540362dd1967AudiSilver
dbd256d51979AudiWhite
9da241771982AudiOrange
1098e0391987MercedesYellow
9b57a13d1988BMWBlack
44deee061988VolkswagenMaroon
b966f37a1972VolkswagenBlue
9adccb5c1982HondaMaroon

Source