pretable.v0.0.0

Install + first grid

This guide installs @pretable/react and renders a three-column, five-row grid.

Install

npm i @pretable/react @pretable/ui

Import the styles

Pretable's theming ships in @pretable/ui. Pick a theme and import its CSS plus the grid skin once at your app's entry point:

@import "@pretable/ui/themes/excel.css";
@import "@pretable/ui/grid.css";

The theme file declares all --pretable-* tokens at :root; grid.css is the selector-based skin that targets the engine's [data-pretable-*] data attributes. Two themes ship today — excel.css (gray, dense, technical, light-only) and material.css (Material 3 light + dark; toggle dark mode by setting data-theme="dark" on <html>). If you only need the engine, skip both imports and the grid renders unstyled (functional but no visual chrome).

Tailwind v4 users can additionally import @pretable/ui/tailwind.css to get bg-pt-*/text-pt-* utility shortcuts that alias the --pretable-* tokens. Density (compact / standard / spacious) is runtime-switchable by toggling data-density="..." on <html>.

Render your first grid

import {
  Pretable,
  type PretableColumn,
  type PretableRow,
} from "@pretable/react";

const columns: Array<PretableColumn> = [
  { id: "name", header: "Name", getValue: (r) => r.name },
  { id: "role", header: "Role", getValue: (r) => r.role },
  { id: "city", header: "City", getValue: (r) => r.city },
];

const rows: Array<PretableRow> = [
  { id: "1", name: "Ada", role: "Engineer", city: "London" },
  { id: "2", name: "Grace", role: "Admiral", city: "New York" },
  { id: "3", name: "Linus", role: "Maintainer", city: "Helsinki" },
  { id: "4", name: "Margaret", role: "Director", city: "Boston" },
  { id: "5", name: "Tim", role: "Inventor", city: "London" },
];

export function People() {
  return <Pretable rows={rows} columns={columns} />;
}

That's the full surface for a static grid. Sort, filter, selection, and streaming rows are layered on top — see the source at apps/streaming-demo and apps/bench in the repository while a guide is being written.

What's next

API reference and recipes are in flight. For now, browse the public exports and the streaming demo for working code.