React Data Table
A typed, column-driven table for dense engineering data — lot tracking, test results, device inventories. Uppercase column headers, hairline row separators, right-aligned monospaced numerals, and custom cell renderers for status badges. No zebra stripes, no shadows: the restrained look of MES and EDA tooling.
| Lot ID | Product | Stage | Wafers | Yield | Status |
|---|---|---|---|---|---|
| LOT-24A118 | AXM-330 | Metal 2 Etch | 25 | 94.2% | In line |
| LOT-24A121 | AXM-330 | CMP Oxide | 25 | 93.7% | In line |
| LOT-24A097 | RFX-91 | Final Test | 24 | 91.5% | Complete |
| LOT-24A104 | AXM-330 | Implant Well | 25 | — | Hold |
| LOT-24A089 | PMU-12C | Wafer Sort | 22 | 88.9% | Complete |
| LOT-24A076 | RFX-91 | — | 3 | — | Scrapped |
Installation
npx shadcn@latest add "http://localhost:3000/registry/data-table.json"
Usage
Define your row type once; columns are checked against it.
Loading...
Design notes
- Numbers right-aligned, in mono — quantities and percentages align on the decimal, the convention in test reports and MES screens.
- Status is icon + label — badge cells pair a dot with text, never color alone.
- Empty state built in — zero rows renders a quiet "No data available." row spanning all columns.
Props
DataTable
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | — | Row objects |
| columns | Column<T>[] | — | Column definitions (see below) |
| caption | string | — | Optional table caption, rendered below |
Column
| Prop | Type | Default | Description |
|---|---|---|---|
| header | string | — | Column header text |
| accessorKey | keyof T \ | string | — |
| cell | (item: T) => React.ReactNode | — | Custom cell renderer |
| align | 'left' \ | 'center' \ | 'right' |
| className | string | — | Extra classes for header and cells |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.