Every dashboard prompt I tried gave me the identical gray-card-with-a-number-and-a-tiny-line-chart layout, and a table that was just a styled div with none of the behavior that makes a table useful.
I rewrote the ask to demand real table behavior (sort, filter, paginate, sticky header, keyboard nav) with a distinct visual point of view I got to name, and to build it around a typed column definition so I can reuse it. It came out looking intentional and actually worked with 5k rows.
How do you get variety in the look without it drifting into something unusable?
Build a reusable data table component for a React + TypeScript dashboard. Behavior first, then a deliberate visual identity, NOT the default shadcn gray-card look.
API: driven by a typed `ColumnDef<T>[]` where each column declares key, header, an optional cell renderer, sortable, and align. The table is generic over the row type T; no `any`.
BEHAVIOR (all required, no placeholders):
- Sorting: click header to sort asc/desc/none, multi-column with shift-click. Sort is stable.
- Filtering: a per-column filter and a global search box.
- Pagination: page size selector; must stay smooth at 5,000 rows (virtualize the body if needed).
- Sticky header, resizable columns, and full keyboard navigation (arrow keys move the focused cell, Enter activates).
- Empty, loading, and error states are first-class, not afterthoughts.
ACCESSIBILITY: proper table semantics (role, scope, aria-sort on sorted headers). Focus is visible and never trapped.
VISUAL IDENTITY: pick ONE point of view and commit (e.g. dense terminal-inspired, or airy editorial with generous line-height). Justify the type scale and spacing. Do not output generic gray cards.
CONSTRAINT: strict TS, builds clean, and works with an unknown-in-advance row shape. Deliver the component, the ColumnDef type, and a usage example with 3 columns.