Chi Documentation
Tables
Tables are used to present data sets in a simple and organized way.
Requirements
Tables must be wrapped in a <section class="a-table">
with a nested <div>. The table must have the
cellpadding and the cellspacing set to 0
and table header text must be wrapped with a <div>.
Examples
Base
|
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="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Scrollable
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="width: 100%;height: 144px;">
<div>
<table cellpadding="0" cellspacing="0">
<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>Bordered
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Borderless
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Striped
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Hover
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Row States
Chi offers a wide variety of modifiers to express different row states.
Disabled
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Success
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Warning
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Danger
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Info
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Column Sorting
To express column sorting, apply the class -sorted with one of
the following modifiers: -ascending or -descending.
Ascending
|
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Descending
|
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="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Additional Sizes
Chi also supports additional table sizes which can be configured by
applying the modifier class -small or -large.
Small
|
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>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 -large" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<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>Selectable
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" style="width: 100%">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="48px">
<div class="-lh1"><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="-lh1"><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="-lh1"><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="-lh1"><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>