Xzero UI
Pro library
Special componentsEnrich column

Enrich columnPro

An AI enrichment column for a data table, where one prompt runs down every row and each cell shimmers while it works, then settles into a value with its source or a failure you can retry.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/enrich-column
Live · keyboard ready

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/enrich-column

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { EnrichColumn } from "@/components/xzero/enrich-column/enrich-column";

<EnrichColumn
  title="Pipeline"
  rows={accounts.map(account => ({ id: account.id, name: account.name, domain: account.domain }))}
  defaultColumn={{ name: "Headcount and funding", prompt: "Find the headcount and latest funding round" }}
  enrich={async (row, { prompt, signal, setActivity }) => {
    setActivity(`Searching for ${row.name}`);
    const response = await fetch("/api/enrich", { method: "POST", body: JSON.stringify({ domain: row.domain, prompt }), signal });
    if (!response.ok) throw new Error("No source found");
    return response.json(); // { value, source: { label, href } }
  }}
  onCellChange={(row, cell) => cell.status === "done" && save(row.id, cell)}
/>

API reference

EnrichColumn

A table card with an AI column. One prompt runs down every row; each cell shimmers while it works, then settles into a value with its source, or a failure with a retry. With no props it runs a simulated sample of seven companies.

PropTypeDefaultDescription
titlestring"Target accounts"The table's name in the top bar.
rowsEnrichColumnRow[]seven sample companiesThe rows to enrich: { id, name, domain?, logo? }. Logos render at 16px.
defaultColumn{ name: string; prompt: string }{ name: "Headcount and funding", prompt: "Find the headcount and latest funding round" }The AI column's name and prompt on first render. The person can edit both from the column header.
onColumnChange(column: EnrichColumnDefinition) => void–Called when the person saves an edited column. Saving re-runs every row.
enrich(row, context) => Promise<{ value: string; source?: { label: string; href: string } }>local simulationFills one cell. The context carries prompt, column, an AbortSignal, the attempt number and setActivity(text) for the shimmering label. Reject to mark the cell failed with the error's message.
initialCellsRecord<string, EnrichColumnCell>–Values you already have, keyed by row id, such as cells saved from an earlier run.
concurrencynumber2How many cells run at once. Workers start 140ms apart so the column fills top to bottom.
autoRunbooleantrue with the simulation, false with enrichRuns the column once when it first scrolls into view, if no cell has a value yet.
model{ name: string; detail?: string; mark?: ReactNode } | nullClaude Haiku 5.5, web searchThe model shown in the footer. Pass null to hide it.
editablebooleantrueShows the edit control on the AI column header.
notestring"sample data" with the simulationA short note after the row count.
onCellChange(row: EnrichColumnRow, cell: EnrichColumnCell) => void–Called whenever a cell changes state (queued, running, done, failed). Use it to persist values.
onRunComplete(cells: Record<string, EnrichColumnCell>) => void–Called when a run settles, with every cell.
classNamestring–Class on the root.

Keyboard interactions

KeysAction
TabMoves through Run column, the column's edit control, each row's run or retry control and source links. Row controls appear on focus.
Enter / SpaceRuns, stops or re-runs the column, runs one row, or retries a failed cell.
Cmd/Ctrl + EnterSaves the edited column and re-runs it.
EscapeCloses the column editor without saving and returns focus to the edit control.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Also in ai

Guidance for AI tools

Enrich column: An AI enrichment column for a data table, where one prompt runs down every row and each cell shimmers while it works, then settles into a value with its source or a failure you can retry. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components