Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Tables Themes - Tornado UI

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.

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>

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.