Getting Started Install + first grid

Install + first grid

Install @pretable/react and render your first three-column grid in five minutes.

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

  1. Install the packages

    npm i @pretable/react @pretable/ui — the react package is the engine, ui ships the themes.

  2. Import the styles

    Pick a theme and import its CSS plus the grid skin once at your app's entry point:

    css
    @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).

  3. Render your first grid

    tsx
    import { Pretable, type PretableColumn, type PretableRow, } from "@pretable/react"; const columns: Array<PretableColumn> = [ { id: "name", header: "Name", value: (r) => r.name }, { id: "role", header: "Role", value: (r) => r.role }, { id: "city", header: "City", value: (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 /docs/streaming for the streaming-adapter API while a guide for the rest is being written.

What's next

API reference and recipes are in flight. For now, browse the public exports and /docs/streaming for the streaming-adapter API.