@fragiola/data-grid · React
A billion cells, and not a line of CSS from us.
A headless data grid: both axes virtualized, a scrollbar that covers the whole dataset, windows you load data by, and the APG grid keyboard. Render it as a table or as divs, and style it your way.
Millions of cells
Rows and columns are virtualized, and scroll scaling keeps the whole dataset reachable past the browser's size limit.
Windows
The grid tells you which rows and columns are in view: load exactly that range, wherever the scrollbar lands.
Keyboard and ARIA
An active cell, the arrows, Home, End and the page keys, a roving tab stop and ARIA totals, all replaceable.
Any structure
The same primitives render a real table or divs, through render. The structure is yours, and so is the look.
What it never ships
CSSIconsTextA fixed DOMA design system
The state is exposed as data-* attributes and ARIA, so any styling solution works: Tailwind, plain CSS, CSS modules, CSS-in-JS. The examples use Fragiola UI and its palettes.
An API that reads like your data
One generic, the row type. Columns are plain objects, rows an array or a getter, and every change is a command you can veto or rewrite.
const columns: Column<Person>[] = [
{ key: "name", name: "Name", width: 180 },
{ key: "salary", name: "Salary", width: 120, renderCell: ({ row }) => money(row.salary) },
];
<DataGrid.Root columns={columns} rows={people}>
<DataGrid.Grid aria-label="People">
<DataGrid.Header />
<DataGrid.Body />
</DataGrid.Grid>
</DataGrid.Root>