The JavaScript grid built for agents

Create advanced grids, pivots, and data views using prompts, typed APIs, and composable primitives — without manually stitching frontend, backend, and query logic by hand. Build on a composable architecture designed for coding agents.

View demos Read about our approach

Install via your agent

Paste this following line in your agent: I want to set up @superplot/grid. Read https://superplot.dev/grid/setup-skill.md and follow its instructions.
Converse with your agent to create a grid for yourself. Here is a start up prompt Make me a grid to surprise me.

MIT Licensed on GitHub Join our Discord

/superplot help to see available skills

Built for any agent

Claude Code
Codex
Copilot
Cursor
Gemini
Windsurf
Cline
Amp
Goose
Zed
VS Code
OpenCode
Roo
Kilo
Kiro
Trae
Antigravity

Built for any stack

JavaScript
TypeScript
React
Next.js

Demos

Every demo below was built by an agent in conversation with a human. Open the conversation under each grid to see the exact prompts and the code the agent produced.

Sales

A sleek B2B sales signal inbox: one row per prospect with rich contact cells, a heat score, category chips, a pipeline bar and a Fit toggle - sortable, selectable and paginated over 800 generated leads.

human
Here are two reference screenshots of a B2B sales "signal inbox". Build a grid demo from them, but make it noticeably sleeker than the screenshots - feel free to rethink the cell layouts and suggest layout or functional improvements.

agent

I studied both screenshots and the renderer APIs. This is a flat table - one row per contact, horizontally scrollable across ten custom columns, no grouping or pivot. Here's the aspect inventory I stitched from both images:

Aspect	Detail
Shape	Flat table, ~6 visible rows, horizontally scrollable (10 columns), no freeze
Col: select	Leading checkbox column + header select-all checkbox
Col: Contact	Gradient avatar, name link, title, @ company - a 3-line rich cell
Col: Signal	Signal action line (post = link) + keyword subline
Col: AI Score	1-3 fire emoji as a discrete score
Col: Imported	Relative time, active descending sort in header
Col: List	Category pills - SMB, Warm Leads, Cold Leads
Col: Pipeline	Progress bar + "X% qualified" label
Col: Fit	3-segment toggle: yes / maybe / no
Chrome	Footer result count, page-size select, windowed pagination

A few things need your call before I build. My best guess is pre-selected in each:

Which interactions should actually work in the demo?Column sorting, row selection, pagination, Fit toggle + hover
How far should I push the "way more sleek" redesign vs. staying faithful to the screenshots?Bold redesign
Confirm the demo id and domain for generated data.signal-inbox (sales intel)

Going with all interactions, a bold redesign, and the id signal-inbox. Here's how each aspect maps to a grid mechanism:

Aspect	Grid mechanism
Flat table, 800 rows	Grid(flat) + FlattenedDataViewModel; cell value = whole Row object
Rich cells (all cols)	One custom cell renderer per column; static widths give horizontal scroll
Headers + sort	Custom facet renderer: uppercase label + sort caret, click rebuilds the viewmodel
Select + select-all	Checkbox column + header checkbox; a Set of row ids drives a selected-row tint
AI Score	Numeric heat chip + 3-pip meter - replaces the fire emoji
Pagination	Own footer: page-size select + windowed pager over 800 rows
Theme	Built-in light + dark pair, all accents from a fixed orange so both modes work

Building it now - viewmodel-only with self-contained generated data, and light/dark counterparts that follow the page theme.

human
The row hover tint is semi-transparent, so when I hover a row the columns scrolling underneath the pinned checkbox column bleed through it. Can we drop the transparency entirely so rows stay opaque?
agent
Good catch - that's a real bug. The hover and selected backgrounds were mixed against transparent, so on the pinned checkbox fixture the scrolling data columns showed through the translucent tint. The fix: mix the tint against the theme's opaque surface colour instead, so every row background is fully opaque in both light and dark.
```
const SURFACE = "var(--value-background-color)";
const ROW_SELECTED_BG = `color-mix(in srgb, ${ACCENT} 12%, ${SURFACE})`;
const ROW_HOVER_BG    = `color-mix(in srgb, ${ACCENT} 7%,  ${SURFACE})`;
```
human
The Contact button is too wide. Make it icon-only to shrink the column: an envelope for "not contacted", and a checkmark once contacted.
agent
Icon-only is much tighter. I swapped the text for a currentColor-stroked envelope (Contact) that fills to a solid check (Contacted) on click, and shrank the pinned action column from 150px to a 64px gutter around the 32px button.
```
btn.title     = contactedRow ? "Contacted" : "Contact";
btn.innerHTML = contactedRow ? CHECK_ICON : MAIL_ICON;
const CONTACT_WIDTH = 64;
```
human
Delete the Email column and move the Fit column into its place.
agent
Done - removed Email and moved Fit into its slot. Column order is now Contact, Signal, Score, Fit, Imported, List, Pipeline.
human
Two cosmetic tweaks: (1) restyle the List column as a small solid colour chip next to a neutral label - like [x] Warm Leads - and mute the colours, there are too many. (2) The Fit control's active colours are too bright; mellow them.
agent
Both in. List is now a 9px solid colour chip plus a neutral-gray label, so the colour is confined to the chip and the column reads calmly instead of a wall of pills. Fit's active fills are mellowed by mixing each verdict colour 80/20 toward slate, keeping the white glyphs legible.
```
// List: colour confined to a small chip, neutral label
chip.style.background = color;
el.style.color = "color-mix(in srgb, currentColor 78%, transparent)";
// Fit: active fill mixed toward slate
background: color-mix(in srgb, ${seg.color} 80%, #64748b);
```
human
Show a loading spinner while data loads and while paginating, and add a 1s delay to each data load so the loader is actually visible.

agent

Added it. Each sort, page, and page-size change now runs as a simulated async fetch: a frosted overlay with a spinner shows for 1s, then the new page swaps in via updateData(). A load token guards against rapid pager clicks so only the latest load applies.

function rebuild(): void {
  const token = ++loadToken;
  loader.show();
  if (loadTimer !== null) clearTimeout(loadTimer);
  loadTimer = setTimeout(() => {
    if (token !== loadToken) return;
    vm.updateData(buildParams(view()));
    grid.data = vm;
    grid.draw();
    loader.hide();
  }, LOAD_DELAY_MS);
}

