Design Kit

Table

Tables are used to present data sets in a simple and organized way.

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 
<table class="a-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last login</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>

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 
<table class="a-table -bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last login</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>

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 
<table class="a-table -borderless">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last login</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>

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 
<table class="a-table -striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last login</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>

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 
<table class="a-table -hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Last login</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>

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 
<table class="a-table">
    <thead>
        <tr class="-disabled">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</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>

Success

Render a success state by applying the modifier class -row--success.

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 
<table class="a-table">
    <thead>
        <tr class="-row--success">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>David Navarro</td>
            <td>david</td>
            <td>Dec 18, 2017 3:26 PM</td>
        </tr>
        <tr class="-row--success">
            <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>

Warning

Render a warning state by applying the modifier class -row--warning.

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 
<table class="a-table">
    <thead>
        <tr class="-row--warning">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>David Navarro</td>
            <td>david</td>
            <td>Dec 18, 2017 3:26 PM</td>
        </tr>
        <tr class="-row--warning">
            <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>

Danger

Render a danger state by applying the modifier class -row--danger.

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 
<table class="a-table">
    <thead>
        <tr class="-row--danger">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>David Navarro</td>
            <td>david</td>
            <td>Dec 18, 2017 3:26 PM</td>
        </tr>
        <tr class="-row--danger">
            <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>

Info

Render an info state by applying the modifier class -row--info.

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 
<table class="a-table">
    <thead>
        <tr class="-row--info">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>David Navarro</td>
            <td>david</td>
            <td>Dec 18, 2017 3:26 PM</td>
        </tr>
        <tr class="-row--info">
            <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>

Column Sorting

To express column sorting, apply the class -sorted with one of the following modifiers: -ascending or -descending.

Ascending

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 
<table class="a-table">
    <thead>
        <tr>
            <th class="-sorted -ascending">
                <div>Name</div>
            </th>
            <th>ID</th>
            <th>Last login</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>

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 
<table class="a-table">
    <thead>
        <tr>
            <th class="-sorted -descending">
                <div>Name</div>
            </th>
            <th>ID</th>
            <th>Last login</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>

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
David Navarro david 2017 3:26 PM
Diego Sanjuan diego 2017 3:26 PM
Manuel Martin manuel 2017 3:26 PM 
<table class="a-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">David Navarro</td>
            <td class="-text--center">david</td>
            <td class="-text--right">2017 3:26 PM</td>
        </tr>
        <tr class="-md">
            <td class="-text--left">Diego Sanjuan</td>
            <td class="-text--center">diego</td>
            <td class="-text--right">2017 3:26 PM</td>
        </tr>
        <tr class="-md">
            <td class="-text--left">Manuel Martin</td>
            <td class="-text--center">manuel</td>
            <td class="-text--right">2017 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
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 
<table class="a-table">
    <thead>
        <tr class="-xs">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr class="-xs">
            <td>David Navarro</td>
            <td>david</td>
            <td>Dec 18, 2017 3:26 PM</td>
        </tr>
        <tr class="-xs">
            <td>Diego Sanjuan</td>
            <td>diego</td>
            <td>Dec 18, 2017 2:38 AM</td>
        </tr>
        <tr class="-xs">
            <td>Manuel Martin</td>
            <td>manuel</td>
            <td>Nov 5, 2017 10:15 AM</td>
        </tr>
    </tbody>
</table>

Size -sm

Render a -sm size by applying the modifier class -sm.

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 
<table class="a-table">
    <thead>
        <tr class="-sm">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr class="-sm">
            <td>David Navarro</td>
            <td>david</td>
            <td>Dec 18, 2017 3:26 PM</td>
        </tr>
        <tr class="-sm">
            <td>Diego Sanjuan</td>
            <td>diego</td>
            <td>Dec 18, 2017 2:38 AM</td>
        </tr>
        <tr class="-sm">
            <td>Manuel Martin</td>
            <td>manuel</td>
            <td>Nov 5, 2017 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
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 
<table class="a-table">
    <thead>
        <tr class="-md">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr class="-md">
            <td>David Navarro</td>
            <td>david</td>
            <td>Dec 18, 2017 3:26 PM</td>
        </tr>
        <tr class="-md">
            <td>Diego Sanjuan</td>
            <td>diego</td>
            <td>Dec 18, 2017 2:38 AM</td>
        </tr>
        <tr class="-md">
            <td>Manuel Martin</td>
            <td>manuel</td>
            <td>Nov 5, 2017 10:15 AM</td>
        </tr>
    </tbody>
</table>

Size -lg

Render a -lg size by applying the modifier class -lg.

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 
<table class="a-table">
    <thead>
        <tr class="-lg">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr class="-lg">
            <td>David Navarro</td>
            <td>david</td>
            <td>Dec 18, 2017 3:26 PM</td>
        </tr>
        <tr class="-lg">
            <td>Diego Sanjuan</td>
            <td>diego</td>
            <td>Dec 18, 2017 2:38 AM</td>
        </tr>
        <tr class="-lg">
            <td>Manuel Martin</td>
            <td>manuel</td>
            <td>Nov 5, 2017 10:15 AM</td>
        </tr>
    </tbody>
</table>

Size -xl

Render a -xl size by applying the modifier class -xl.

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 
<table class="a-table">
    <thead>
        <tr class="-xl">
            <th>Name</th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr class="-xl">
            <td>David Navarro</td>
            <td>david</td>
            <td>Dec 18, 2017 3:26 PM</td>
        </tr>
        <tr class="-xl">
            <td>Diego Sanjuan</td>
            <td>diego</td>
            <td>Dec 18, 2017 2:38 AM</td>
        </tr>
        <tr class="-xl">
            <td>Manuel Martin</td>
            <td>manuel</td>
            <td>Nov 5, 2017 10:15 AM</td>
        </tr>
    </tbody>
</table>

Selectable
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 
<table class="a-table">
    <thead>
        <tr>
            <th>
                <div class="-lh--1"><input class="a-checkbox__input" type="checkbox" id="chk-1" /><label class="a-checkbox__label" for="chk-1"></label></div>
            </th>
            <th class="-sorted -ascending">
                <div>Name</div>
            </th>
            <th>ID</th>
            <th>Last login</th>
        </tr>
    </thead>
    <tbody>
        <tr class="-row--info">
            <td class="-lh--1"><input class="a-checkbox__input" type="checkbox" id="chk-1-01" checked="checked" /><label class="a-checkbox__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-checkbox__input" type="checkbox" id="chk-1-02" /><label class="a-checkbox__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-checkbox__input" type="checkbox" id="chk-1-03" /><label class="a-checkbox__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>

Scrollable

If the section height is smaller than the table height, the table header will be fixed positioned and content will scroll.

Requirements

Tables must be wrapped in a <section class="a-table -fixed--header">

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