Table Interactive Examples
Enhanced table features with sorting, filtering, pagination, and row selection using the data-table component.
Full-Featured Interactive Table
This example demonstrates all interactive features: sortable columns, text filtering, pagination, row selection, and bulk actions.
0 rows selected
| Name | Department | Hired | ||
|---|---|---|---|---|
| Alice Chen | alice.chen@company.com | Engineering | Mar 15, 2021 | |
| Bob Martinez | bob.martinez@company.com | Marketing | Jul 22, 2020 | |
| Carol Johnson | carol.johnson@company.com | Sales | Nov 1, 2019 | |
| David Kim | david.kim@company.com | Engineering | Jan 10, 2022 | |
| Emma Wilson | emma.wilson@company.com | Design | Sep 5, 2021 | |
| Frank Brown | frank.brown@company.com | Support | Apr 18, 2020 | |
| Grace Lee | grace.lee@company.com | Engineering | Feb 28, 2023 | |
| Henry Davis | henry.davis@company.com | Finance | Jun 12, 2018 | |
| Ivy Thomas | ivy.thomas@company.com | Marketing | Aug 30, 2022 | |
| Jack White | jack.white@company.com | Sales | Dec 3, 2021 |
Event Monitor
Events dispatched by the table component:
Features Demonstrated
data-filterable- Adds a search input that filters rows in real-time. The filter checks all cell content.
data-paginate="5"- Limits visible rows to 5 per page with automatic pagination controls.
th[data-sort="type"]- Makes columns sortable. Supported types:
string,number,date. data-selectableon rows- Enables row selection with checkboxes. Works with
data-action="select-all"anddata-action="select-row". [data-bulk-actions]- Container that appears when rows are selected. Use with
[data-selected-count]to show selection count. data-sort-valueon cells- Provides a sortable value different from display text (e.g., ISO date vs. formatted date).