Tornado UI | » Tables Themes

Sass Customize

in order to edit the Tables you can use the css classes to overide the theme or you can edit it with sass src/SCSS/components/_tables.scss

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.

Head Line 01	Table Head 02	Column 3 Head
Column Number 01	Column Number 02	Column Number 03
Column Number 01	Column Number 02	Column Number 03

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

Head Line 01	Table Head 02	Column 3 Head
Column Number 01	Column Number 02	Column Number 03

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

Style Type	Head Placeholder	Column 3 Head
Bordered Theme	Striped Mode	Column Number 03
Column Number 01	Column Number 02	Column Number 03

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

Style Type	Head Placeholder	Column 3 Head
Bordered Theme	Striped Mode	Column Number 03
Column Number 01	Column Number 02	Column Number 03
Column Number 01	Column Number 02	Column Number 03

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

Name	Job	Start Date	Email	Phone No.
Abdullah Ramadan	Manager	03/25/2010	[email protected]	002 0112 297 4539
Ocean W. Curtis	Assistant	07/18/2017	[email protected]	070 8206 9605
Robin J. Wise	Manager	06/25/2017	[email protected]	0800 181 5795
Vielka Q. Chapman	Assistant	02/11/2018	[email protected]	070 0981 8503
Uriel H. Guerrero	Designer	01/13/2017	[email protected]	0391 916 3600
Casey E. Hood	Frontend	04/14/2016	[email protected]	(018013) 26699

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

Primary Background	Normal Headline	Secondary Headline
Striped Row	Normal Column	Information
Secondary Light	Normal Background	Danger Light
Complete Row Color	Column Number 02	Column Number 03

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