Table

Tables are used to present data sets in a simple and organized way.

Examples

Base #

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

No Border #

Remove all borders by applying the modifier class -no-border.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Striped #

Alternate the table row color by applying the modifier class -striped.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Hover #

Enable a hover state by applying the modifier class -hover.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 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.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Success #

Render a success state by applying the modifier class -row--success.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Warning #

Render a warning state by applying the modifier class -row--warning.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Danger #

Render a danger state by applying the modifier class -row--danger.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Info #

Render an info state by applying the modifier class -row--info.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 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
IDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Descending #

Name
IDLast Login
Name 3name-3Nov 5, 2020 10:15 AM
Name 2name-2Dec 18, 2020 2:38 AM
Name 1name-1Dec 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.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 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.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Size -sm #

Render a -sm size by applying the modifier class -sm.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Size -md #

Render a -md size by applying the modifier class -md. -md is the default size.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Size -lg #

Render a -lg size by applying the modifier class -lg.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM

Size -xl #

Render a -xl size by applying the modifier class -xl.

NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM
Name
IDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM
Name
ID
Last Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM
Location
High UtilizationElevated Utilization
Highest %
Total
%
Total
%
Location 1398%98%
Location 2198%367%98%
Location 3266%66%
Location 4166%66%

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon