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