Infrastructure

A realtime server monitor: a host fleet ticks live every second with d3 area sparklines, heat-scaled metrics and status swatches, a custom terminal theme, and a column panel to show/hide, reorder and pin columns - plus per-column filters.

human
Here are reference screenshots of a real-time infrastructure grid: one row per server, with a Server ID, a Name, a Performance Metrics group (a CPU History sparkline, CPU %, Memory %, Disk %, and Response time) and a Status badge. The whole grid updates in real time, roughly every 300ms, and I want the sparkline drawn with d3 as a single <svg> <path>. On the right there's a column panel that controls the layout - show/hide, pin, and reorder columns. The reference design is rough, so you have full freedom to build a clean, Linear-style grid.

agent

I studied the seven references and the renderer APIs. It's a flat table - one row per host, scrolling - with a two-level column header where a Performance Metrics band spans five child columns. Here's the aspect inventory I reconstructed before I ask a few scoping questions:

Aspect	Detail
Shape	Flat table, one row per server; a 2-level header with a Performance Metrics band over 5 child columns
Columns	Server ID · Name · Performance Metrics → [CPU History · CPU % · Memory % · Disk % · Response (ms)] · Status
Pinning	Server ID pinned left, Status pinned right; data scrolls under both, and pin state is reconfigurable from the panel
Realtime	Updates every 300ms - numeric metrics tick and CPU History is a d3 line sparkline (single <path>) that shifts new points in
Encodings	Heat pills on CPU / Memory, plain Disk, latency-colored Response text, a Status badge, and a blue CPU sparkline
Column panel	A collapsed vertical Columns tab: search box, PINNED LEFT / MAIN / PINNED RIGHT sections, per-row visibility + drag handle + L/R pins, Reset
Header filters	A funnel per column - text (Contains), number (Equals), status (multi-select)

A few scoping decisions before I write the implementation brief - my best guess is pre-selected in each:

Which column-panel controls should be fully functional?Show/hide columns, pin left / right, drag to reorder, and the search box
Should the column-header filter funnels be functional (text / number / status)?Yes, all three types
Should clicking a column header sort the grid?Sorting for number / measure fields only
What visual design direction for the grid and chrome?A custom Linear-style theme pair

Going with those. Here's how each aspect maps to a grid mechanism - viewmodel-only, no DataSource or DataModel:

Aspect	Grid mechanism
Shape	Grid(flat) + FlattenedDataViewModel; 2-level columnFacets - grouped columns share a Performance Metrics band, solo columns span both header rows
Realtime 300ms	setInterval mutates the server objects in place and shifts each sparkline's ring buffer, then grid.draw() (row order stays fixed)
CPU sparkline	A cell renderer builds one <svg><path>; d comes from d3-shape line() + d3-scale scaleLinear
CPU / Memory	Heat-scaled pill; Disk is plain numeric; Response is latency-colored text; Status is a pill badge
Left/right pinning	Pinned columns render through pooled PVerticalFixtures; the Grid is reconstructed only when a side's fixture count changes, else vm-rebuild + draw
Column panel + filters	A right rail collapsible Columns tab; each header funnel opens a text / number / status popup
Sorting	Numeric headers only, via delegated pointerdown (onclick is wiped by the 300ms redraw)
Theme	A custom Linear-style light/dark pair that follows the page theme

All header interaction is event-delegated on the stable grid mount so the redraw can't swallow it. Building it now with self-contained generated data and light/dark counterparts.

