Tables are used to present data sets in a simple and organized way.
Tables must be wrapped in a <section class="a-table">
with a nested <div>. Table header text must be
wrapped in a <div>.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>If the section height is smaller than the table
height, the table header will be fixed positioned and
content will scroll.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="height: 144px;">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Tables can be bordered by applying the modifier class -bordered.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -bordered">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Remove all borders by applying the modifier class -borderless.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -borderless">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Alternate the table row color by applying the modifier class -striped.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -striped">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Enable a hover state by applying the modifier class -hover.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -hover">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Chi offers a wide variety of modifiers to express different row states.
Disable a row by applying the attribute disabled="disabled".
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr disabled="disabled">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Render a success state by applying the modifier class -rowSuccess.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr class="-rowSuccess">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Render a warning state by applying the modifier class -rowWarning.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr class="-rowWarning">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Render a danger state by applying the modifier class -rowDanger.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr class="-rowDanger">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Render an info state by applying the modifier class -rowInfo.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr class="-rowInfo">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>To express column sorting, apply the class -sorted with one of
the following modifiers: -ascending or -descending.
|
name
|
ID
|
last login
|
|---|---|---|
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| David Navarro | david | Dec 18, 2017 3:26 PM |
<section class="a-table">
<div>
<table>
<thead>
<tr>
<th class="-sorted -ascending">
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
</tbody>
</table>
</div>
</section>|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table">
<div>
<table>
<thead>
<tr>
<th class="-sorted -descending">
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Chi also supports additional table sizes which can be configured by
applying the modifier class -small or -large.
|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -small">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>|
name
|
ID
|
last login
|
|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -large">
<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>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>Combine several different modifiers to create complex and beautiful tables.
|
name
|
ID
|
last login
|
|
|---|---|---|---|
| David Navarro | david | Dec 18, 2017 3:26 PM | |
| Diego Sanjuan | diego | Dec 18, 2017 2:38 AM | |
| Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table">
<div>
<table>
<thead>
<tr>
<th>
<div class="-lh--1"><input class="a-input" type="checkbox" id="chk-1" /><label for="chk-1"></label></div>
</th>
<th class="-sorted -descending">
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr class="-rowWarning">
<td class="-lh--1"><input class="a-input" type="checkbox" id="chk-1-01" checked="checked" /><label for="chk-1-01"></label></td>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td class="-lh--1"><input class="a-input" type="checkbox" id="chk-1-02" /><label for="chk-1-02"></label></td>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td class="-lh--1"><input class="a-input" type="checkbox" id="chk-1-03" /><label for="chk-1-03"></label></td>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>