Welcome to the Notice System Demo
This banner notice is visible across all pages. Try navigating to different routes to see how notices follow you.
Advanced Data Table
Powered by Svelte 5 Runes - Row selection, column visibility, filtering, sorting, virtualization, and inline editing.
Users Table
50 total rows
ID | Name | Email | Role | Status | Department | Salary | Join Date | |
|---|---|---|---|---|---|---|---|---|
| 1 | User 1 | user1@example.com | Admin | active | Engineering | $121,194 | 2020-01-01 | |
| 2 | User 2 | user2@example.com | Editor | inactive | Marketing | $78,907 | 2020-02-02 | |
| 3 | User 3 | user3@example.com | Viewer | pending | Sales | $124,078 | 2020-03-03 | |
| 4 | User 4 | user4@example.com | Manager | active | Support | $50,245 | 2020-04-04 | |
| 5 | User 5 | user5@example.com | Admin | inactive | HR | $121,785 | 2020-05-05 | |
| 6 | User 6 | user6@example.com | Editor | pending | Engineering | $99,202 | 2020-06-06 | |
| 7 | User 7 | user7@example.com | Viewer | active | Marketing | $127,541 | 2020-07-07 | |
| 8 | User 8 | user8@example.com | Manager | inactive | Sales | $70,952 | 2020-08-08 | |
| 9 | User 9 | user9@example.com | Admin | pending | Support | $123,420 | 2020-09-09 | |
| 10 | User 10 | user10@example.com | Editor | active | HR | $52,460 | 2020-10-10 |
50 row(s) total
Rows per page
Page 1 of 5
Svelte 5 Native DataTable Features
Row Selection
Single or multi-row selection with checkbox column. Access selected rows via state.
Column Visibility
Toggle columns on/off via dropdown menu. Persists visibility state.
Global Search
Filter across all columns with debounced input. Supports server-side filtering.
Column Filters
Per-column text or faceted filters. Combine multiple filters.
Virtualization
Render 10,000+ rows efficiently. Only visible rows are in DOM.
Inline Editing
Double-click cells to edit in place. Keyboard navigation support.