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)
  • COLLISION FRONT END
  • A - #77 |SD - 8
  • 153,073 mi
  • Current Bid: $950
  • Run & Drive
  • 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