Table

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

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

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

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

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

Portal

Enable portal styling by applying class -portal. To display a row in active / selected state, apply class -active to the tr.

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
<table class="chi-table -portal">
    <thead>
        <tr class="-sm">
            <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
    </thead>
    <tbody>
        <tr class="-lg">
            <td><a href="#">Name 1</a></td>
            <td>name-1</td>
            <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr class="-lg">
            <td><a href="#">Name 2</a></td>
            <td>name-2</td>
            <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr class="-active -lg">
            <td><a href="#">Name 3</a></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.

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

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

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

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

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

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 2020 3:26 PM
Name 2 name-2 2020 3:26 PM
Name 3 name-3 2020 3:26 PM
<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.

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

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

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

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

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
<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
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
<table class="chi-table">
  <thead>
      <tr>
          <th>
            <div class="chi-checkbox">
              <input class="chi-checkbox__input" type="checkbox" id="chk-1" />
              <label class="chi-checkbox__label" for="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="chk-1-01" checked="checked" />
              <label class="chi-checkbox__label" for="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="chk-1-02" />
              <label class="chi-checkbox__label" for="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="chk-1-03" />
              <label class="chi-checkbox__label" for="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>

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
<table class="chi-table -portal">
  <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

If the section height is smaller than the table height, the table header will be fixed positioned and content will scroll. Tables must be wrapped in a <section class="chi-table -fixed--header">

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

Scrollable

If the section height is smaller than the table height, the table header will be fixed positioned and content will scroll. Tables must be wrapped in a <section class="chi-table -fixed--header">

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
<section class="chi-table -portal -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 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%
<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>

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%
<table class="chi-table -portal">
    <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>

Table with header cells in the top row and first column

Title
ABQ1 ABY1 AKN4 ANT1 ANT2 ATL12 ATL14 AUS1 AUS3 BCH1 BER1
ABQ1 52 52 52 52 52 52 52 52 52 52 52
ABY1 42 42 42 42 42 42 42 42 42 42 42
AKN4 127 127 127 127 127 127 127 127 127 127 127
ANT1 21 21 21 52 21 21 21 21 21 21 21
ANT2 136 136 136 136 136 136 136 136 136 180 136
ATL12 164 164 164 164 164 164 164 164 164 164 164
ATL14 52 52 52 52 52 52 52 52 52 52 52
AUS1 52 52 52 52 52 52 52 52 52 52 52
AUS3 32 32 32 32 32 32 32 32 32 32 32
BCH1 21 21 21 21 21 21 21 21 21 21 21
BER1 31 31 31 31 31 31 31 31 31 31 31
<div class="chi-card">
    <div class="chi-card__header">
        <div class="chi-card__title">Title</div>
    </div>
    <div class="chi-card__content -p--0">
        <div class="-p--2">
            <div class="chi-picker-group">
                <div class="chi-picker-group__content"><input class="chi-picker__input" id="unique-id-ba1" type="radio" name="unique-name-ba" checked="checked" /><label for="unique-id-ba1">Option 1</label><input class="chi-picker__input" id="unique-id-ba2" type="radio" name="unique-name-ba" /><label for="unique-id-ba2">Option 2</label><input class="chi-picker__input" id="unique-id-ba3" type="radio" name="unique-name-ba" /><label for="unique-id-ba3">Option 3</label></div>
            </div>
        </div>
        <div class="-overflow--auto">
            <table class="chi-table -bordered -striped -xs -text--center">
                <tbody>
                    <tr>
                        <td class="-th"></td>
                        <th scope="col">ABQ1</th>
                        <th scope="col">ABY1</th>
                        <th scope="col">AKN4</th>
                        <th scope="col">ANT1</th>
                        <th scope="col">ANT2</th>
                        <th scope="col">ATL12</th>
                        <th scope="col">ATL14</th>
                        <th scope="col">AUS1</th>
                        <th scope="col">AUS3</th>
                        <th scope="col">BCH1</th>
                        <th scope="col">BER1</th>
                    </tr>
                    <tr>
                        <th scope="row">ABQ1</th>
                        <td class="-bg--info-light">52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                    </tr>
                    <tr>
                        <th scope="row">ABY1</th>
                        <td>42</td>
                        <td>42</td>
                        <td>42</td>
                        <td>42</td>
                        <td>42</td>
                        <td>42</td>
                        <td>42</td>
                        <td>42</td>
                        <td>42</td>
                        <td>42</td>
                        <td>42</td>
                    </tr>
                    <tr>
                        <th scope="row">AKN4</th>
                        <td>127</td>
                        <td>127</td>
                        <td>127</td>
                        <td>127</td>
                        <td>127</td>
                        <td>127</td>
                        <td>127</td>
                        <td>127</td>
                        <td>127</td>
                        <td>127</td>
                        <td>127</td>
                    </tr>
                    <tr>
                        <th scope="row">ANT1</th>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td class="-bg--danger-lighter -b--1 -b--danger">52</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                    </tr>
                    <tr>
                        <th scope="row">ANT2</th>
                        <td>136</td>
                        <td>136</td>
                        <td>136</td>
                        <td>136</td>
                        <td>136</td>
                        <td>136</td>
                        <td>136</td>
                        <td>136</td>
                        <td>136</td>
                        <td class="-bg--warning-lighter -b--1 -b--warning">180</td>
                        <td>136</td>
                    </tr>
                    <tr>
                        <th scope="row">ATL12</th>
                        <td>164</td>
                        <td>164</td>
                        <td>164</td>
                        <td>164</td>
                        <td>164</td>
                        <td>164</td>
                        <td>164</td>
                        <td>164</td>
                        <td>164</td>
                        <td>164</td>
                        <td>164</td>
                    </tr>
                    <tr>
                        <th scope="row">ATL14</th>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                    </tr>
                    <tr>
                        <th scope="row">AUS1</th>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                        <td>52</td>
                    </tr>
                    <tr>
                        <th scope="row">AUS3</th>
                        <td>32</td>
                        <td>32</td>
                        <td>32</td>
                        <td>32</td>
                        <td>32</td>
                        <td>32</td>
                        <td>32</td>
                        <td>32</td>
                        <td>32</td>
                        <td>32</td>
                        <td>32</td>
                    </tr>
                    <tr>
                        <th scope="row">BCH1</th>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                        <td>21</td>
                    </tr>
                    <tr>
                        <th scope="row">BER1</th>
                        <td>31</td>
                        <td>31</td>
                        <td>31</td>
                        <td>31</td>
                        <td>31</td>
                        <td>31</td>
                        <td>31</td>
                        <td>31</td>
                        <td>31</td>
                        <td>31</td>
                        <td>31</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon