Table
Examples
Base #
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
No Border #
Remove all borders by applying the modifier class -no-border
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Striped #
Alternate the table row color by applying the modifier class -striped
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Hover #
Enable a hover state by applying the modifier class -hover
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Row States
Chi offers a wide variety of modifiers to express different row states.
Disabled #
Disable a row by applying the attribute disabled
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Success #
Render a success state by applying the modifier class -row--success
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Warning #
Render a warning state by applying the modifier class -row--warning
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Danger #
Render a danger state by applying the modifier class -row--danger
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Info #
Render an info state by applying the modifier class -row--info
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Column Sorting
To express column sorting, apply the class -sorted
with one of the following modifiers:
-ascending
or -descending
.
Ascending #
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Descending #
Name | ID | Last Login |
---|---|---|
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Content Alignment #
Chi also supports additional content alignment with inline text align utilities applying the modifier class
-text--left
, -text--center
or -text--right
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Additional Sizes
Chi also supports additional table sizes: -xs
, -sm
, -md
,
-lg
, -xl
.
The default size is -md
.
Size -xs #
Render a -xs size by applying the modifier class -xs
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Size -sm #
Render a -sm size by applying the modifier class -sm
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Size -md #
Render a -md size by applying the modifier class -md
. -md is the default size.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Size -lg #
Render a -lg size by applying the modifier class -lg
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Size -xl #
Render a -xl size by applying the modifier class -xl
.
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Selectable #
Name | ID | Last Login | |
---|---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM | |
Name 2 | name-2 | Dec 18, 2020 2:38 AM | |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Scrollable #
Name | ID | Last Login |
---|---|---|
Name 1 | name-1 | Dec 18, 2020 3:26 PM |
Name 2 | name-2 | Dec 18, 2020 2:38 AM |
Name 3 | name-3 | Nov 5, 2020 10:15 AM |
Two tier table header #
Location | High Utilization | Elevated Utilization | Highest % | ||
---|---|---|---|---|---|
Total | % | Total | % | ||
Location 1 | 3 | 98% | — | — | 98% |
Location 2 | 1 | 98% | 3 | 67% | 98% |
Location 3 | — | — | 2 | 66% | 66% |
Location 4 | — | — | 1 | 66% | 66% |