@pretable/react

The React surface for pretable. Ships three components and one hook on top of @pretable/core's headless engine.

When to reach for what

• <Pretable> — drop-in. Pass columns and rows and you're done. Best for quick wins.
• <PretableSurface> — controlled. Pass state to drive sort, filter, selection, focus, or column layout from the outside. Best for production apps.
• usePretable — the hook. Returns { grid, snapshot, renderSnapshot, telemetry } for custom rendering. Best when you need more control than <PretableSurface> provides — e.g., a non-default DOM layout or a different framework.

<InspectionGrid> and <LabeledGridSurface> are special-purpose surfaces tagged @beta — they work, but expect shape changes pre-1.0.

Install

npm install @pretable/react @pretable/core @pretable/ui
# or pnpm add … / yarn add …

@pretable/ui ships the CSS theme; import the stylesheet once at the root of your app.

Minimal example

import { Pretable } from "@pretable/react";
import "@pretable/ui/grid.css";

function App() {
  return (
    <Pretable
      columns={[
        { id: "name", header: "Name" },
        { id: "age", header: "Age", sortable: true },
      ]}
      rows={[
        { id: "1", name: "Ada", age: 36 },
        { id: "2", name: "Grace", age: 85 },
      ]}
    />
  );
}

Full public surface

See react.api.md for every exported component, hook, type, and function with their full signatures. The file is generated by API Extractor and committed to the repo; CI fails if it drifts.

License

MIT — see LICENSE.