Chi Design System
Tables
Tables must be wrapped inside a section with the a-table class and a div. The table must have the cellpadding and the cellspacing set to 0. Also, the table headers must be inside a div element.
|
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: 640px">
<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>If section height is lower than table height then the table headers are going to be fixed on top and the content can be scrolled.
|
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: 640px;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>Tables can be bordered with the modifier -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: 640px">
<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>Or borderless using the modifier -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: 640px">
<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>The table can be striped with the modifier -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: 640px">
<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>And we can enable a hover state over the rows.
|
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: 640px">
<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>There are modifiers for the rows to express different states. For example we can disable a row with 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: 640px">
<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>or just use the following classes:
rowSuccessrowWarningrowDangerrowInfo
|
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: 640px">
<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>|
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: 640px">
<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>|
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: 640px">
<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>|
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: 640px">
<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>Sometimes we need to express that a column is sorted. For that, we have to use the column header modifier -sorted in conjunction of one of the followin modifiers:
-ascending-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" style="width: 640px">
<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>|
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: 640px">
<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>Last but not least we could use size modifiers.
-small-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" style="width: 640px">
<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>|
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: 640px">
<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>All the different modifiers can be combined in order 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: 640px">
<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>