Skip to content

refactor(ui5-table): implement empty area rendering with custom focus outline#13462

Open
aborjinik wants to merge 2 commits intomainfrom
table-empty-area
Open

refactor(ui5-table): implement empty area rendering with custom focus outline#13462
aborjinik wants to merge 2 commits intomainfrom
table-empty-area

Conversation

@aborjinik
Copy link
Copy Markdown
Contributor

@aborjinik aborjinik commented May 4, 2026

Summary :

  • Renders a "dummy cell" (minmax(0, 1fr)) in tables where all columns have explicit widths, filling the remaining empty space to the right of the data columns
  • Implements a custom per-cell focus outline using box-shadow that excludes the empty area, with full RTL support
  • Moves shared row logic (focus(), _hasPopin, popin attribute management) from TableRow into TableRowBase so both data rows and header rows benefit
  • Hides the row actions column when the table has no rows
  • Reorganizes sticky cell and navigated cell CSS from TableRow.css into TableRowBase.css for proper inheritance
  • Missing documentation review of feat(ui5-table-cell): merged property added #13297 is applied

Dummy cell rendering:

  • Table.ts computes _hasFlexibleColumns and sets _renderDummyCell on all rows
  • Grid template columns include a minmax(0, 1fr) dummy column positioned before or after actions depending on popin state
  • Dummy cell has a left border (fixed column separator) when not in popin mode

Custom focus outline:

  • When a row with a dummy cell is focused (non-popin), the standard outline is replaced with per-cell box-shadow insets
  • _handleCustomFocusOutline() marks first/last visible cells via data-ui5-custom-outline attribute (start, end, or startend for single-column tables)
  • CSS variables --_ui5_table_cell_custom_outline_block, inline-start, inline-end define the shadow values, with :dir(rtl) overrides

Refactoring:

  • _hasPopin getter moved to TableRowBase with additional rows.length > 0 guard (prevents popin rendering in empty tables)
  • Attribute renamed from _haspopin to _has-popin for consistency with kebab-case convention
  • Navigated cell clip-path and focus rules consolidated using CSS nesting
  • Sticky cell styles (position: sticky, z-index, background-color) moved to TableRowBase.css

@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 4, 2026 15:00 Inactive
@aborjinik aborjinik requested a review from simlin May 4, 2026 15:31
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