TABLES THEMES

Tables are a nice way to organize data. Tornado provide a few utility classes to help you style your table easily as possible and you can use js/typescript method to create data table from any table.

TABLES THEME

in order to apply tornado css on the table give a class name table to you’r html table tag see the example below.

<table class="table">
    <thead>
        <tr>
            <th>Head Line 01</th>
            <th>Table Head 02</th>
            <th>Column 3 Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column Number 01</td>
            <td>Column Number 02</td>
            <td>Column Number 03</td>
        </tr>
        <tr>
            <td>Column Number 01</td>
            <td>Column Number 02</td>
            <td>Column Number 03</td>
        </tr>
    </tbody>
</table>

RESPONSIVE TABLE

responsive table is a horizontally scrollable Table on smaller screen widths start from 800px and down ,to create your table to a responsive table create a container and give it a class name responsive-table and for a only mobile devices give the class name responsive-sm-table.

<div class="responsive-table">
    <table class="table">
        <thead>
            <tr>
                <th>Head Line 01</th>
                <th>Table Head 02</th>
                <th>Column 3 Head</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column Number 01</td>
                <td>Column Number 02</td>
                <td>Column Number 03</td>
            </tr>
        </tbody>
    </table>
</div>

BORDERED TABLE

one of the most common theme for is the bordered table and to apply this theme all you have to do is add to the table another class name bordered see the example below.

<div class="responsive-table">
    <table class="table bordered">
        <thead>
            <tr>
                <th>Style Type</th>
                <th>Head Placeholder</th>
                <th>Column 3 Head</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bordered Theme</td>
                <td>Striped Mode</td>
                <td>Column Number 03</td>
            </tr>
            <tr>
                <td>Column Number 01</td>
                <td>Column Number 02</td>
                <td>Column Number 03</td>
            </tr>
        </tbody>
    </table>
</div>

STRIPED TABLE

striped table mode in order to apply this theme all you have to do is add to the table another class name striped and it works fine with the bordered mode … see the example below.

<div class="responsive-table">
    <table class="table striped">
        <thead>
            <tr>
                <th>Style Type</th>
                <th>Head Placeholder</th>
                <th>Column 3 Head</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bordered Theme</td>
                <td>Striped Mode</td>
                <td>Column Number 03</td>
            </tr>
            <tr>
                <td>Column Number 01</td>
                <td>Column Number 02</td>
                <td>Column Number 03</td>
            </tr>
            <tr>
                <td>Column Number 01</td>
                <td>Column Number 02</td>
                <td>Column Number 03</td>
            </tr>
        </tbody>
    </table>
</div>

DATA TABLES

to activate Data-Table you can add class name data-table to the table and if you need to customize the data table functionality and options you can use the typescript method in the typescript document.

<!-- Data Table -->
<div class="responsive-table">
    <!-- Table -->
    <table class="table striped data-table">
        <!-- Table Head -->
        <thead>
            <tr>
                <th>Name</th>
                ....
            </tr>
        </thead>
        <!-- Content -->
        <tbody>
            <!-- Row -->
            <tr>
                <td>Abdullah Ramadan</td>
                ....
            </tr>
            ....
        </tbody>
        <!-- // Content -->
    </table>
    <!-- // Table -->
</div>
<!-- // Data Table -->

COLORING TABLES

in order to color a complete table or just a row of it or even one column you can use Colors Classes Witch you can find all of them in the utilities section see the example below.

<div class="responsive-table">
    <table class="table striped">
        <thead>
            <tr class="primary-bg">
                <th>Primary Background</th>
                <th>Normal Headline</th>
                <th>Secondary Headline</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Striped Row</td>
                <td>Normal Column</td>
                <td>Information</td>
            </tr>
            <tr>
                <td class="secondary-bg-light">Secondary Light</td>
                <td>Normal Background</td>
                <td class="danger-bg-light">Danger Light</td>
            </tr>
            <tr class="success-bg-light">
                <td>Complete Row Color</td>
                <td>Column Number 02</td>
                <td>Column Number 03</td>
            </tr>
        </tbody>
    </table>
</div>