Vue Data Grid with Filtering

Use DomDataGrid for tables of records people scan, sort, filter, select and edit: admin lists, database tables, ledgers, logs and spreadsheet-style screens. It handles virtual scrolling, typed filters, sorting, row selection, inline editing, range copy and paste, grouping with totals, pinned columns and CSV or Excel export.

The grid never changes your data. It renders the rows you pass, reports what the person did through events, and leaves saving to you.

The grid uses DOM Studio's styles and one custom element for its popovers. Set both up once per app, as the package README describes: import @getdom/studio/style.css (or @getdom/studio/tailwind.css from your own Tailwind stylesheet), and tell Vue that tags starting with dom- are custom elements in vite.config.js:

The grid starts as a full spreadsheet. Turn off what a simple list doesn't need.

Currency cells drop the minor units at 1,000 and above (£1,235). Pass format and formatAggregate when you need exact amounts such as $1,234.50.

Each column is a plain object. key is required and is also the row property to read unless you set field or accessor. The column type decides sorting, formatting, alignment, the filter control and the editor.

Useful column options:

• options on select columns: strings or { label, value, tone } objects. tone (green, amber, red, blue) colours the status pill. Always supply options on large data sets; otherwise the grid scans every row to find them.
• format(value, row, column) returns the display text. Global search matches this text, not the raw value.
• accessor(row, column) computes a value, such as quantity * price. Columns with an accessor are read-only.
• sortAccessor(row, column) sorts by something other than the cell value.
• sortable: false, filterable: false, searchable: false, resizable: false, exportable: false and hidden: true turn features off per column.
• pinned: 'left' or 'right' keeps the column in view while the grid scrolls sideways.
• component renders every cell with your Vue component. It receives row, column, value, formatted, rowIndex and rowKey, can emit update:value to change the cell and action to send a command, which the grid re-emits as cell-action.

Store dates as YYYY-MM-DD strings or Date objects. Strings in that form sort, filter and format correctly and are the cheapest to sort.

Clicking a sortable header cycles ascending, descending, then unsorted. With multi-sort, each header click adds or changes a rule in sort.rules, which a server can translate into a multi-column ORDER BY.

Sorting, search and filters are controlled props, so you can set them from your own controls and keep them in the URL or a store:

• sort is { key, direction } with direction 'asc', 'desc' or '', or { rules: [...] }.
• search matches the formatted text of every searchable column.
• filters is keyed by column key. Select columns take { type: 'select', values: ['paid', 'shipped'] }, number and currency columns { min, max }, date columns { start, end }, boolean columns { value: true }, and text columns { value: 'atlas', operator: 'contains' } with operator 'contains', 'starts' or 'equals'.

Filters applied from your own controls also show as chips in the toolbar and on the column header, and "Clear filters" clears them.

Editing takes two steps: let the cells be edited, then write each change back to your rows.

• editable lets every plain column be edited. Set editable: false on a column to lock it, or editable: true to allow just that column. A function editable(row, column) decides per cell.
• People double-click a cell to edit it. Add cell-selection for keyboard editing: the grid body becomes one Tab stop, the first arrow key picks a cell, arrow keys move between cells, Enter, F2 or typing starts an edit, Enter saves and moves down, Tab saves and moves right, leaving the cell saves, and Escape cancels.
• Select columns edit with a native select that includes an empty "-" choice. Add validate if the value is required.
• cell-selection also adds range selection, copy, cut, paste from Excel or Google Sheets, Delete to clear, and undo or redo.
• validate(value, row, column) returns true or an error message, which is shown and keeps the old value. Add a check for empty text if a column must not be blank.
• parse(text, column) converts typed or pasted text before validation.
• cell-update fires once per changed cell with { row, column, rowIndex, rowKey, value, previousValue, source }. cells-update fires once per edit, paste, delete, undo or redo with every change, so you can save a batch in one request.

Edits change your rows, and sorting, grouping, filters and totals follow, because the grid reads from them.

Rows have checkboxes by default. Bind v-model:selected-keys to read or set the selection. Keys come from row-key, which defaults to the id field; pass a field name or a function when your rows use another key.

The header checkbox selects or clears every row that matches the current search and filters, including rows that are scrolled out of view.

• group-by takes a column key, or an array of keys for nested groups. Each group row shows its value, a row count and the aggregate of every column that sets aggregate.
• aggregate is 'sum', 'avg', 'count', 'min', 'max' or a function (values, rows, column).
• show-totals adds a totals row pinned to the bottom with the same aggregates over all filtered rows.
• groups-expanded sets whether groups start open. The template ref methods expandAllGroups() and collapseAllGroups() open or close all of them.
• column-menu adds a menu to every header so people can group by or pin any column themselves.

exportable adds an Export menu to the toolbar with CSV and Excel (.xlsx) downloads. Exports contain the filtered, sorted rows with typed numbers, dates and currency. To export from your own button, call exportCsv() or exportExcel() from the toolbar-actions slot props or a template ref:

Use exportable: false to leave a column out, and exportValue(value, row, column) to change what is exported and copied.

Add virtual-rows for in-memory data sets above a few hundred rows. Only the rows in view, plus virtual-row-buffer rows above and below, are mounted, and search, filters, sorting, grouping and selection still cover every row. Rows have a fixed height from the density; set virtual-row-height if your custom cells are taller.

For speed on large sets, supply options on select columns and keep dates as YYYY-MM-DD strings.

Set remote when a server does the searching, filtering, sorting and paging. The grid then renders rows exactly as given and fires query-change with { search, filters, sort } whenever the person changes them.

total-rows sets the count in the toolbar. viewport-end fires near the bottom of the scroll area for cursor-based loading.

A resource API can take the query as it comes, with paging beside it. The same endpoint can serve numbered pages and cursor-based scrolling:

With toolbar on, the grid shows the title, a search box, filter chips with "Clear filters", the toolbar-actions slot, the Export menu when exportable is set, and a count such as "1,243 of 10,000 orders" using resource-label. The footer shows the column count, "N selected" when rows are selected, and short notices such as "Exported 1243 rows to CSV". Set :toolbar="false" to supply your own.

• Drag a header divider to resize a column; right-pinned columns resize from their left edge. Resizing starts from the displayed width and keeps the other column widths steady. Spare space remains empty instead of stretching the columns, and min-column-width limits how far a column can shrink.
• layout="flush" removes the outer border, rounding and shadow for edge-to-edge pages; gutter-class aligns the outer cell padding with your page gutter.
• Narrow screens scroll the table sideways inside its frame, and pinned columns unpin themselves when they would leave too little room to scroll.
• Use the cell slot for one-off cell rendering, toolbar-actions for buttons next to search, and empty for a custom empty state.

2,500 positions grouped by desk, with Ticker pinned left and P&L pinned right. Click a cell and use the arrow keys, drag a range to see its sum, double-click or type to edit, paste from a spreadsheet, and export the current view to Excel.

Column filters use typed controls: date columns open a date range, number columns use min and max, and select columns use checklists. Applied filters show in both the header and the toolbar.

layout="flush" with gutter-class="px-4 sm:px-6" lines the toolbar, footer and outer cells up with the page gutter.

10,000 rows held in memory. Search, filters and sorting cover every row, and only the visible rows are mounted.

multi-sort turns header clicks into ordered sort rules. Click Volume, then Difficulty, to sort by both.

One resource endpoint serves numbered pages and cursor-based scrolling. The grid sends search, filters and sort; the app adds paging.

New rows stream into a server-backed grid while search, filters and a duration_ms desc sort keep the slowest statements on top.