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 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-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).
↑