human
The horizontal scroll stops working once I pin columns - fix the column sizing so the grid still scrolls under the pinned columns. Also change how the sparkline builds up: instead of starting full of random values, start empty and accumulate one point per tick, keeping past points fixed and only sliding the window once it fills - like t1:[], t2:[5], t3:[5,10], t4:[5,10,6], t5:[10,6,3].
agent
Two changes. First, sizing: I moved the main columns to content width (max-cell) so the main region stays wide enough to scroll under the pinned fixtures, and capped the two elastic columns (Name and CPU History) with a max width. Second, the sparkline now starts empty and accumulates - each tick pushes the live CPU value and only drops the oldest once the window fills, so past points stay fixed exactly like your t1:[] → … → t5:[10,6,3]. I also guard the sub-2-point case so an empty history renders nothing instead of a stray mark.
human
A few visual fixes: right-align all the numbers; left-align the status pills; the Server ID and Name cells need left padding; the line chart looks broken and cut in the middle - turn it into a smooth area chart by closing the curve and using a Catmull-Rom style interpolation in d3; make the column panel thinner so the grid gets more space when it's open; and when Name is hidden the Performance Metrics group header goes misaligned.
agent
All six done. Numbers are right-aligned, status is left-aligned, and Server ID / Name now carry left padding. The sparkline is now a smooth Catmull-Rom area + line - two paths in a fixed coordinate space, stretched to the cell width with preserveAspectRatio="none":
```
const curve = curveCatmullRom.alpha(0.5);
const areaGen = area<number>().x((_d, i) => x(i)).y0(h).y1((d) => y(d)).curve(curve);
const lineGen = line<number>().x((_d, i) => x(i)).y((d) => y(d)).curve(curve);
return { area: areaGen(values) ?? "", line: lineGen(values) ?? "" };
```
I narrowed the column panel so the grid gets more room, and fixed the misaligned group band: any change to the column set (hiding Name included) now rebuilds the grid from scratch, so no stale rowspan header cell survives to shift the Performance Metrics band. Row-only changes (sort/filter) still update in place.
human
When I unpin a column and it ends up as the last column, that column isn't fully visible - I can't scroll far enough to see all of it.
agent
This was a real width-accounting bug. The grid derives its scrollable width from each column's measured leaf header cell - data cells are never measured, and non-leaf (rowspan) header cells aren't either. Non-grouped columns were structured as level0 = key, level1 = null, i.e. a single tall header cell spanning both rows - a non-leaf cell. So the grid never measured those columns and fell back to defaultCellWidth (50px) in its total-width math while CSS rendered them at real content width. The total came out short, so the scroll range couldn't reach the end - worst when such a column landed last.
The fix: give every column a measured leaf header (non-grouped → level0 = "", level1 = key; grouped stay under the Performance Metrics band) and use deterministic fixed widths, so measured-leaf == CSS track == data-cell width. The scroll math is now exact and the last column is fully reachable after any unpin. This also retro-fixes the earlier "scroll not working when pinning" report - it was the same measurement bug.
human
The pinned columns are fine now. But if I drag Name to the end (just before the pinned column) and move CPU History to the end too, the header layout breaks.
agent
With Name dragged into the middle and CPU History moved to the end, the Performance Metrics group's members were no longer contiguous - indices 0,1,2,3 then 5, with Name's blank cell at 4. That produced two separate Performance Metrics bands, and the grid's sticky band-label centering shifted both labels to stay in view, so they overlapped and the header looked broken. The fix: only render the group band when its visible members form a single contiguous run; otherwise those columns fall back to ungrouped (blank top strip).
```
const contiguousGroups = new Set<string>();
for (const [g, idx] of groupIndices) {
  if (idx[idx.length - 1] - idx[0] + 1 === idx.length) contiguousGroups.add(g);
}
const level0 = cols.map((c) =>
  c.group && contiguousGroups.has(c.group) ? `grp:${c.group}` : "");
```
So when the metrics stay together the band shows; split them and each column shows its own header with a blank strip above - no split bands, no overlapping labels. Reordering them back (or Reset columns) brings the band back.
human
Let's turn this into a proper terminal-style grid: 1. Update once per second instead of every 300ms. 2. The sparkline still has a jagged, sawtooth movement - figure out whether that's the data generation or the line rendering, fix it, and apply a Catmull-Rom style interpolation. 3. Make the whole grid compact and monospace - a terminal look. 4. Drop the pills around the numbers; instead show a small colored circle plus the value in that same color. Off-white terminal look for light, Monokai for dark, with bright green / red highlights. 5. Drop the status pills too - same idea: a rounded-rect solid swatch followed by colored text. 6. Make the numbers bold. 7. Chart color should be bright green. 8. Tighten the row padding for compactness, fade the column borders a lot, and use slightly less-faded blue row borders.
agent
Full terminal-vibe redesign. The sawtooth was a data-gen issue - a raw random walk zig-zags point to point - so I gave the CPU a momentum-driven walk: velocity carries over between ticks, with mean reversion toward 50 and a soft bounce at the edges, so the curve trends in smooth arcs before the Catmull-Rom spline even smooths it:
```
s.cpuVel = s.cpuVel * 0.74 + (rand() - 0.5) * 2.6 + (50 - s.cpu) * 0.012;
const nextCpu = s.cpu + s.cpuVel;
if (nextCpu <= 1 || nextCpu >= 100) s.cpuVel *= -0.5;
s.cpu = clamp(nextCpu, 1, 100);
```
The rest: tick is now 1s; the grid is compact and monospace throughout; the number pills are gone in favor of a colored dot + the value in that same color, bold; the status pills became a rounded-rect swatch + colored label; the sparkline is bright green. Column (vertical) borders are faded almost to nothing and the row (horizontal) borders read as subtle blue rules. Light mode is an off-white terminal, dark mode is Monokai-style.
human
A few more: - Extend the faint vertical column line into the pinned fixture columns by drawing the border on the fixture cell itself. - The chart looks like it's drawing the old array and the new array on top of each other - if the data generation already keeps the array correct, just repaint the chart cleanly. - Make the blue horizontal row borders a bit more prominent. - Move the heat dot to the left of the number cells (with padding), keeping the number on the right. - The theme doesn't feel right - switch to Gruvbox dark / light colors, keeping the bright font / heat colors you're already using.
agent
You were exactly right about the chart - the sparkline renderer returns void (it owns the cell), but it was calling appendChild, so every redraw stacked a new SVG on top of the old ones. Switched to replaceChildren, so each tick just repaints the current window; the ring buffer was already correct:
```
// returns void (the grid won't clear the cell for us), so appending would
// stack a new SVG over the old one every redraw - the old array + new array overlap.
ctx.container.replaceChildren(svg);
```
The vertical line now continues into the fixtures (a border on the side of each pinned cell facing the data), the blue row borders are more prominent, and the number cells use space-between so the heat dot pins left (with padding) and the bold value pins right. And I replaced the theme with a Gruvbox pair - dark #282828 / #ebdbb2, light around #f9f8f4 / #3a3733 - keeping the bright Gruvbox heat and status colors.
human
Dark theme is great, but the light theme is too solarized and yellow - I want a subtle off-white, creamish look. Also: 1. The chart fills from left to right (probably array length) - it should stream from right to left with a fixed-length array padded with zeros, filling from the end. 2. The vertical lines still don't extend into the fixtures - I think there's a grid CSS rule forcing border-top: none on the fixture cells. 3. For the metric numbers, render the healthy (currently green) ones in the normal text color so there aren't too many colors, and only color the warning and critical numbers; keep the status colors as they are.
agent
Light theme is now a calm off-white cream (surface #f9f8f4, warm-dark text #3a3733) instead of the yellow solarized look; dark stays Gruvbox. The chart streams right→left: cpuHistory is a fixed-length, zero-padded ring buffer, each tick pushes the newest value onto the end and shifts the oldest off the front, so new data enters at the right edge and ages leftward.
```
const cpuHistory = frozen ? [] : new Array<number>(HISTORY_LEN).fill(0);
// each tick:
s.cpuHistory.push(s.cpu);
if (s.cpuHistory.length > HISTORY_LEN) s.cpuHistory.shift();
```
You found the fixture border cause - grid.css sets border-top: none on .left-fixture / .right-fixture cells, which killed the horizontal rule in the pinned columns. The fixture data cells now re-apply it inline (skipping the top row, matching the .first data cells), so both the blue row rules and the faint column rules are continuous across Server ID / Status:
```
cell.style.setProperty(
  "border-top",
  j > 0 ? "1px solid var(--horizontal-border-color)" : "none",
);
```
And the numbers are calmer: healthy values now render in the normal text color, only warning (amber) and critical (red) values take their color, while the little severity dot still always carries the heat color. Status colors are unchanged.

Finance

A live trading blotter: instruments grouped by asset class tick in real time, with in-cell d3 sparklines, a % change surfaced through the metadata layer, value pills that flash on update, sortable columns, value filters, and drag-to-group.

human
Here are five reference screenshots of a real-time trading blotter: instruments (bonds, ETFs, crypto, stocks) shown with a Ticker cell, a Timeline sparkline, an Instrument type, P&L and Total Value, and a Quantity - groupable by asset class with expandable group headers, plus a per-column context menu and a value filter. Build a grid demo from them and make it super sleek. It should update in real time, express the % change versus the previous value through the metadata layer, generate its own random data and groups, and the column context menu should offer sorting only.

agent

I stitched the five screenshots into one reference (they're pans of the same wide grid) and read the renderer APIs. It's a grouped flat table - a single flat column band with rows nested under expandable asset-class headers. Here's the aspect inventory:

Aspect	Detail
Shape	Grouped flat table: leaf rows under expandable group headers (Bond / ETF / Crypto / Stock)
Group header	Chevron + label + count, with aggregated P&L and Total Value
Col: Ticker	Round colored avatar + bold symbol + full instrument name
Col: Timeline	Blue in-cell bar sparkline
Col: Instrument	Asset-class text (becomes the group key when grouped)
Col: P&L / Total Value	Signed arrow + delta, then a value pill
Col: Quantity	Right-aligned integer
Header tools	Filter funnel + kebab (context) menu per column
Chrome	Grouping bar with an 'Instrument' chip; a live row feed

A few calls before I build - my best guess is pre-selected in each:

How should grouping behave?Grouped by Instrument, with drag-to-group and chip-to-ungroup toggle
Which interactions should work (realtime + sort always on)?Expand/collapse groups, column filter funnel, column resize
How should the P&L / Total Value delta read?% change vs the previous tick on both columns, via the metadata layer
How much surrounding chrome to recreate?Grouping bar + a LIVE indicator; drop the app tabs

Going with those. Here's how each aspect maps to a grid mechanism - viewmodel-only, no DataSource or DataModel:

Aspect	Grid mechanism
Grouped shape	Grid(flat) + FlattenedDataViewModel; group headers via rowFacet + packed rowMeta (depth/expand bits)
Group aggregates	Sum over each group's members, rendered on the header row
% change vs previous	Stored per-cell in viewModel.metadata.valueCells; the renderer reads it back with getValueCellMeta
Timeline sparkline	Custom cell renderer drawing bars from each row's live price history
Sort context menu	Custom header renderer + a popup with Sort Ascending / Sort Descending only
Filter funnel	Header popup with search + value checkboxes; filters the leaves
Grouped <-> flat toggle	One persistent viewmodel via updateData(); reconstructed only when the column set changes
Theme	syncGridTheme light + dark pair, all accents via color-mix so both modes work

Building it now with self-contained generated data across the four asset classes, and light/dark counterparts that follow the page theme.

human
Draw the Timeline microchart with d3, and make each row's set of bars a single SVG <path> instead of one element per bar.
agent
Done. The sparkline now uses d3 scaleLinear to map index -> x and value -> y, and emits every bar as one rectangle subpath concatenated into the same path data, so the whole series is a single filled <path> (one DOM node) rather than 30 divs. The viewBox is index-space with preserveAspectRatio="none", so it stretches to the cell width.
```
const x = scaleLinear().domain([0, n]).range([0, W]);
const y = scaleLinear().domain([min, max]).range([H - 1, 3]);
let d = "";
for (let i = 0; i < n; i++) {
  const bx = x(i) + gap, top = y(values[i]);
  d += `M${bx} ${H}L${bx} ${top}L${bx + bw} ${top}L${bx + bw} ${H}Z`;
}
path.setAttribute("d", d);
```
human
Make the realtime feed feel selective instead of everything moving at once: (1) every ~3 seconds pick a random subset m of the visible rows (m <= half the visible rows) and tick only those, every 32ms; (2) group aggregates updating faster than individual rows is fine; (3) the value pill should only signal an update - flash on change, then fade out - instead of being permanently present.
agent
Reworked the feed into two loops: an epoch timer (3s) picks a fresh set of m visible rows (m <= n/2), and a fast timer steps only those, so the table reads as a live subset rather than a global churn. Row order is held stable across ticks so nothing jumps. Aggregates recompute from their members on every fast tick, so they move faster than any single row. And the value pill is now transparent at rest and only tints (green up / red down) on a recent change, fading out over ~0.6s.
```
const fl = flash.get(`${row.id}|${field}`);
if (fl && Date.now() - fl.t < FLASH_MS) {
  const k = 1 - (Date.now() - fl.t) / FLASH_MS; // 1 -> 0
  const c = fl.up ? UP : DOWN;
  pill.style.background = `color-mix(in srgb, ${c} ${Math.round(26 * k)}%, ${SURFACE})`;
}
```
human
Slow the tick from 32ms to 150ms. Also, expand/collapse on a group sometimes doesn't register.
agent
Set the tick to 150ms. The flaky collapse was a real race: the toggle was an onclick on the group cell, but the grid redraws every tick, and a redraw landing between mousedown and mouseup detaches the pressed node so the browser never fires click. I moved it to a delegated pointerdown on the stable grid mount (a single event that can't be split), keyed by a data attribute - now it toggles on every click.
```
function onFacetPointerDown(e) {
  const cell = e.target.closest('[data-mp-group]');
  const group = cell?.dataset.mpGroup;
  if (!group) return;
  collapsed.has(group) ? collapsed.delete(group) : collapsed.add(group);
  renderStructure();
}
gridMount.addEventListener('pointerdown', onFacetPointerDown);
```
human
Two more: slow the tick again from 150ms to 300ms, and raise the minimum number of updating rows to 3 (sometimes only one updates) - so m ranges from 3 up to n/2.
agent
Both in. The tick is 300ms, and m is now chosen in [3, n/2] each epoch, falling back to min(n, 3) when the visible window is too small for that range.
```
const hi = Math.floor(n / 2);
const m = hi <= MIN_ACTIVE
  ? Math.min(n, MIN_ACTIVE)
  : MIN_ACTIVE + Math.floor(Math.random() * (hi - MIN_ACTIVE + 1));
```
human
When a group is collapsed it stops updating - its aggregate freezes. A collapsed group should keep ticking too.
agent
Fixed. The active-set picker only saw visible leaf rows, and a collapsed group's members aren't rows at all, so they were never chosen. I now treat a visible collapsed-group header as an update unit: when it's picked, each tick steps a random member of that group, so the aggregate keeps moving and flashing instead of freezing.
human
Remove the bottom status line (the 'Rows / Total Rows' count) entirely.
agent
Removed - the status element, its append, and its render block are gone, so the grid sits directly below the grouping bar with nothing beneath it.

Billing

A compact revenue-recognition schedule: a collapsible Company > Contract > line-item tree with subtotal rows, inline recognition bars, and a month-by-month Balance/Revenue band - sortable and resizable, with the Name column pinned on scroll.

human
Here are two reference screenshots of a revenue-recognition grid - they're the left and right halves of one wide table, panned sideways. Build a grid demo from them. Keep the design compact and minimalistic, and leave out the 'Columns' control panel docked on the right edge.

agent

The two screenshots are one wide grid, panned - the right image is the left one scrolled sideways (the $1,941.67 Balance for "Dharma Initiative" lines up in both). Here's the aspect inventory I stitched together from them:

Aspect	Detail
Shape	A grouped tree on the row side plus two-level column headers on top
Rows	One indented Name column, 3 levels: Company (Dharma Initiative) > Contract (I-831, I-117, ...) > line item (Large - Access, Enterprise - Storage, ...), with expand/collapse chevrons and subtotal group rows
Columns	Total Amount (sorted descending) . Deferred Revenue . Recognized Revenue . Recognized %, then December 2024 and November 2024, each spanning a Balance and a Revenue column
Formatting	US currency like $1,234.56; a zero value renders as an em-dash placeholder; numbers right-aligned
Encodings	Recognized %: a muted "100%" label over a green progress bar; group rows bold and dark, leaf rows lighter
Pinned	The Name column stays put when the table scrolls right (a pinned row-facet column)
Excluded	The right-edge "Columns" control panel, per your request; compact, minimal chrome throughout
Domain	A SaaS revenue-recognition schedule: Company to Contract to line item, deferred vs recognized revenue with a monthly Balance/Revenue schedule

A few things the screenshots can't answer - my best guess is preselected in each:

Build it as a grouped tree table, or a true pivot?Grouped tree - one indented Name column with subtotal rows and grouped month headers (a true pivot would split Company/Contract/line into three stacked columns and lose the indented look)
Which interactions should actually work in the demo?Expand/collapse the tree, click-to-sort columns, and column resize
How much data should it generate, and what domain?Several companies (Dharma Initiative first), SaaS revenue recognition

agent

Confirmed: grouped tree, with expand/collapse + click-to-sort + column resize, over several companies. Here's how each aspect maps to a grid mechanism before I build:

Aspect	Mechanism
Grouped 3-level tree	FlattenedDataViewModel + the flat layout; one persistent viewmodel, updateData() on every change; depth/leaf/expanded packed via createRowMeta
Pinned Name column	Native row-facet (the left region stays put on horizontal scroll)
Subtotal rows	Company/Contract rows carry summed measures; Recognized % is sum(Recognized) / sum(Total)
Two-level month headers	Two columnFacets levels; the month name spans its Balance/Revenue pair
Header + sort	One header renderer keyed by each column's unique value; default sort is Total Amount descending, matching the reference
Expand/collapse	A single delegated pointerdown on the mount recomputes the visible rows, then updateData() and redraw
Currency + em-dash	Intl.NumberFormat USD; a dash placeholder when a value is 0
Recognized % bar	A custom cell: a muted NN% label over a green progress track
Column resize	enableResizeUI, with clamped-width sizing that keeps the horizontal-scroll path
Theme	Matches the built-in light look, so it syncs the built-in light/dark pair with the page theme

Built it as packages/samples/src/demos/revenue-recognition. A compact grouped-tree table: a pinned Name column with a collapsible Company > Contract > line-item tree and subtotal rows; a two-level column band (four flat measures, then December and November 2024 each over Balance + Revenue); USD formatting with a dash for zeros; and a green inline recognition bar. Expand/collapse, click-to-sort (default Total Amount descending) and column resize all work, over one persistent viewmodel updated via updateData(). The theme follows the page light/dark.

Three deliberate deviations from the screenshots: several companies instead of only Dharma (Dharma is scaled largest so it still leads under the default sort); Recognized % varies - a mix of 100% and partials - so the bars and the Deferred column actually show range; and all numeric columns are right-aligned.

human
Did you only generate data for December and November 2024?
agent
Yes - the per-row measures were only Total Amount, Deferred, and Recognized, plus a Balance and Revenue for December 2024 and November 2024. Those two month-groups were hardcoded, so the schedule stopped at November. I can make the months data-driven instead: generate N months of { balance, revenue } per line item and emit a column group per month, which also makes the horizontal scroll more meaningful. Want me to extend it?
human
Yes, extend the monthly schedule back through January.
agent
Done - the schedule is now data-driven and runs December 2024 back to January 2024 (12 month-groups, each with a Balance and a Revenue column). Everything derives from a single MONTHS array, so the columns, headers, generator and subtotals all follow it; each line item generates a { balance, revenue } per month, and every group row sums them. Sorting works on any month column, and expand/collapse is unchanged.
```
const MONTHS = ["December 2024", "November 2024", /* ... */ "January 2024"];

// one Balance + Revenue column per month, grouped under the month name
MONTHS.forEach((month, i) => {
  cols.push({ key: `m${i}-bal`, label: "Balance", group: month,
    sortValue: (n) => n.measures.months[i].balance,
    renderer: money((n) => n.measures.months[i].balance) });
  cols.push({ key: `m${i}-rev`, label: "Revenue", group: month,
    sortValue: (n) => n.measures.months[i].revenue,
    renderer: money((n) => n.measures.months[i].revenue) });
});
```
With 12 months the table is now far wider than its container, so there's plenty of horizontal scroll with the Name column pinned.

Pivot analytics

A full Tableau-style pivot builder: write cross / hierarchy / concat expressions for Rows and Columns, pick per-measure aggregations, toggle grouped rows with drill-down chevrons, and sort, filter and heatmap from the grid - aggregated live over 5,000 SaaS subscriptions.

human
Let's build a full-fledged, Tableau-style pivot-table builder. Use a real DuckDB datasource and the pivot datamodel - we can't hand-compute these aggregations. Generate a realistic, easy-to-follow dataset with at least 4 dimensions and 2 measures, kept small at around 5,000 rows. The layout is three regions: a compact left panel that lists every field with its type; a top panel with Rows and Columns editors where a table expression can be written (like cross(hierarchy(...), concat(...))); and the pivot table filling the center. Prepopulate a complex default expression so a table renders on load, but let me edit any variable or any expression. Validate the statement (for example, a measure can't come before a dimension), and while I type, show a VSCode-style autocomplete suggesting operators and field names - pull in a library if you need one. Add a 'Group Rows' toggle that shows already-open chevrons for dimensional drill-down (collapse / expand), and put filter and sort icons on the dimensional corner cells. Check the playground's pivot for reference. And since we're on DuckDB: when the IntersectionObserver fires, render / destroy the grid, but don't destroy the datasource if it's already been created.

agent

This one deliberately departs from the usual demo rules - demos normally hand-compute their data with no DataSource/DataModel, but you're explicitly asking for DuckDB + the pivot datamodel, so I'll use them. Before writing anything I read the real APIs: the playground's pivot wiring, DuckDBWasmDataSource, SqlPivotTableDataModel, and the table-algebra operators. Here's the aspect inventory mapped to what the grid already gives me versus what I have to build:

Aspect	How it maps
Pivot shape, DuckDB-backed	DuckDBWasmDataSource.create() -> loadData -> SqlPivotTableDataModel.getViewModelData(config) -> PivotDataViewModel; new Grid({}, mount, "pivot")
Left field panel	Demo chrome: a compact list of fields, each with a dimension / measure type badge, click-to-insert into the focused editor
Rows / Columns editors	Two single-line editors holding arbitrary cross / hierarchy / concat expressions, editable per axis
Table-algebra grammar	NET-NEW: the grid ships no string parser, so I write a recursive-descent parser (string -> AxisExpr) plus a serializer
Validation	NET-NEW: no validator exists either - unknown field, hierarchy must be dimensions, a dimension can't follow a measure, at least one measure across the two axes
Autocomplete	A token-aware completion source feeding a caret-anchored popup (operators + fields, restricted to dimensions inside hierarchy())
Group Rows + chevrons	Dimensional projection: full-open projection built from the in-memory dims; a facet renderer draws open chevrons; a click toggles a collapsed set and re-queries
Corner sort / filter	A facet header renderer puts sort/filter icons on the dimensional corner cells; distinct filter values via resolveFacetValues
IntersectionObserver	Observe the mount: create / destroy the Grid on visibility, but memoize the datasource/model so DuckDB is loaded exactly once and survives a hide/show
Theme	A registered light+dark theme pair that follows the page theme, with the surrounding chrome painted from CSS variables

Four decisions genuinely change what I build - here's what I'd pick for each:

How should the VSCode-style autocomplete + grammar be implemented? (samples has no bundler; web bundles it via Turbopack, and this is the first place web loads a heavy browser dep.)Custom lightweight parser + completion source - the grammar is tiny (three operators over field names), so a hand-written recursive-descent parser beats pulling in CodeMirror / Monaco
What business domain should the 5k-row dataset use? (needs 4+ dimensions, 2+ measures, easy to follow.)SaaS subscriptions - a region > country hierarchy plus plan, industry and channel dimensions, with MRR, seats, signups and churned as measures
What visual theme should the module use?A custom Tableau-like light/dark palette registered as its own theme pair
The spec describes a lot. Build the full feature set in one pass, or stage it?Full build in one pass

agent

Confirmed all four: custom lightweight parser/autocomplete, a SaaS dataset, a custom Tableau-like theme pair, built in one pass. Before building I confirmed one make-or-break integration risk in a real production build - DuckDB-WASM bundles cleanly under Next 16 / Turbopack static export (this is the first time web loads DuckDB in the browser). Then I built it as packages/samples/src/demos/pivot-studio, split into focused files:

File	Responsibility
data.ts	Seeded SaaS dataset: region > country hierarchy + plan / industry / channel dimensions; MRR ($) / seats / signups / churned measures; column-major, deterministic
algebra.ts	The net-new grammar layer: tokenizer -> recursive-descent parser (string -> AxisExpr), serializer, semantic validator, and a token-aware completion source
editor.ts	Single-line expression editor with the VSCode-style autocomplete popup and an inline validity indicator; debounced commit that never fires for an invalid expression
popups.ts	Theme-adaptive corner sort / filter popups; filter values resolved via resolveFacetValues
theme.ts	The registered light/dark theme pair plus the chrome palette (--ps-* variables)
demo.ts	Orchestration: one persistent PivotDataViewModel via updateData; Group Rows projection; IntersectionObserver render/destroy that keeps the datasource alive

Default expressions are prepopulated and auto-render on load:

const DEFAULT_ROWS = "hierarchy(region, country, industry)";
const DEFAULT_COLUMNS = "cross(plan, concat(mrr, seats))";

// DuckDBWasmDataSource -> SqlPivotTableDataModel -> PivotDataViewModel
const source = await DuckDBWasmDataSource.create();
await source.loadData({ schema: dataset.schema, data: dataset.data });
const model = new SqlPivotTableDataModel(dataset.schema, source);
const result = await model.getViewModelData(buildConfig());

Group Rows is on by default with open drill-down chevrons; editing either expression re-parses, validates and (if valid) re-queries DuckDB; and the IntersectionObserver creates/destroys the Grid on visibility while ensureData() keeps the DuckDB datasource/model/viewmodel alive, releasing only on unmount.

human
Two things to reclaim space for the pivot. Make the left-hand field list more compact. And compress the top panel: instead of a separate 'valid expression' text line under each editor, put an inline green-tick / red-cross icon at the right edge of the input, with the message in its tooltip. Also the light theme borders are almost invisible inside the facet - make the gridlines darker.
agent
Three changes, all in. (1) The left field panel is narrower (208 -> 172px) with tighter chip padding and smaller type - noticeably denser. (2) Dropped the separate validity text line: validity is now a small green-tick / red-cross icon inline at the right edge of each input, message in its native tooltip - so each editor is a single row and the two editors reclaim ~2 rows of height for the pivot. (3) Darkened the light-theme facet gridlines (cell borders #e4e8ec -> #c3ccd6, the facet-to-data separators #cfd8e0 -> #94a6b6) so the internal lines in the corner/header region read clearly. Dark theme untouched.
human
Add a per-measure aggregation dropdown. After each measure in the left panel, put a small dropdown - default to sum, but offer a few aggregation functions (avg / count / min / max) for that measure, so I can change how it rolls up in the hierarchy.
agent
Done. Each measure now has a compact aggregation dropdown (sum default, plus avg / count / min / max). The grid resolves a measure's aggregation from its schema entry's aggregateFn - read by reference on every getViewModelData - so on each rebuild I sync the chosen function onto the schema and DuckDB regenerates SUM/AVG/COUNT/MIN/MAX(...) SQL with no data reload:
```
// The model reads aggregation straight off the schema objects (by reference),
// so pushing the current per-measure choice re-runs the SQL with it.
for (const s of dataset.schema) {
  if (s.type === "measure") s.aggregateFn = measureAgg.get(s.name) ?? "sum";
}
const result = await model.getViewModelData(buildConfig());
```
Formatting adapts too: MRR stays currency for sum/avg/min/max but renders as a plain integer under count, and non-currency measures keep one decimal so averages read correctly while sums/counts stay whole. The dropdown stops click propagation so opening it doesn't trigger click-to-insert.
human
The pivot header now says things like SUM(Enterprise) - that's wrong. Enterprise is a dimension value, and dimensions never get an aggregation qualifier. Just keep the dropdown on the left panel; drop the qualifier from the header entirely.
agent
Good catch - the AGG() qualifier had landed on the plan dimension values because the column facet level order wasn't what I assumed, and dimensions shouldn't carry an aggregation label at all. I removed the header relabeling entirely. Dimension values (Enterprise, Free, ...) and measure names render plainly again, and the aggregation is controlled solely by the left-panel dropdown - which still drives the actual schema-driven aggregation and the data-cell formatting.
human
The row-facet filters and sorts are wrong: every field's filter popup says the same thing, and so does every field's sort - they all act on a single dimension instead of the one whose icon I clicked. This only happens in the row facet.
agent
Root cause is a genuine grid quirk. For a pivot, all row-facet corner headers render in the same column-facet header row, so the ctx.level the grid passes to my header renderer is identical for every one of them - my code was using it as the dimension index, so all three collapsed to a single field. (Column headers were unaffected because there ctx.level really is the column-facet level.) The fix is to bind the correct field into each level's renderer at construction instead of reading ctx.level:
```
// The field is bound per level here, not read from ctx.level: for a pivot the
// row-facet corner cells all render in the same column-facet header row, so
// ctx.level is identical across them and cannot identify the dimension.
function makeRowHeaderRenderer(field: string | undefined): FacetHeaderRenderer {
  return text => {
    if (!field) return text || "";
    return { left: sortIconEl(field), content: text || label(field), right: filterIconEl(field) };
  };
}
```
Now clicking sort or filter on Region / Country / Industry opens the popup for that exact field, each with its own distinct values.
human
Below the Group Rows toggle, add a Format control - a dropdown with None / Heatmap. For each measure, compute the average across all its values and color each cell by how far it sits above or below that average. For aggregated rows (a collapsed group's subtotal) skip the conditional formatting - you can tell from the viewmodel whether a row is aggregated. Use the metadata plumbing to compute the stats and push them to the renderer.
agent
Built it through the grid's metadata plumbing exactly as you asked. A reshaper-only PivotMetadataPlumber (stats.ts) is passed to the model; on each query it computes per-measure avg/min/max across leaf value cells (so collapsed-group subtotals don't skew the baseline) into metadata.valueColumns, and flags aggregated rows into metadata.valueRows (detected as the deepest row-dimension facet value being null):
```
model = new SqlPivotTableDataModel(dataset.schema, source, createStatsPlumber());

// value renderer, one per data column - reads the stats back off metadata
const meta = dataCtx.viewModel.metadata;
if (meta?.getValueRowMeta(dataCtx.rowIndex)?.aggregated) return text; // skip subtotals
const avg = Number(meta?.getValueColumnMeta(dataCtx.colIndex)?.avg);
const pct = (Number(dataCtx.rawValue) - avg) / Math.abs(avg);
const color = pct >= 0 ? "var(--ps-up)" : "var(--ps-down)";  // green up / red down
```
Switching Format re-skins cells from the cached result with no re-query (the renderer reads the mode live; I route it through applyResult() so the redraw actually repaints the backgrounds). Colors are theme-adaptive in both light and dark, and collapsed rows like 'North America' stay plain.
human
The bar option doesn't make sense - delete it. Keep only None and Heatmap.
agent
Removed the Bar mode entirely - the FormatMode type is now "na" | "heatmap", the dropdown shows only None and Heatmap, and the renderer's bar branch is gone.
human
Re-theme the whole module with Ayu (the popular terminal color scheme) - Ayu Light for light and Ayu Dark for dark.
agent
Done - both the grid facets and the surrounding chrome are now Ayu in both modes. Ayu Light: warm off-white surfaces (#fcfcfc / #f3f4f5), text #5c6166, the signature gold-orange accent #ff9940, blue dimension badges (#399ee6), lime-green 'up' heatmap (#86b300) and coral 'down' (#e65050). Ayu Dark: deep #0b0e14 base with #0f131a panels, warm off-white text #bfbdb6, gold accent #e6b450, cyan-blue dimension badges (#59c2ff), and Ayu's lime/coral for up/down (#aad94c / #f07178). Everything still follows the page theme, so toggling light/dark swaps the whole module - editors, field panel, popups, toggles and the heatmap - between the two Ayu palettes.
human
In the grid, right-align and monospace all the value cells with 3px of right padding, and drop the global vertical cell padding to 3px.
agent
Both applied. There was a subtlety worth noting: a value cell with a custom renderer gets the .cell.data.custom-rendered class, whose CSS forces justify-content: center and padding: 0 - and since .cell is a flexbox, text-align is a no-op. So the renderer restores alignment and padding on the container directly:
```
// A custom renderer flips the data cell to `.custom-rendered`, which centres
// content and zeroes padding - restore right-alignment and padding here.
container.style.justifyContent = "flex-end";
container.style.fontFamily = "'SF Mono', ui-monospace, Menlo, Consolas, monospace";
container.style.fontVariantNumeric = "tabular-nums";
container.style.paddingRight = "3px";
```
Numbers now sit right-aligned and monospaced with tabular figures 3px from the right edge (in both None and Heatmap modes), and cellPaddingY in the shared theme base dropped 7 -> 3px so all rows are tighter.

Our guiding principles

SuperPlot is agent-first by design. Instead of a monolithic component with hundreds of options, it offers composable layers with typed contracts that agents and humans can reason about, generate, and verify.

Headless architecture

The grid core has no UI framework dependency. Data modeling, viewmodel construction, and rendering are separate layers with typed contracts, so agents can compose them the same way in any stack.

Learn more

Fullstack grid

One pipeline runs from storage to pixels: DataSource, DataModel, DataViewModel, Renderer. SQL generation, aggregation, and virtualization are built in — no hand-stitched glue between frontend and backend.

Learn more

Table algebra

Pivot layouts are expressions built from cross, hierarchy, and concat operators. A layout is data an agent can generate, inspect, and refine — not a pile of imperative configuration calls.

Learn more

Core features and capabilities

Built for agents

A layered, open-code architecture with metadata plumbing that lets an agent reliably generate any grid.

Explore

Full-stack grid

One pipeline from SQL datasource to pixels, with server-side query generation and agent skills.

Explore

Pivot with table algebra

Compose pivots from cross, hierarchy and concat operators instead of imperative config.

Explore

Grouped and tree tables

Flat grouping paths and multi-level tree tables with depth, leaf and expand state.

Explore

Fast and realtime

Virtualized rendering with smooth scrolling and lightweight dom management that provides blazing fast rendering performance for realtime updates.

Explore

In-cell charts

Render sparklines, bars and heatmaps inside cells with custom renderers.

Explore

Sort, filter, paginate, project

Sorting, filtering, pagination and dimensional projections handled at the data layer.

Explore

Accessible

Semantic, keyboard-reachable DOM with expanding ARIA and screen-reader support.

Coming soon

Themable

Theme tokens and renderer CSS to match any design, in light and dark.

Explore

What does it mean to be built for agents?

Building for agents changes three things: the primitives a library exposes, the architecture choices it supports, and how the work around the library is done - its documentation, tests, and evals.

Dimension	Built for agents	Built for humans
Use cases & personalization	Supports a far wider range of use cases and deeper personalization	Targets the common, high-value cases; the long tail is traded away for speed and simplicity
Abstraction	Exposes the real abstractions the library is built on	Wraps them in config options and layers of convenience abstraction - not because humans can't handle the real thing, but because it is optimized for fast value creation
Primitives	Programmatic access with tight control at each extension point	Primitives that are quick and easy to implement, but lose extensibility
Surface area	Once the abstraction is set, the surface stays small; the concepts you compose stay domain-specific	A combinatorial surface of options to cover every domain-specific case

A library built for agents can be used just as well by humans. In fact, given time and patience, a human will use it even better than an agent.

Common questions

Who is SuperPlot grid for?

SuperPlot exposes primitives for agents and is deliberate about what goes into its core. A human developer can work with it just as well, but it is built for agents first.

How do I install and get started?

Ask your agent to follow superplot.dev/grid/setup-skill.md. For more detail, see the installation guide.

What frameworks and versions are supported?

We ship React bindings out of the box. Thanks to our architecture, agents can build throwaway adapters for any other framework.

How is it different from other grids out there?

It is highly performant, deeply extensible, and extremely flexible, and it handles the full stack of a grid implementation, from data to pixels.

How does it perform with large datasets?

With virtualization and our DOM management, over 3M rows render in the browser. When the data comes from a backend, our data model's page cache and eviction mean there is practically no limit.

Is it mobile responsive?

Yes. Our layouts are built on CSS primitives, so they adapt responsively.

Can I customize the look and feel?

We feed agents metadata from our theming system, so you can customize practically anything. Take a look at our demos to see what is possible.

Is SuperPlot grid free to use?

Yes. It is free and open source under the MIT license. See the GitHub repository.

Is it production ready and actively maintained?

Yes. An active and experienced team works behind it.

What kind of support do you offer?

Yes. Reach out through our contact page and we will help.

Where can I find documentation and examples?

Explore our live demos and browse the documentation.

Get started

Open your preferred coding agent
SuperPlot is agent-agnostic - use whichever coding agent you already work in. The setup instructions read the same to all of them.
Paste the following prompt
Our setup skill will guide your agent to set up SuperPlot for you. Copy the following prompt and paste it in your agent.
```
I want to set up @superplot/grid. Read
https://superplot.dev/grid/setup-skill.md
and follow its instructions.
```
Converse with your agent to create a grid
Our skill prompts your agent to ask you the right questions before it starts building, so don’t worry if you don’t have everything up front. Here is an example to start from.
```
Create a standard grid to show all the data, i should be able to sort the columns and filter by string.
```

Read the docs

The JavaScript grid built for agents

Demos

Sales

Infrastructure

Finance

Billing

Pivot analytics

Our guiding principles

Headless architecture

Fullstack grid

Table algebra

Core features and capabilities

Built for agents

Full-stack grid

Pivot with table algebra

Grouped and tree tables

Fast and realtime

In-cell charts

Sort, filter, paginate, project

Accessible

Themable

What does it mean to be built for agents?

Common questions

Who is SuperPlot grid for?

How do I install and get started?

What frameworks and versions are supported?

How is it different from other grids out there?

How does it perform with large datasets?

Is it mobile responsive?

Can I customize the look and feel?

Is SuperPlot grid free to use?

Is it production ready and actively maintained?

What kind of support do you offer?

Where can I find documentation and examples?

Get started

Open your preferred coding agent

Paste the following prompt

Converse with your agent to create a grid