Skip to content

feat(ui5-table-row): add semantic click event on TableRow#13303

Open
pskelin wants to merge 2 commits intomainfrom
feat/table-row-click-event
Open

feat(ui5-table-row): add semantic click event on TableRow#13303
pskelin wants to merge 2 commits intomainfrom
feat/table-row-click-event

Conversation

@pskelin
Copy link
Contributor

@pskelin pskelin commented Mar 19, 2026

Summary

  • ui5-table-row now fires its own custom click event when an interactive row is activated via mouse click or Enter key
  • The native DOM click is intercepted in the constructor (like Button) and replaced with a CustomEvent that unifies mouse and keyboard activation
  • The existing Table-level row-click event is preserved for backward compatibility
  • Follows the established semantic click pattern used by Button, Link, Icon, CardHeader, and other components

This enables React consumers using createReactComponent to attach onClick handlers directly on <TableRow>:

<TableRow interactive={true} onClick={() => handleRowClick()}>

Implementation details

  • @eventStrict("click", { bubbles: true }) declared on TableRow
  • eventDetails.click declared on TableRowBase to maintain JSX type compatibility across the hierarchy (same pattern as SideNavigationItemBase)
  • Native click suppressed via stopImmediatePropagation in a constructor-registered listener, then forwarded to the Table's event router so TableNavigation and other extensions still work
  • _handleClick() fires fireDecoratorEvent("click") followed by _table._onRowClick() for backward compat

Test plan

  • New test: "fires click event on the row element" — verifies non-interactive rows don't fire, interactive rows fire CustomEvent on click and Enter
  • Existing row-click test still passes
  • Selection tests (TableSelections.cy.tsx) all pass — RowOnly behavior unaffected
  • TypeScript compiles cleanly
  • New RowClick sample renders correctly on the documentation website

TableRow now fires its own custom `click` event when an interactive
row is activated via mouse click or Enter key. The native click is
intercepted and suppressed, replaced by a CustomEvent that covers
both mouse and keyboard activation — matching the established pattern
used by Button, Link, Icon, and other components.

This enables React consumers using `createReactComponent` to attach
`onClick` handlers directly on `<TableRow>`. The existing Table-level
`row-click` event is preserved for backward compatibility.
Move @CustomElement decorator right after the @Class JSDoc block,
and place the event JSDoc + @eventStrict after it — matching the
established ordering used by Button and other components.
@ui5-webcomponents-bot
Copy link
Collaborator

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 19, 2026 16:27 Inactive
@ilhan007 ilhan007 requested a review from aborjinik March 19, 2026 16:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants