@helix-x/datagrid-ui - v0.2.0

A dependency-free React data grid: virtualized rows, server-side paging, sorting and filtering, inline row editing, multi-select, CSV export of every matching row, clipboard copy, and persisted column preferences.

React is the only runtime requirement. Styling is plain Tailwind utility classes — there is no stylesheet to import and no theme engine to configure.

Installation

npm install @helix-x/datagrid-ui
Copy

Tailwind skips node_modules when detecting content, so point it at the shipped bundle explicitly or the grid renders unstyled:

@import "tailwindcss";
@source "../node_modules/@helix-x/datagrid-ui/dist/index.js";
Copy

Getting started

import { DataGrid, type ColumnDef } from '@helix-x/datagrid-ui';

const columns: ColumnDef<Person>[] = [
  { field: 'name',  header: 'Name',  flex: 1, filter: 'text' },
  { field: 'email', header: 'Email', flex: 1 },
];

export function People() {
  const dataSource = useMemo(
    () => ({ getRows: (request, signal) => api.list(request, signal) }),
    []
  );

  return (
    <DataGrid
      columns={columns}
      dataSource={dataSource}
      getRowId={(row) => row.id}
      storageKey="people"
    />
  );
}
Copy

Where to look next

• DataGrid and DataGridProps — the component and every option.
• ColumnDef — the main thing you write.
• HxDataSource — the server contract, wire-compatible with ag-grid's server-side row model.
• GridApi — the imperative handle, for refreshing, exporting every matching row as CSV, and patching rows in place.
• ColumnDef.enableRowGroup and HxRowsRequest — single-level row grouping, resolved by the server like everything else.

Not in this version

Multi-level grouping, pivoting, tree data, master/detail, variable row heights, and .xlsx output — CSV is written with a BOM, which Excel opens natively.