Records Table

Records Table is a table in which some columns are generated: an agent reads each record and fills in a summary, a category, a score. Each generated cell shows where it stands, and a line under the table counts how many are done.

It shows the state you pass for every cell. Running the agent, and deciding the order, are your application's work.

Use Data Grid when people need to sort, resize, or edit columns. The Beautiful UI original also had column settings and resizing, which Data Grid already covers.

Installing records-table brings Button and Table along as registry dependencies.

Generated cells

A generated cell is queued, running, done with a value, or error with an optional message. A cell with no state reads as queued.

Retry

Pass onRetry to show Retry in every failed cell. It calls your handler with the row and column ids.

Progress

The line under the table counts done cells across every generated column. It is left out when the table has no generated columns.

The table uses native markup with column headers and is named by label. A generated column's header is read with "Generated: " before it. Queued, working, and failed are words in the cell, so no state depends on an icon or a color.

Retry is named with its column and row, such as "Retry Payment summary for Harbor Paper Co.". The progress line is a polite status, so each completed cell is announced as a count, not as a re-reading of the table. With reduced motion, the working icon does not rotate.

import { RecordsTable } from "@/components/ai/records-table"

<RecordsTable
  label="Suppliers"
  columns={[
    { id: "name", header: "Supplier" },
    { id: "summary", header: "Payment summary", isGenerated: true },
  ]}
  rows={suppliers.map((supplier) => ({
    id: supplier.id,
    name: supplier.name,
    cells: { name: supplier.name },
    generated: { summary: enrichment.cellFor(supplier.id) },
  }))}
  onRetry={(rowId, columnId) => enrichment.retry(rowId, columnId)}
/>

All cells done

A settled table. The progress line reads 2 of 2.

RecordsTable

Types