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


<table class="chi-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table -no-border">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table -striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table -hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table">
    <thead>
        <tr class="-disabled">
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr disabled="disabled">
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table">
    <thead>
        <tr class="-row--success">
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr class="-row--success">
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table">
    <thead>
        <tr class="-row--warning">
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr class="-row--warning">
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table">
    <thead>
        <tr class="-row--danger">
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr class="-row--danger">
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table">
    <thead>
        <tr class="-row--info">
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr class="-row--info">
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table">
    <thead>
        <tr>
            <th class="-sorted -ascending">
                <div>Name</div>
            </th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table">
    <thead>
        <tr>
            <th class="-sorted -descending">
                <div>Name</div>
            </th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table">
    <thead>
        <tr>
            <th class="-text--left">Name</th>
            <th class="-text--center">ID</th>
            <th class="-text--right">Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr class="-md">
            <td class="-text--left">Name 1</td>
            <td class="-text--center">name-1</td>
            <td class="-text--right">2020 3:26 PM</td>
        </tr>
        <tr class="-md">
            <td class="-text--left">Name 2</td>
            <td class="-text--center">name-2</td>
            <td class="-text--right">2020 3:26 PM</td>
        </tr>
        <tr class="-md">
            <td class="-text--left">Name 3</td>
            <td class="-text--center">name-3</td>
            <td class="-text--right">2020 3:26 PM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table -xs">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table -sm">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table -md">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table -lg">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

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


<table class="chi-table -xl">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name 1</td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>name-3</td>
            <td>Nov 5, 2020 10:15 AM</td>
        </tr>
    </tbody>
</table>

Selectable #

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
<table class="chi-table">
  <thead>
      <tr>
          <th>
            <div class="chi-checkbox">
              <input class="chi-checkbox__input" type="checkbox" id="portal-chk-1" />
              <label class="chi-checkbox__label" for="portal-chk-1">
                <div class="-sr--only">Label</div>
              </label>
            </div>
          </th>
          <th class="-sorted -ascending">
              <div>Name</div>
          </th>
          <th>ID</th>
          <th>Last Login</th>
      </tr>
  </thead>
  <tbody>
      <tr class="-active">
          <td>
            <div class="chi-checkbox">
              <input class="chi-checkbox__input" type="checkbox" id="portal-chk-1-01" checked="checked" />
              <label class="chi-checkbox__label" for="portal-chk-1-01">
                <div class="-sr--only">Label</div>
              </label>
            </div>
          </td>
          <td>Name 1</td>
          <td>name-1</td>
          <td>Dec 18, 2020 3:26 PM</td>
      </tr>
      <tr>
          <td>
            <div class="chi-checkbox">
              <input class="chi-checkbox__input" type="checkbox" id="portal-chk-1-02" />
              <label class="chi-checkbox__label" for="portal-chk-1-02">
                <div class="-sr--only">Label</div>
              </label>
            </div>
          </td>
          <td>Name 2</td>
          <td>name-2</td>
          <td>Dec 18, 2020 2:38 AM</td>
      </tr>
      <tr>
          <td>
            <div class="chi-checkbox">
              <input class="chi-checkbox__input" type="checkbox" id="portal-chk-1-03" />
              <label class="chi-checkbox__label" for="portal-chk-1-03">
                  <div class="-sr--only">Label</div>
              </label>
            </div>
          </td>
          <td>Name 3</td>
          <td>name-3</td>
          <td>Nov 5, 2020 10:15 AM</td>
      </tr>
  </tbody>
</table>

Scrollable #

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
<section class="chi-table -fixed--header" style="height: 150px">
    <div>
        <table>
            <thead>
                <tr>
                    <th>
                        <div>Name</div>
                    </th>
                    <th>
                        <div>ID</div>
                    </th>
                    <th>
                        <div>Last Login</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name 1</td>
                    <td>name-1</td>
                    <td>Dec 18, 2020 3:26 PM</td>
                </tr>
                <tr>
                    <td>Name 2</td>
                    <td>name-2</td>
                    <td>Dec 18, 2020 2:38 AM</td>
                </tr>
                <tr>
                    <td>Name 3</td>
                    <td>name-3</td>
                    <td>Nov 5, 2020 10:15 AM</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

Two tier table header #

Location
High UtilizationElevated Utilization
Highest %
Total
%
Total
%
Location 1398%——98%
Location 2198%367%98%
Location 3——266%66%
Location 4——166%66%
<table class="chi-table">
    <colgroup>
        <col />
    </colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup>
        <col />
    </colgroup>
    <thead>
        <tr>
            <th class="-sorted -descending">
                <div>Location</div>
            </th>
            <th colspan="2" scope="colgroup">High Utilization</th>
            <th colspan="2" scope="colgroup">Elevated Utilization</th>
            <th class="-sorted -descending">
                <div>Highest %</div>
            </th>
        </tr>
        <tr>
            <td class="-th" scope="col"></td>
            <th class="-sorted -descending" scope="col">
                <div>Total</div>
            </th>
            <th class="-sorted -descending" scope="col">
                <div>%</div>
            </th>
            <th class="-sorted -descending" scope="col">
                <div>Total</div>
            </th>
            <th class="-sorted -descending" scope="col">
                <div>%</div>
            </th>
            <td class="-th" scope="col"></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="-text--normal" scope="row">Location 1</td>
            <td>3</td>
            <td>98%</td>
            <td>—</td>
            <td>—</td>
            <td>98%</td>
        </tr>
        <tr>
            <td class="-text--normal" scope="row">Location 2</td>
            <td>1</td>
            <td>98%</td>
            <td>3</td>
            <td>67%</td>
            <td>98%</td>
        </tr>
        <tr>
            <td class="-text--normal" scope="row">Location 3</td>
            <td>—</td>
            <td>—</td>
            <td>2</td>
            <td>66%</td>
            <td>66%</td>
        </tr>
        <tr>
            <td class="-text--normal" scope="row">Location 4</td>
            <td>—</td>
            <td>—</td>
            <td>1</td>
            <td>66%</td>
            <td>66%</td>
        </tr>
    </tbody>
</table>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon