developer guide
How-to guides
One task, one page: the least code that does it, a live example and the source on GitHub. Each guide shows a single grid feature on its own, not a whole dashboard.
Data
How to load a CSV file into a data grid
Fetch a CSV by URL or read one picked from disk; numbers and dates land typed.
runnable pageHow to virtual-scroll a million rows without pagination
Hand it a million rows and a rowKey; scrolling, sorting and filtering stay responsive.
runnable pageHow to stream live updates into a grid
Read a live feed as an async iterator; rows patch in place and changed cells flash.
runnable pageHow to query a Parquet file in the browser with DuckDB
Point a pushdown source at DuckDB; a sort or filter becomes one SQL statement over the file.
runnable pageHow to compare two extracts with audit mode
Hold a prior snapshot; load the current rows over it and see every change.
runnable pageColumns and layout
How to freeze columns in a JavaScript data grid
Pin a column to the left or right edge; it stays put while the rest scrolls sideways.
runnable pageHow to pin rows to the top of a data grid
Hold a summary or header row above the scroll; it survives a scroll and a sort.
runnable pageHow to save and restore a grid's state
Capture sort, columns, filters and grouping, then bring the state back from storage.
runnable pageHow to add an expandable detail row (master/detail)
Click a row to open a nested grid of its own child records, any number expanded at once.
runnable pageHow to show parent and child rows as a tree
Nest rows into a hierarchy from a parent reference; expand, collapse, sort within a parent.
runnable pageHow to build a kanban board from the same rows as a grid
Bind a board to the same rows as a grid; drag a card and the grid's own cell changes with it.
runnable pageHow to show a data grid as a calendar
Bind a calendar to the same rows as a grid; drag a card to another day or hour and the grid writes it back.
runnable pageEditing and validation
How to make grid cells editable, with validation
Edit a cell in place; a value that fails its rule is refused and marked invalid.
runnable pageHow to select rows with checkboxes and read the selection
A pinned checkbox column with tri-state select-all; read the ticked rows and act on them.
runnable pageGrouping and totals
How to group rows with subtotals in a data grid
Group a column and total another; each group collapses to its own count and sum.
runnable pageHow to add a grand total row to a data grid
A pinned row sums one column and averages another, and follows every filter.
runnable pageHow to pivot data in a grid
Turn flat rows into a cross-tab, sum the measures, then switch back with one button.
runnable pageFiltering and search
Export and print
How to export a data grid to Excel from JavaScript
Write a real .xlsx workbook from one button: every row, or just the filtered view.
runnable pageHow to copy and paste between a data grid and Excel
Ctrl+C copies a range as tab-separated text; Ctrl+V pastes an Excel block back in, typed.
runnable pageCharts and KPIs
Theming and a11y
Backend recipes
Connecting a grid to your own server instead of an in-browser dataset: five wire shapes, each with full source.
REST API paging for a data grid
One JSON request in, { rows, total } back. Full source.
SQL through your own endpoint
A filter and a sort become one parameterised statement.
GraphQL cursor paging for a data grid
Walk a Relay-style connection forward by cursor.
Stream a feed into the Data Router
One feed, many live grids, split by partition.
A job-style search API for a data grid
Submit a job, poll it, read a window once it is done.
For everything else the grid does, see the developer guide or the API reference.