Data Tables
Overview
Data Tables present raw data sets and lend meaning to the data, while maintaining that the data is readable, scannable, and easily comparable.
Standard Data Table
|
Stock Number | Vehicle Name | Payment Status | Owner Name | Amount |
---|---|---|---|---|---|
|
789-00010273 | 1997 Honda Civic | Paid | Joe R. | $3,432.00 |
|
789-00010273 | 1997 Honda Civic | Unpaid | Joe R. | $3,432.00 |
|
789-00010273 | 1997 Honda Civic | Paid | Joe R. | $3,432.00 |
|
789-00010273 | 1997 Honda Civic | Pending | Joe R. | $3,432.00 |
|
789-00010273 | 1997 Honda Civic | Unpaid | Joe R. | $3,432.00 |
Flexible Data Tables
Flexible Data Tables are built with divs and flexbox properties. This makes it very flexible, allowing data to be displayed in a infinite number of ways.

- Chevrolet
- Cruz Limited
- $1500
- Buy Now
- Right Rear
- Collision

- Chevrolet
- Cruz Limited
- $1500
- Buy Now
- Right Rear
- Collision

- Chevrolet
- Cruz Limited
- $1500
- Buy Now
- Right Rear
- Collision
Mobile Data Tables
Mobile Data Tables are designed to be optimized in areas with limited real estate, such as mobile views or condensed views in a more complex layout. They are built with divs and flex-box properties to support RESS and adaptive layouts. Learn more about RESS
Kendo Data Table
Kendo UI for jQuery view usage
CSS
The CSS for the Kendo Data Table is not included in the Component Library. However, there's a separate file with the styles that you can download below and include in your project.
Download Kendo StylesJavascript
This table requires Javascript to build.
Additional Classes
Class Name | Component | Add To | Description |
---|---|---|---|
.table-hover | Data List | .table | Adds a hover effect to the table rows |
.table-vertical-center | Data List | .table | Align content vertically inside all its table cells |
.table-horizontal-center | Data List | .table | Align content horizontally inside all its table cells |
.table-cell-vertically-center | Data List | .table-cell | Align content horizontally inside a specific table cell |
.table-cell-horizontal-center | Data List | .table-cell | Align content horizontally inside a specific table cell |