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
197fa0de1994JaguarOrange
6092810e1974VolkswagenGreen
53dd50862002JaguarYellow
d2ca1f8b2004VolkswagenYellow
d45aef991992BMWWhite
bfb7fb9c2001VolkswagenSilver
c042e9561996HondaOrange
d0c423762000JaguarMaroon
e55129ea1983VolvoBrown
8f292c041961FiatBrown

Reflow Mode

In reflow mode, datatable displays its content as stacked.

IdYearBrandColor
Iddd521de7Year1964BrandVolkswagenColorSilver
Ide55c2d9aYear2008BrandFordColorBlue
Id93d0f262Year1973BrandJaguarColorOrange
Ida3831d53Year1966BrandMercedesColorBlue
Id1fb79bb4Year1996BrandBMWColorBlack
Id7fd29873Year1960BrandRenaultColorRed
Idfd9b129fYear1974BrandAudiColorBlue
Idfad65665Year1964BrandHondaColorBlack
Id517c0e3fYear1993BrandVolkswagenColorBlack
Idcc0569f0Year1991BrandVolvoColorGreen

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
e0ae02f91998VolvoSilver
a1c1aa891963JaguarRed
f31e0e742004VolkswagenRed
334debd51992RenaultBrown
acd590821967JaguarBlue
62f8035f2002VolvoBlue
699999b12002FordMaroon
64197f6d1969FiatSilver
9d85fd8e1997AudiMaroon
3f3cbde91981HondaBlack

Source