[C07] Data Table (component)

Column resize and hide/show (FU-3, FU-4).

Sticky headers (FU-1). Not built with the component: the table scrolls horizontally inside a table-responsive container, which defeats position: sticky against the page, so a sticky header needs the table to own a fixed-height scroll container — a layout decision, not a style.

A server-side sort and paginate adapter. The table emits the next sort and the list writes it to the URL; pagination is the list’s pagination bar, outside the table. See Design Decisions.

Side panels and modals — summoned by the list from a cell or a row click, never owned by C07.

Touch / mobile responsive treatment (FU-6).

Row-selection keyboard interaction — Space to select, Shift+click for a range, arrow-key navigation (FU-5). Clickable rows can opt into Enter and Space activation (rowKeyboard); every control in a cell is an ordinary focusable button or link.

Sibling dimming around the focused row. The focused row is highlighted; its siblings are not dimmed.

Portal Pattern

UI Design Principles

design-journal/2026-04/jhipster-filterable-data-table.adoc — table substrate pattern (filter / sort / pagination shared layer); C07 is the visual substrate, the headless adapter is the data substrate. Eventual composition.

design-journal/2026-04/admin-portal-screen-design-prompt-iteration.adoc — broader handoff workflow.

E02 Event Participants — first canonical consumer; the design prototype was driven by E02’s column set.

C04 Reassignment Dialog — modal pattern that calling screens summon via onRowClick.

_explore-bulk-toolbar/Bulk Toolbar Variants.html (in the design bundle) — the placement exploration that picked variant E.

Component, not screen (2026-04-30). C07 is the only entry in this catalogue that is a component spec rather than a screen use-case. The C-prefix is allocated because the catalogue’s namespace covers "anything cross-cutting"; component contracts qualify. Distinct from every other Cxx in two ways: no actor flow, no :design-url: of its own when accessed via a consumer screen.

Locked bulk treatment — variant E (2026-04-30). 1.5px indigo border + 4px outer glow + bonded DTBulkBar. Five placements were compared (header swap, neutral bar above filters, indigo bar above filters, floating dock, table-attached glow); E was chosen for the strongest spatial link between actions and rows.

Mode toggle = bulkMode prop (2026-04-30). Caller-controlled, not derived from row count. Page chrome above the table is never modified by C07 — no layout jitter on enter/exit. Calling screens decide when to engage bulk mode based on their own selection-count rules (e.g. E02 engages at ≥2 selected; another consumer might engage at ≥1).

Click-to-act cells are caller-owned (2026-04-30). Cell renderers handle their own clicks; C07 provides the dt-stop mechanism so row-click bubbling is suppressed cleanly. E02's four click levels (row → side panel; Category → category dialog; Primary Number → C04; Order chip → C06 modal/popover) are all expressible without C07 coupling.

Sort + pagination are display-only (2026-04-30). C07 renders the sort indicator chevron; the consumer owns sort state + the data fetch. C07 renders no pagination chrome at all; the consumer renders pagination outside the wrapper. Server-side adapters are deferred until a consumer needs them.

Select all N pill is caller-driven (2026-04-30). C07 renders the pill when bulkTotal is provided AND count < bulkTotal. The action behind the pill (calling a "select-all-matching" backend endpoint, expanding the selection set, etc.) is the consumer’s job. C07 just exposes the affordance.

Selected row tint distinct from bar (2026-04-30). Selected rows tint to #f8f7ff — lighter than the bonded indigo BulkBar #4f46e5. The bar provides the unmistakable mode signal; row tint is gentle so the table stays scannable.

Inactive treatment is row-wide (2026-04-30). isRowInactive returning true strikes through and fades the entire row, every cell. Click handlers (row click, cell-render handlers) stay wired — operators may need to interact with cancelled-order chips on inactive EPs, etc.

Built on the substrate’s column, not beside it (2026-10-16). The C07 column extends the filter substrate’s ColumnConfig<T>, and the table hosts the per-column filter popovers itself. Each list passes its config through, so a column is declared once for the query, the chips and the table. The alternative — a C07-shaped column and a wrapper bridging the two — kept two declarations of every column in step for no gain.

Sort is emitted, not held (2026-10-16). A header click emits the next sort (asc → desc → off, shift-click stacks); the list writes it to the URL and passes it back. The cycle lives once in the table rather than in each list, and the list remains the only owner of sort state.

Bulk glow on the surface, command row untouched (2026-10-16). The table sits inside the list’s content surface and has no border of its own, so the bulk border and glow go on the surface, drawn so that nothing moves. The bulk verbs are on the bonded bar only; the command row keeps its page actions rather than swapping in a second copy of the same verbs away from the rows.

One failure row, distinct from empty (2026-10-16). A load failure renders as an alert row with Try again, never as the empty state, because an operator who cannot tell an outage from "there is nothing here" concludes there is nothing to act on.