Table

Description

Table is a way to represent a list of data in the screen. The table component has the same HTML structure of the table element.

Code Examples

These are some examples for component:

<!-- Table structure -->
<table class="tui-table">
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>...</th>
        </tr>
    </tfoot>
</table>

<!-- Table hovered -->
<table class="tui-table hovered-cyan">
    ...
</table>

<!-- Table striped -->
<table class="tui-table striped-purple">
    ...
</table>

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-table	Creates a tui table
.hovered-blue	Creates a blue hover table style
.hovered-green	Creates a green hover table style
.hovered-cyan	Creates a cyan hover table style
.hovered-red	Creates a red hover table style
.hovered-purple	Creates a purple hover table style
.hovered-yellow	Creates a yellow hover table style
.hovered-white	Creates a white hover table style
.hovered-orange	Creates a orange hover table style
.striped-blue	Creates a blue striped table style
.striped-green	Creates a green striped table style
.striped-cyan	Creates a cyan striped table style
.striped-red	Creates a red striped table style
.striped-purple	Creates a purple striped table style
.striped-yellow	Creates a yellow striped table style
.striped-white	Creates a white striped table style
.striped-orange	Creates a orange striped table style