The row type.
The context type, inferred from the context prop.
const columns: ColumnDef<Person>[] = [
{ field: 'name', header: 'Name', flex: 1, filter: 'text' },
{ field: 'email', header: 'Email', flex: 1 },
];
function People() {
const dataSource = useMemo(
() => ({ getRows: (request, signal) => api.list(request, signal) }),
[]
);
return (
<DataGrid
columns={columns}
dataSource={dataSource}
getRowId={(row) => row.id}
/>
);
}
const apiRef = useRef<GridApi<Person>>(null);
<DataGrid
columns={columns}
dataSource={dataSource}
getRowId={(row) => row.id}
storageKey="people"
apiRef={apiRef}
onRowCommit={async (draft) => {
const result = await api.save(draft);
return result.ok ? { ok: true } : { ok: false, errors: result.errors };
}}
toolbar={(api) => (
<button onClick={() => api.refresh({ purge: true })}>Refresh</button>
)}
/>
Styling is plain Tailwind utility classes — there is no stylesheet to import.
Tailwind skips node_modules when detecting content, so point it at the
shipped bundle explicitly:
@import "tailwindcss";
@source "../node_modules/@helix-x/datagrid-ui/dist/index.js";
apiRef and toolbar receive.
A virtualized, server-driven data grid.
Paging, sorting and filtering are all resolved by your data source — the grid holds one page at a time and never filters or sorts locally. Rows are windowed at a fixed height, so the DOM stays small regardless of the result set.