@smart-grid/react

Monorepo / npm release 1.2.0 (stable 1.x); depends on @smart-grid/core ^1.2.0.

What's new in 1.2.0

• floatingFilters, autoSizeColumns, enableColumnResize — parity with Angular (resize handles, auto-width on load).
• Tool panel collapsed by default, right-side layout; header filters (text / set / number / date); aria-live announcements.
• Sticky column pinning and cellRenderer HTML. See CHANGELOG.md.

React component and hooks for Smart Grid, built on @smart-grid/core. Same capabilities as the Angular adapter: sorting, filtering, pagination, selection, grouping, pivot, tree, master/detail, charts, CSV/Excel, tool panel, find, range selection, and optional virtual scroll.

Live demo & docs: https://smart-grid-mu.vercel.app/

Works with React 18+ and React 19. Import @smart-grid/themes CSS once for polished light/dark layouts.

Install

npm install @smart-grid/react @smart-grid/themes
# Peer deps: react, react-dom ^18 || ^19

Usage — SmartGrid

// App.tsx
import { useState } from "react";
import { SmartGrid, type ColumnDef } from "@smart-grid/react";
import "@smart-grid/themes/smart-grid.css";

type Row = { id: string; product: string; units: number };

export function App() {
  const [rows] = useState<Row[]>([
    { id: "a", product: "Sensor", units: 40 },
    { id: "b", product: "Gateway", units: 12 }
  ]);

  const columns: ColumnDef<Row>[] = [
    { field: "product", headerName: "Product", sortable: true, filter: true },
    { field: "units", headerName: "Units", sortable: true }
  ];

  return (
    <SmartGrid<Row>
      rowData={rows}
      columnDefs={columns}
      pagination
      pageSize={10}
      rowSelection="multiple"
      theme="smart-light"
      showToolPanel
      onSelectionChanged={(selected) => console.log("Selected:", selected)}
      onCsvExport={(csv) => console.log("CSV length:", csv.length)}
    />
  );
}

Usage — useSmartGridFeatures

Expose the same pure helpers as the vanilla createSmartGrid().features API (grouping, pivot, charts, clipboard, menus, …) inside React components or hooks — useful for custom panels, tests, or server-side prep.

import { useSmartGridFeatures } from "@smart-grid/react";

export function FeaturePanel() {
  const f = useSmartGridFeatures();
  const spec = f.charts.createChartSpec(
    [{ region: "North", sales: 100 }],
    { type: "bar", categoryField: "region", valueField: "sales" }
  );
  return <pre>{JSON.stringify(spec, null, 2)}</pre>;
}

Toolbar & pagination UI

Pass toolbar and paginationUi on <SmartGrid> (same types as GridOptions in core). Control icon vs text display, per-button overrides, and pagination nav / page window size.

<SmartGrid
  toolbar={{ buttonDisplay: "both", buttons: { clear: { label: "Reset" } } }}
  paginationUi={{ buttonDisplay: "icon", maxPageButtons: 5 }}
  pagination
  pageSize={10}
  rowData={rows}
  columnDefs={columns}
/>

Docs: Toolbar & pagination UI.

API — SmartGrid props (high level)

The component accepts grid options from @smart-grid/core (rowData, columnDefs, pagination, serverSide, dataSource, pivot/tree/master-detail fields, chart fields, toolbar, paginationUi, etc.) plus React-oriented callbacks:

| Prop | Role | | --- | --- | | onSelectionChanged | Fires with selected row objects. | | onCellValueChanged | Cell edits. | | onCsvExport | CSV string from toolbar export. | | onColumnOrderChanged / onRowOrderChanged | Drag reorder results. | | onRangeSelectionChanged | Current CellRange or null. | | groupBy, aggregations | Grouped rows. | | enableRangeSelection, showColumnMenus, showContextMenu, showToolPanel | UI toggles. |

Full typings ship in SmartGridProps<TData>.

Related packages

• @smart-grid/core
• @smart-grid/angular
• @smart-grid/js
• @smart-grid/themes

Links

• Homepage / demo: smart-grid-mu.vercel.app
• Repository: github.com/rajkishorsahu89/smart-grid
• Issues: github.com/rajkishorsahu89/smart-grid/issues

License

MIT