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