Table
A table component.
Examples
Simple Table
A simple table component.
ID | Name | Role |
|---|---|---|
| 1 | John Doe | Admin |
| 2 | Jane Smith | Editor |
| 3 | Bob Johnson | Viewer |
Actions & Pagination
A table with actions and pagination.
Manage Users
User Name | Status | Last Login | Actions |
|---|---|---|---|
| Kamal Singh | Active | 2 mins ago | |
| Rahul Verma | Inactive | 2 days ago | |
| Sneha Gupta | Active | 1 hour ago |
Showing 1 - 5 of 100
Full Features (Search + Sort)
A full featured table component.
All Employees
Name | Email Address | Role | Salary ($) |
|---|---|---|---|
| Alice | Dev | 90000 | |
| Bob | Design | 85000 | |
| Charlie | Manager | 120000 | |
| David | Dev | 95000 |
Showing 1 - 4 of 4
Last Sort Event: null
Installation
npx wdc add data-tableAPI Reference
| Input | Type | Default | Description |
|---|---|---|---|
| data | any[] | required | Array of data objects to display in the table rows. |
| columns | TableColumn[] | required | Configuration array defining column keys, labels, widths, and sortability. |
| title | string | '' | Optional title displayed above the table. |
| loading | boolean | false | Shows a loading overlay/spinner on top of the table data. |
| searchable | boolean | false | Enables the search input field in the top toolbar. |
| withPagination | boolean | false | Enables the pagination footer, including page numbers and limit selector. |
| totalItems | number | 0 | Total count of records (server-side) required for pagination logic. |
| limit | number | 10 | Number of rows to display per page. |
| currentPage | number | 1 | The current active page number. |
| pageSizes | number[] | [5, 10, 20, 50, 100] | Array of options available in the "Rows per page" dropdown. |
| pageChange | Event<number> | - | Emits the new page number when pagination buttons are clicked. |
| limitChange | Event<number> | - | Emits the new limit when "Rows per page" is changed. |
| searchChange | Event<string> | - | Emits the search query string on input change. |
| sortChange | Event<SortEvent> | - | Emits column key and direction when a header is clicked. |
| wdcCell | Directive | - | Structural directive to provide custom templates for specific columns (e.g. *wdcCell="status"). |