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