README

Table

Basic web component to easily style any table. Components do not have any logic like sorting, filtering or actual pagination, but it provides an upgraded look and feel to a default table by just prefixing smb- to all table tags.

Example

Features

Easy usage by just prefixing smb- to all table tags
Modern look and feel for any table
Customizability by changing a Tailwind configuration
Toggable overlay when table is empty or you are loading information
Simple pagination component
Sorting icons and event to hook into user actions

Installation

npm install --save @simbuka/table

Usage

<!-- Simple table with pagination -->
<smb-table>
    <smb-thead>
        <smb-tr>
            <smb-th>
                Family name
            </smb-th>
            <smb-th>
                Given name
            </smb-th>
            <smb-th>
                Birth name
            </smb-th>
        </smb-tr>
    </smb-thead>

    <smb-tbody>
        <smb-tr>
            <smb-td>
                Green
            </smb-td>
            <smb-td>
                Tom
            </smb-td>
            <smb-td>
                1972-12-07
            </smb-td>
        </smb-tr>
        <smb-tr>
            <smb-td>
                Cooper
            </smb-td>
            <smb-td>
                Martin
            </smb-td>
            <smb-td>
                1993-01-22
            </smb-td>
        </smb-tr>
    </smb-tbody>

    <smb-pagination slot="pagination">
        Showing 2 - 11 (11 results were found in total)
    </smb-pagination>
</smb-table>

You can find more examples at src/index.html

Components

Events

Imortant! Components are using TailwindCSS for styling. You must install it manually.

Usage no npm install needed!