@entiqon/datagrid

A modern, typed, and extensible DataGrid library for React, built on:

• Context-driven modular state
• Controller/state slices
• A UI-agnostic design that lets you provide your own table component
• A rich hook API for interaction, pagination, selection, mode control, and events

This version (0.3.x) introduces a fully modular architecture with context slices, a unified provider, and new hooks.

🚀 Features

• ⚛️ React-first API
• 🧠 Context-driven state slices (data, actions, pagination, selection, focus, mode)
• 🧩 DataGridProvider with external control support
• 🎛 Full hook suite for granular access & composition
• 🎨 UI-agnostic: renderer is fully under your control
• 🧪 Built-in Vitest + React Testing Library
• 🤖 Automated releases with Changesets + GitHub Actions
• 📦 Tree-shakable ES modules

📦 Installation

npm install @entiqon/datagrid

or

yarn add @entiqon/datagrid

🧩 Usage Overview

1. High-Level API — DataGrid Component

import DataGrid, { DataGridView } from '@entiqon/datagrid';

export default function App() {
  return (
    <DataGrid data={rows} columns={columns}>
      <DataGridView />
    </DataGrid>
  );
}

2. Low-Level API — DataGridProvider

import { DataGridProvider } from '@entiqon/datagrid';

export default function App() {
  return (
    <DataGridProvider data={rows} columns={columns}>
      <CustomGrid />
    </DataGridProvider>
  );
}

🎛 Hook API

useData()

const { rows, setRows, updateRow, removeRow } = useData();

useActions()

const { refresh, reload } = useActions();

usePagination()

const { page, pageSize, total, next, prev, setPage } = usePagination();

useSelection()

const { selected, toggle, clear, selectAll } = useSelection();

useFocus()

const { focusedRow, setFocusedRow } = useFocus();

useGridMode()

const { mode, setMode, isCreate, isUpdate } = useGridMode();

useCurrentRow()

const { current } = useCurrentRow();

useGridEvents()

useGridEvents({
  onRowClick(row) {},
  onSelectionChange(selected) {},
});

useDataGrid() — Unified hook

const { data, actions, pagination, selection, focus, mode } = useDataGrid();

🔧 Example: Pagination UI

const { page, next, prev } = usePagination();

🔍 Example: Row Selection

const { selected, toggle } = useSelection();

🧭 Example: CRUD Workflow Using useGridMode

const { mode, setMode, isCreate } = useGridMode();

🎨 Example: Custom Grid Renderer

export function MyGrid() {
  const { data } = useData();
  const { selected } = useSelection();
}

⚙️ TypeScript Path Aliases

{
  "paths": {
    "@context/*": ["src/context/*"],
    "@contracts": ["src/contracts/index.ts"],
    "@hooks": ["src/hooks/index.ts"]
  }
}

🧪 Development

npm test
npm run test:watch
npm run build

🚀 Versioning & Releases

• Changesets
• GitHub Actions

📝 License

MIT © ENTIQON