Describe the bug
When printing a page (or a document rendered inside an <iframe> for print preview) that contains a ui5-table, table rows are visually clipped at page break boundaries. The content of a row that spans a page break is split — the top portion appears at the bottom of one page and the bottom portion is cut off or hidden on the next page, resulting in partially visible rows.
This is demonstrated in the attached screenshot: avatar circles and text cells are truncated exactly at the page boundary.
Isolated Example
https://stackblitz.com/edit/github-abkpcvyg?file=README.md
Reproduction steps
- Render a
ui5-table with enough rows to span multiple print pages.
- Open the browser print dialog (
Ctrl+P / Cmd+P) or call window.print().
- Observe the print preview — rows near page boundaries are clipped.
Expected Behaviour
Table rows should not be clipped across page breaks. Each row should either render completely on one page or break gracefully without obscuring any content, consistent with standard CSS page-break-inside: avoid / break-inside: avoid behavior.
Screenshots or Videos
Actual Behavior
Rows that fall on a page boundary are clipped — part of the row content is hidden. This appears to be caused by the Shadow DOM structure and/or the internal scroll container used by ui5-table, which interferes with the browser's native print pagination algorithm.
Root Cause (suspected)
The ui5-table renders its rows inside a Shadow DOM subtree that likely uses an overflow container or custom layout. This prevents the browser's print engine from correctly computing break-inside: avoid across row boundaries. Native HTML <table> elements do not have this problem because the browser handles page-break logic natively for <tr> elements.
UI5 Web Components for React Version
2.23.0
UI5 Web Components Version
2.23.0
Browser
Chrome
Operating System
MacOS
Additional Context
No response
Relevant log output
Organization
SF-SAP
Declaration
Describe the bug
When printing a page (or a document rendered inside an
<iframe>for print preview) that contains aui5-table, table rows are visually clipped at page break boundaries. The content of a row that spans a page break is split — the top portion appears at the bottom of one page and the bottom portion is cut off or hidden on the next page, resulting in partially visible rows.This is demonstrated in the attached screenshot: avatar circles and text cells are truncated exactly at the page boundary.
Isolated Example
https://stackblitz.com/edit/github-abkpcvyg?file=README.md
Reproduction steps
ui5-tablewith enough rows to span multiple print pages.Ctrl+P/Cmd+P) or callwindow.print().Expected Behaviour
Table rows should not be clipped across page breaks. Each row should either render completely on one page or break gracefully without obscuring any content, consistent with standard CSS
page-break-inside: avoid/break-inside: avoidbehavior.Screenshots or Videos
Actual Behavior
Rows that fall on a page boundary are clipped — part of the row content is hidden. This appears to be caused by the Shadow DOM structure and/or the internal scroll container used by
ui5-table, which interferes with the browser's native print pagination algorithm.Root Cause (suspected)
The
ui5-tablerenders its rows inside a Shadow DOM subtree that likely uses anoverflowcontainer or custom layout. This prevents the browser's print engine from correctly computingbreak-inside: avoidacross row boundaries. Native HTML<table>elements do not have this problem because the browser handles page-break logic natively for<tr>elements.UI5 Web Components for React Version
2.23.0
UI5 Web Components Version
2.23.0
Browser
Chrome
Operating System
MacOS
Additional Context
No response
Relevant log output
Organization
SF-SAP
Declaration