Vanilla Breeze

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 Email Department Hired
Alice Chen [email protected] Engineering Mar 15, 2021
Bob Martinez [email protected] Marketing Jul 22, 2020
Carol Johnson [email protected] Sales Nov 1, 2019
David Kim [email protected] Engineering Jan 10, 2022
Emma Wilson [email protected] Design Sep 5, 2021
Frank Brown [email protected] Support Apr 18, 2020
Grace Lee [email protected] Engineering Feb 28, 2023
Henry Davis [email protected] Finance Jun 12, 2018
Ivy Thomas [email protected] Marketing Aug 30, 2022
Jack White [email protected] 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-selectable on rows
Enables row selection with checkboxes. Works with data-action="select-all" and data-action="select-row".
[data-bulk-actions]
Container that appears when rows are selected. Use with [data-selected-count] to show selection count.
data-sort-value on cells
Provides a sortable value different from display text (e.g., ISO date vs. formatted date).
↑