Table

Fire UI's table is designed to fullfill any problems related to table. To use only Fire UI table feature, copy and paste this stylesheet link into your head element to load Fire UI table CSS.

<link rel="stylesheet" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/src/feature/Table/table.css">

Overview

This is how table look in Fire-UI :

No	First Name	Last Name
1	Mike	Thompson
2	John	Sayers

<table>
    <thead>
        <tr>
            <td>No</td>
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mike</td>
            <td>Thompson</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Sayers</td>
        </tr>
    </tbody>
</table>

Variations

Fire-UI tables are designed from simple to complex.

Full Width Table

Use .table-full-width in table's class to create a full width table

No	First Name	Last Name
1	Mike	Thompson
2	John	Sayers

<table class="table-full-width">
    ....
</table>

Fixed Width Table

Simply add .table-fixed-width in table's class to create a fixed width table

No	First Name	Last Name
1	Mike	Thompson
2	John	Sayers

<table class="table-fixed-width">
    ....
</table>

Bordered Table

Does Fire-UI's table has border? Yes! Simply add .table-border in table's class to create a border between columns and rows!

No	First Name	Last Name
1	Mike	Thompson
2	John	Sayers

<table class="table-border">
    ....
</table>