Hooks

React hooks for integrating datagrid behavior into your components.

useGridBehavior

The main hook for initializing grid behavior. Call this once at the grid container level.

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

function DataGrid({ table }) {
  const grid = useGridBehavior({
    rows: table.getRowModel().rows,
    columns: table.getVisibleLeafColumns(),
    config: {
      selection: { mode: "range" },
      editing: { commitOnBlur: true },
    },
    onCommit: ({ cell, value }) => {
      // Save the edited value
    },
  });

  return <div {...grid.props}>{/* Grid content */}</div>;
}

Options

Option	Type	Description
rows	{ id: string }[]	Array of row objects with unique IDs
columns	{ id: string }[]	Array of column objects with unique IDs
config	GridConfig	Configuration for navigation, selection, editing
onCommit	(params) => void	Callback when a cell value is committed
onSelectionChange	(params) => void	Callback when selection changes

Returns

Property	Type	Description
props	object	Props to spread on the grid container
store	StoreApi	Zustand store for advanced usage
dispatch	(action) => void	Dispatch actions directly

---

useCellBehavior

Hook for individual cell behavior. Call this for each cell in the grid.

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

function Cell({ grid, rowId, colId, children }) {
  const cell = useCellBehavior(grid, rowId, colId, {
    type: "editable", // or 'readonly', 'interactive'
  });

  return (
    <div
      {...cell.props}
      className={cn(
        cell.isFocused && "ring-2 ring-blue-500",
        cell.isSelected && "bg-blue-50",
      )}
    >
      {cell.isEditing ? (
        <input
          autofocus
          defaultValue={children}
          onBlur={(e) => cell.commit(e.target.value)}
        />
      ) : (
        children
      )}
    </div>
  );
}

Options

Option	Type	Description
type	'readonly' | 'editable' | 'interactive'	Cell interaction type

Returns

Property	Type	Description
props	object	Props to spread on the cell element
isFocused	boolean	Whether this cell has focus
isSelected	boolean	Whether this cell is in the selection
isEditing	boolean	Whether this cell is in edit mode
commit	(value) => void	Commit the current edit
cancelEdit	() => void	Cancel the current edit

---

useHeaderBehavior

Hook for header cell behavior. Enables keyboard navigation through headers.

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

function Header({ grid, colId, children }) {
  const header = useHeaderBehavior(grid, colId);

  return (
    <div {...header.props} className={header.isFocused && "ring-2"}>
      {children}
      <button {...header.interactive("sort")}>Sort</button>
    </div>
  );
}

Returns

Property	Type	Description
props	object	Props to spread on the header element
isFocused	boolean	Whether this header has focus
interactive	(id: string) => props	Get props for interactive elements

---

useRowBehavior

Hook for row-level behavior. Useful for row selection indicators.

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

function Row({ grid, rowId, children }) {
  const row = useRowBehavior(grid, rowId);

  return (
    <div {...row.props} className={row.hasSelection && "bg-blue-50"}>
      {children}
    </div>
  );
}

Returns

Property	Type	Description
props	object	Props to spread on the row element
hasSelection	boolean	Whether any cell in this row is selected
hasFocus	boolean	Whether any cell in this row has focus

---

See Also

• Props Getters — Lower-level props generation
• Selectors — Subscribe to specific state slices
• State Model — Understanding the internal state