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, date, and multi-select (
Languages) filters applied locally - Toolbar and footer slots — title, buttons that append 1 or 1000 records, and the record count in the toolbar; library name and active layout indicator in the footer
#groupActionsslot — the red delete icon in the selection status bar removes every selected recordpostRender— the shuffle icon in the Favorite column is a clickable Vue component injected viapostRender; see the Cookbook for the same pattern as a standalone recipetransform— 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 Languages 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. Each layout shows selection differently: single-line has a dedicated checkbox column that appears only while selection is active, three-row puts the checkbox next to the delete icon in the same cell, and single-column marks selected rows with a background colour. See Selection.
Use the Stretch grid to window button above the grid, or drag the window narrower, to watch the layout switch automatically between the three responsive views.
