@simbuka/table v2.0.5

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.