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 CSS grid 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
Expandable Data Table
Expandable Data Tables allow a secondary data set to be hidden until requested by a user to be revealed.
CSS
If you needed more column to the table, You need to overwride the minmax number on your local CSS.
Javascript
Javascript for Expand/Collapse All and Check/Uncheck All.
Bulk Action
View exampleBulk Action streamlines the proficient execution of specific tasks simultaneously, eliminating the need for repetitive actions.
|
|
Stock Number | Vehicle Name | Payment Status | Owner Name | Amount |
|---|---|---|---|---|---|
|
|
789-00010273 | 1997 Honda Civic | Paid | Joe R. | $3,432.00 |
|
|
789-00010274 | 2005 Toyota Camry | Pending | Jane D. | $5,850.00 |
|
|
789-00010274 | 2005 Toyota Camry | Pending | Jane D. | $5,850.00 |
Javascript
Javascript for Bulk Actions
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-header-sticky | Expandable/Flexible Data Table | .table-header | Make table header stick to the top of browser on scroll. |
| .table-hover | Data Tables | .table | Adds a hover effect to the table rows |
| .table-vertical-center | Data Tables | .table | Align content vertically inside all its table cells |
| .table-horizontal-center | Data Tables | .table | Align content horizontally inside all its table cells |
| .table-cell-vertically-center | Data Tables | .table-cell | Align content horizontally inside a specific table cell |
| .table-cell-horizontal-center | Data Tables | .table-cell | Align content horizontally inside a specific table cell |