4.17.0






Table

Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.

Small

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Use table size "sm" when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.

Medium

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Use table size "md" to add padding around each row to increase reading comfortability.

Large

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Use table size "lg" to add padding around each row to maximize reading comfortability.

Side Highlight

Product Colors Column 2 Column 3 Column 4 Column 5
Solar Value 2 Value 3 Value 4 Value 5
Roofing Value 2 Value 3 Value 4 Value 5
Gutters Value 2 Value 3 Value 4 Value 5
None Value 2 Value 3 Value 4 Value 5

Status Colors Column 2 Column 3 Column 4 Column 5
Success Value 2 Value 3 Value 4 Value 5
Warning Value 2 Value 3 Value 4 Value 5
Error Value 2 Value 3 Value 4 Value 5
None Value 2 Value 3 Value 4 Value 5

Cateogry Colors Column 2 Column 3 Column 4 Column 5
Category Color 1 Value 2 Value 3 Value 4 Value 5
Category Color 2 Value 2 Value 3 Value 4 Value 5
Category Color 3 Value 2 Value 3 Value 4 Value 5
None Value 2 Value 3 Value 4 Value 5

Side highlight can take product, status, and category colors. To view full list of colors, visit token colors.

Note: Only use category colors for categories. Do not mix it with product or status colors.

Table Container Off

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Disable Hover

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Multi-line

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5

Force Single Line

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5

Data Table

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Responsive Tables

Default

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5

Responsive Off

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5

Table Dark

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Table Container Off Dark

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5


Available Props
id
data
classname
aria
children
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
size
single_line
dark
disable_hover
data_table
container
responsive
text