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