Getting Started

Install + first grid

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

This is @pretable/react and @pretable/ui rendering a three-column, five-row grid — a drop-in <Pretable> component, an array of rows, and two stylesheet imports:

Render your first grid

Three columns and five rows rendered with the Pretable drop-in component, no controlled state required.

.md

"use client";

import { Pretable } from "@pretable/react";

import { columns } from "./columns";
import { people } from "./data";

export default function Demo() {
  return (
    <Pretable
      ariaLabel="Team roster"
      rows={people}
      columns={columns}
      getRowId={(r) => r.id}
    />
  );
}

That's the full surface for a static grid. Two packages, one component, no configuration beyond columns and rows. Here's how you got there.

Install the packages

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

Requires matching React and ReactDOM 18 or 19 releases supplied by your application. React 18.0.0 is the supported floor; React 17 and earlier are unsupported.

Import the styles

Import the default theme and the grid skin once at your app's entry point, the same two imports the grid above is running:

css

@import "@pretable/ui/themes/pretable.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. Three themes ship today — pretable.css (the house theme and the default, light + dark), excel.css (gray, dense, technical, light-only), and material.css (Material 3, light + dark). The last two are compatibility skins for apps that already look like one of those; see Pick a theme. 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, the state the grid above would be in without them.

Pretable publishes ESM and CommonJS entry points with ES2018 syntax. See the package compatibility guide for older-bundler boundaries, required runtime APIs, and supported public import paths.

Sort, filter, selection, and streaming rows are layered on top of what you just saw — 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.