Type-Safe Headless Datagrid Behavior with React and TypeScript

Works alongside TanStack Table · Framework-agnostic core · Full W3C compliance

Overview

@ts-zen/datagrid is a headless behavior library for datagrid interactions. It provides a pure state machine for managing focus, selection, editing, and clipboard operations—designed for seamless use with TanStack Table, not as a replacement.

• Behavior-first architecture — Manage interactions independently from your UI layer
• Works alongside TanStack Table — Compose with your existing table logic
• Framework-agnostic core — Zero dependencies; reusable across frameworks
• Type-safe — Full TypeScript support with explicit state management
• W3C compliant — Keyboard navigation and accessibility patterns follow standards

Packages

Package	Description
@ts-zen/datagrid-core	State machine, transitions, effects. Zero dependencies.
@ts-zen/react-datagrid	React hooks, Zustand bindings, props getters.
@ts-zen/react-datagrid-kit	Pre-built features (keyboard presets, column resize).

Quick Start

npm install @ts-zen/react-datagrid

import { useGridBehavior } from "@ts-zen/react-datagrid";

export function MyDataGrid({ columns, data }) {
  const grid = useGridBehavior({
    rowIds: data.map((row) => row.id),
    columnIds: columns.map((col) => col.id),
  });

  return (
    <table {...grid.getGridProps()}>
      {/* Render with your UI + TanStack Table */}
    </table>
  );
}

See the Documentation for complete hook signatures and props getters.

Documentation

• Documentation — Getting started, guides, and API reference
• Storybook — Interactive component demos and examples

Development

bun install
turbo run dev
bun run storybook

# Quality & testing
turbo run quality
turbo run test:run

See CLAUDE.md for contribution guidelines.

License

Copyright © 2024 ts-zen • MIT license.