@open-grid/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Open Grid contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# @open-grid/react
+
+React adapter for Open Grid.
+
+Use this package when you want React bindings for the framework-agnostic core without the optional styled UI.
+
+## Install
+
+```bash
+npm install @open-grid/react react
+```
+
+## Usage
+
+```tsx
+import { createColumnHelper, useGrid, useGridSelector } from "@open-grid/react";
+
+const column = createColumnHelper<{ id: string; name: string }>();
+
+function PeopleModel({ data }: { data: Array<{ id: string; name: string }> }) {
+  const grid = useGrid({
+    data,
+    columns: [column.accessor("name", { header: "Name" })],
+    getRowId: (row) => row.id,
+  });
+  const selectedRowCount = useGridSelector(
+    grid,
+    (currentGrid) => Object.keys(currentGrid.getState().rowSelection).length,
+  );
+
+  return <>{grid.getRowModel().rows.length} rows, {selectedRowCount} selected</>;
+}
+```
+
+`useGridSelector` subscribes through the core selector contract and rerenders only
+when the selected value changes. Pass a custom equality function as the third
+argument when a selector returns a derived object.
+
+Use [`@open-grid/react-ui`](https://www.npmjs.com/package/@open-grid/react-ui) when you want the maintained styled grid instead of a custom renderer.

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { GridOptions, Grid, GridSelector, GridSelectorSubscriptionOptions } from '@open-grid/core';
+export { AccessorColumnOptions, AccessorFnColumnDef, AccessorKey, AccessorKeyColumnDef, AnyColumnDef, CellContext, CellCoordinate, CellEditEvent, CellEditEventParams, CellEditHistoryAction, CellEditHistoryState, CellEditPhase, CellFillOptions, CellInteractionEvent, CellInteractionEventParams, ClipboardCellContext, ClipboardCopyOptions, ClipboardPasteOptions, Column, ColumnDef, ColumnFilter, ColumnFiltersState, ColumnHelper, ColumnId, ColumnMovePosition, ColumnOrderState, ColumnPinningPosition, ColumnPinningState, ColumnResizeEvent, ColumnResizeEventParams, ColumnResizePhase, ColumnSizingState, ColumnVisibilityState, DisplayColumnDef, ExpandedState, FilterFn, FitColumnsToWidthOptions, Grid, GridCacheDiagnostics, GridCacheDiagnosticsEntry, GridCacheKey, GridOptions, GridSelector, GridSelectorListener, GridSelectorSubscriptionOptions, GridState, GroupColumnDef, GroupingState, Header, HeaderContext, HeaderGroup, PaginationState, Row, RowId, RowInteractionEvent, RowInteractionEventParams, RowModel, RowSelectionCleanupScope, RowSelectionState, SortFn, SortingRule, SortingState, Updater, createColumnHelper, createGrid, fitColumnsToWidth } from '@open-grid/core';
+
+type UseGridOptions<TData> = GridOptions<TData>;
+declare function useGrid<TData>(options: UseGridOptions<TData>): Grid<TData>;
+declare function useGridSelector<TData, TSelected>(grid: Grid<TData>, selector: GridSelector<TData, TSelected>, equalityFn?: NonNullable<GridSelectorSubscriptionOptions<TSelected>["equalityFn"]>): TSelected;
+
+export { type UseGridOptions, useGrid, useGridSelector };

package/dist/index.js

@@ -0,0 +1,57 @@
+// src/index.ts
+import {
+  createGrid
+} from "@open-grid/core";
+import { useCallback, useRef, useSyncExternalStore } from "react";
+import { createColumnHelper, fitColumnsToWidth } from "@open-grid/core";
+function useGrid(options) {
+  const gridRef = useRef(null);
+  if (!gridRef.current) {
+    gridRef.current = createGrid(options);
+  }
+  const grid = gridRef.current;
+  grid.setOptions(options, { notify: false });
+  useSyncExternalStore(
+    grid.subscribe,
+    () => grid.getState(),
+    () => grid.getState()
+  );
+  return grid;
+}
+function useGridSelector(grid, selector, equalityFn = Object.is) {
+  const selectorRef = useRef(selector);
+  const equalityRef = useRef(equalityFn);
+  const cacheRef = useRef(null);
+  selectorRef.current = selector;
+  equalityRef.current = equalityFn;
+  const selectedValue = selector(grid);
+  const cached = cacheRef.current;
+  if (!cached || cached.grid !== grid || !equalityFn(cached.value, selectedValue)) {
+    cacheRef.current = { grid, value: selectedValue };
+  }
+  const subscribe = useCallback(
+    (notify) => grid.subscribeSelector(
+      (currentGrid) => selectorRef.current(currentGrid),
+      (nextValue) => {
+        const currentCache = cacheRef.current;
+        if (!currentCache || currentCache.grid !== grid || !equalityRef.current(currentCache.value, nextValue)) {
+          cacheRef.current = { grid, value: nextValue };
+          notify();
+        }
+      },
+      {
+        equalityFn: (previous, next) => equalityRef.current(previous, next)
+      }
+    ),
+    [grid]
+  );
+  const getSnapshot = useCallback(() => cacheRef.current?.value, [grid]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+export {
+  createColumnHelper,
+  createGrid,
+  fitColumnsToWidth,
+  useGrid,
+  useGridSelector
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@open-grid/react",
+  "version": "0.1.0",
+  "description": "React adapter for Open Grid.",
+  "keywords": [
+    "data-grid",
+    "grid",
+    "table",
+    "react",
+    "adapter"
+  ],
+  "homepage": "https://goatshave.github.io/open-grid/packages#react",
+  "bugs": {
+    "url": "https://github.com/Goatshave/open-grid/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --external react",
+    "check": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@open-grid/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Goatshave/open-grid.git",
+    "directory": "packages/react"
+  }
+}