Components

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.

Make & Model

Current

Damage

Status

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

Make (A to Z)

2008 INFINITI G35 SEDAN X

COLLISION FRONT END
A - #77 |SD - 8
153,073 mi
Current Bid: $950
Run & Drive

2008 INFINITI G35 SEDAN X

COLLISION FRONT END
A - #77 |SD - 8
153,073 mi
Current Bid: $950
Run & Drive

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 Styles

Javascript

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
                    

            
        

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

Version 2.3

Reference: Carbon Design System, October 2020
www.carbondesignsystem.com

Got questions or comments?
Email the IAA Design Team