feat(OneTable): add onHeaderClick to table column headers#4351
feat(OneTable): add onHeaderClick to table column headers#4351FaithAdekunle wants to merge 2 commits into
Conversation
Add an optional `onHeaderClick` callback to `TableHead` and the OneDataCollection table column definition. When provided, the header label becomes an interactive button, independent of sorting, so it can coexist with `onSortClick`. This enables consumers (e.g. Financial Workspace employee-cost tables) to open a side panel scoped to the clicked column. Includes stories for both the low-level OneTable and the OneDataCollection table column API. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
✅ No New Circular DependenciesNo new circular dependencies detected. Current count: 0 |
📦 Alpha Package Version PublishedUse Use |
🔍 Visual review for your branch is published 🔍Here are the links to: |
✅ No breaking public API changesNo public exports were removed, renamed, or had existing props/types changed in a breaking way compared to Comparing |
Coverage Report for packages/react
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||
Add unit tests verifying the header label renders as a button and fires onHeaderClick on click, that no button is rendered without the callback, and that onHeaderClick works independently of sorting on the same column. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Could you please add a video demonstrating this new behavior? It'd be interesting to see how both the onClick trigger and sorting button coexist 🙏🏼 |
The header text itself serves as the onClick trigger while the sorting button remains as is. Screenshare.-.2026-06-10.1_20_26.PM.mp4 |
2 participants
What
Adds an optional
onHeaderClickcallback toTableHeadand to the OneDataCollection table column definition. When provided, the column header label becomes an interactive button.Key points:
onHeaderClickandonSortClickcan coexist on the same header (the sort button remains separate).Pick<ComponentProps<typeof TableHead>, …>in the table column type, so it flows through the existing{...column}spread inTable.tsxwith no render changes.Why
Consumers need to trigger an action scoped to a clicked column header — e.g. the Financial Workspace employee-cost table opens a workforce/headcount side panel when a month header is clicked. The legacy table supported this via a per-header
onClick; the OneDataCollection table had no equivalent, so the behavior was lost in the migration. This restores that capability at the design-system level.Changes
experimental/OneTable/TableHead/index.tsx— newonHeaderClick?prop; label renders as a focusable button when set.patterns/OneDataCollection/visualizations/collection/Table/types.ts— exposeonHeaderClickon the column definition.OneTable→ClickableHeader(incl. coexistence with sorting).TableWithClickableHeaders(column-level API).Follow-up (downstream)
Once released, bump
@factorialco/f0-reactin thefactorialmonolith and wireonHeaderClickinto the Financial WorkspaceDataCollectionTable(separate PR).