Skip to content

feat(ui5-table-cell): merged property added#13297

Open
aborjinik wants to merge 1 commit intomainfrom
table-vertical-cell-merging
Open

feat(ui5-table-cell): merged property added#13297
aborjinik wants to merge 1 commit intomainfrom
table-vertical-cell-merging

Conversation

@aborjinik
Copy link
Contributor

@aborjinik aborjinik commented Mar 18, 2026

  • New merged boolean property on ui5-table-cell
  • Row borders refactored: border-top per cell instead of border-bottom per row
  • First row top border / last row bottom border handled via :first-of-type / :last-of-type
  • Selection highlight uses box-shadow instead of border-bottom to avoid layout shifts
  • Table now uses inset-inline-end/start, the old left/right + :dir(rtl) removed
  • When merged, cell's top border becomes transparent and content is hidden
  • Merging is disabled on hover/focus, content reveals with an opacity transition
  • Merging is also disabled when the row enters popin mode
  • Implemented via CSS Space Toggle trick, no JS needed
  • When a selection column is present, its border also syncs with the first merged cell
  • New TableCell website sample added for merged cells
  • Partially fixes [Feature Request]: <ui5-table-cell> should support colspan #7238
  • Also fixes [TableSelectionMulti]: Compact does not apply to checkboxes #13299
  • CPOUIFTEAMB-2624

@ui5-webcomponents-bot
Copy link
Collaborator

ui5-webcomponents-bot commented Mar 18, 2026

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 18, 2026 21:32 Inactive
@aborjinik aborjinik force-pushed the table-vertical-cell-merging branch from 0788571 to 3850936 Compare March 18, 2026 22:03
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 18, 2026 22:10 Inactive
@aborjinik aborjinik force-pushed the table-vertical-cell-merging branch from 3850936 to f65230c Compare March 19, 2026 11:13
- New merged boolean property on ui5-table-cell
- Row borders refactored: border-top per cell instead of border-bottom per row
- First row top border / last row bottom border handled via :first-of-type / :last-of-type
- Selection highlight uses box-shadow instead of border-bottom to avoid layout shifts
- Table now uses inset-inline-end/start, the old left/right + :dir(rtl) removed
- When merged, cell's top border becomes transparent and content is hidden
- Merging is disabled on hover/focus, content reveals with an opacity transition
- Merging is also disabled when the row enters popin mode
- Implemented via CSS Space Toggle trick, no JS needed
- When a selection column is present, its border also syncs with the first merged cell
- New TableCell website sample added for merged cells

- Partially fixes #7238
- CPOUIFTEAMB-2624
@aborjinik aborjinik force-pushed the table-vertical-cell-merging branch from f65230c to 3d669be Compare March 19, 2026 11:20
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 19, 2026 11:27 Inactive
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.

[TableSelectionMulti]: Compact does not apply to checkboxes [Feature Request]: <ui5-table-cell> should support colspan

2 participants