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.

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

• smb-table
• smb-thead
• smb-tbody
• smb-th
• smb-td
• smb-table-pagination

Events

• onSortChange
• onPageChange

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