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% |