dev-rcfa-memory/fe-digitaltwin-v2/prompts/components/data-table/prompt.md

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.