Batch Job Matrix React component
See a big batch at a glance: one square per job, coloured by status, with pills to pick out failures and a single button to retry them.
About the Batch Job Matrix component
Batch Job Matrix shows hundreds of small jobs on one screen. Each square is a job, so a problem in one group stands out long before anyone reads a log.
Pick a status to fade out the rest, point at any square to see what happened, and retry every failure with one button.
When to use it
Use it for batch processing, imports, migrations and any run with many similar jobs.
It suits a few hundred jobs. For thousands, show one square per group.
Installation
Add the Batch Job Matrix component to your project with the shadcn CLI. It lands in components/batch-job-matrix.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/batch-job-matrixProps
<BatchJobMatrix /> accepts 6 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Process March documents" |
| subtitle | string | "One square per document." |
| rows | { id: string; label: string; cells: BatchCell[] }[] | DEFAULT_ROWS |
| retryMs Milliseconds between each retried job finishing. | number | 180 |
| onRetry | (ids: string[]) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Process March documents"
- subtitlestringDefault: "One square per document."
- rows{ id: string; label: string; cells: BatchCell[] }[]Default: DEFAULT_ROWS
- retryMs
Milliseconds between each retried job finishing.
numberDefault: 180 - onRetry(ids: string[]) => void
Batch Job Matrix FAQ
- Does Retry run the jobs?
- No. onRetry gives you the ids, and the squares show the demo result until you pass new data.
- How is the size decided?
- Squares share the measured width evenly, so they fit any card.
- Can people see details on a phone?
- Yes. Tapping a square shows the same line as pointing at it.
- Is it readable without colour?
- The pills give counts for each status, and the chart has a text summary for screen readers.
