Chi Documentation

Table

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>. Table header text must be wrapped in 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">
    <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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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