AI spreadsheetPro

A sheet where AI columns fill row by row as results stream in, with a fill rail per column, per row progress and errors, retry for one row or every failed row, and arrow key navigation.

Markdown

On this page

ProTwelve support tickets: Category and Summary fill row by row, one row is rate limited, Urgency waits for its prompt.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/ai-spreadsheet

Usage

tsx

import { AiSpreadsheet } from "@/components/ui/chatcn/pro/ai-spreadsheet"

<AiSpreadsheet
  columns={columns}
  rows={tickets}
  cells={cells}
  onFillColumn={fillColumn}
  onRetryRow={retryRow}
  onStopColumn={stop}
/>

Give a column ai: { prompt } to make it an AI column; {Column} in the prompt refers to another column by header. You own the work: onFillColumn(columnId, prompt, scope) starts it for all, empty or failed rows, and you write each row's state into cells[columnId][rowId] as it changes: queued, running with the partial value and an optional progress, done, error with a message that says how to fix it, or skipped with a reason. The header rail and the status bar count those states for you.

Examples

States

ProSettled with two fixable failures and a skipped row, mid fill, disabled, loading, no rows and error.

Props

Prop	Type	Notes
`columns`	`SheetColumn[]`	`{ id, header, type?, width?, ai?: { prompt, model? } }`
`rows`	`SheetRow[]`	Objects with an `id` and a value per column id
`cells`	`Record<col, Record<row, AiSheetCell>>`	`{ status, value?, error?, reason?, progress? }`
`onFillColumn`	`(col, prompt, scope) => void`	Scope is `all`, `empty` or `failed`
`onRetryRow`, `onStopColumn`, `onPromptChange`	callbacks	Row retry, stop, and Save in the prompt editor
`onAddColumn`	`() => void`	Adds a plus button after the last column
`activeCell`, `defaultActiveCell`, `onActiveCellChange`	`[row, col]`	Row -1 is the header
`loading`, `error`, `onRetry`, `emptyText`		Sheet states
`maxHeight`, `disabled`, `labels`		Scroll height, read only, every string

Keyboard

Key	Action
Arrow keys	Move between cells and the header
Home, End, Ctrl Home, Ctrl End	Row start and end, sheet start and end
Page Up, Page Down	Ten rows at a time
Enter on an AI header	Opens its prompt editor
Enter on a failed AI cell	Retries that row
Ctrl C or ⌘ C	Copies the active cell
⌘ Enter in the prompt editor	Fills the chosen rows

Accessibility

The grid follows the APG data grid pattern: one tab stop, roving focus, row and column indexes.
AI headers announce their fill count and failures; a column finishing is announced once in a polite live region, rows never are.
Status is never color alone: failed cells have an icon and their error, queued cells say Queued, running cells show a spinner and text.

Motion

The value streams into the cell with the kit's caret and a hairline under the cell tracks its progress. When a cell lands, a fill fades out over 700 ms, once. Rail ticks change color over 150 ms. Keyboard moves never animate. Reduced motion keeps the landing fade at 150 ms and drops the hairline transition.