Full-featured Demo
A music library with 10 000 rows demonstrating:
- Responsive layouts — three CSS grid layouts (
single-line,three-row,single-column) that switch automatically as the container resizes - Filtering — text, number, and multi-select (
Language) filters applied locally - Toolbar and footer slots — title and record count in the toolbar; active layout indicator in the footer
postRender— the shuffle icon in the Favorite column is a clickable Vue component injected viapostRendertransform— the second Year column appliesv % 100to show the two-digit year
Sorting — click any column header to sort ascending; click again for descending; a third click clears the sort. Hold Shift and click additional headers to add secondary sort keys. See Sorting.
Filtering — type in the filter row below the headers to filter by text or number. The Language column uses a multi-select filter. Filters are combined with AND logic. See Filtering.
Selection — long-press a row (or Shift+click) to enter selection mode. Click rows to toggle them. The status bar shows the count and lets you invert the selection or cancel. The three-row layout adds a checkbox next to the delete icon; the other two layouts disable selection. See Selection.
Try dragging the window narrower to watch the layout switch automatically between the three responsive views.
