You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
2.1 KiB
Markdown
48 lines
2.1 KiB
Markdown
# Reusable Data Table Component Prompt
|
|
|
|
Create a reusable typed `DataTable<TData>` for `<target feature or shared
|
|
location>`. Inspect the current table primitives and existing TanStack Table
|
|
usage first; build on them instead of introducing a second table system.
|
|
|
|
## React contract
|
|
|
|
- Generic data type: `TData`.
|
|
- Props: `data`, typed `columns`, `rowKey`, `isLoading`, `emptyState`,
|
|
`errorState`, optional `onRowClick`, and controlled
|
|
`<sorting/filtering/pagination/selection>` state.
|
|
- Use callbacks for feature actions and routing.
|
|
- Expose composition points for toolbar, bulk actions, and pagination.
|
|
- Keep remote fetching and authorization in the parent.
|
|
|
|
## Styling theme: dense operational data
|
|
|
|
- Header uses muted uppercase or compact semibold labels.
|
|
- Rows prioritize scanning: consistent alignment, restrained separators, and
|
|
tabular numerals for measurements.
|
|
- Selected, hovered, and focused rows are distinct in both themes.
|
|
- Status cells use an existing badge pattern; color is reinforced with text.
|
|
- Actions remain visually quiet until hover/focus.
|
|
- Use `bg-card`, `border-border`, `text-foreground`, and
|
|
`text-muted-foreground`; do not copy the hard-coded dark `.dt-data-table`
|
|
palette into a general-purpose table.
|
|
|
|
## Responsive behavior
|
|
|
|
- Preserve column meaning; do not silently hide required data.
|
|
- Use horizontal scrolling with a visible affordance for dense tables.
|
|
- Pin the action column only when requested: `<yes/no>`.
|
|
- Provide a compact mobile alternative only when its content mapping is defined:
|
|
`<mobile row/card mapping or "horizontal scroll">`.
|
|
|
|
## Acceptance criteria
|
|
|
|
1. Loading, empty, error, populated, and partial-data states are implemented.
|
|
2. Sortable controls are real buttons with accessible sort state.
|
|
3. Keyboard focus is visible and row actions do not accidentally trigger the
|
|
row click.
|
|
4. Controlled server-side pagination/filtering does not duplicate data fetching.
|
|
5. Generic types flow from rows into columns and callbacks without `any`.
|
|
|
|
Run focused linting allowed by the repository instructions and finish with a
|
|
simple **TL;DR**.
|