[ui5-table]: ui5-table not overflowing without specifying width like the compat table

[floa93]

Bug Description

As we are upgrading from 1.x to 2.1.2 and migrating from the old ui5-table to the new one, we noticed that the new ui5-table does not behave the same as the old ui5-table. It does not overflow/scroll if there are no widths specified for the column headers even though overflow-mode="Scroll" is specified.

Example (when reducing the screen it should go overflow):

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cblxuPGhlYWQ-XG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpXCI-XG4gICAgPGRpdiBjbGFzcz1cInNlY3Rpb25cIj5cbjwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblx0XHQ8dWk1LXRhYmxlIGlkPVwidGFibGVcIiBvdmVyZmxvdy1tb2RlPVwiU2Nyb2xsXCI-XG5cdFx0XHQ8dWk1LXRhYmxlLWhlYWRlci1yb3cgc2xvdD1cImhlYWRlclJvd1wiPlxuXHRcdFx0XHQ8dWk1LXRhYmxlLWhlYWRlci1jZWxsIGlkPVwicHJvZHV0Q29sXCI-PHNwYW4-UHJvZHVjdDwvc3Bhbj48L3VpNS10YWJsZS1oZWFkZXItY2VsbD5cblx0XHRcdFx0PHVpNS10YWJsZS1oZWFkZXItY2VsbCBpZD1cInN1cHBsaWVyQ29sXCI-U3VwcGxpZXI8L3VpNS10YWJsZS1oZWFkZXItY2VsbD5cblx0XHRcdFx0PHVpNS10YWJsZS1oZWFkZXItY2VsbCBpZD1cImRpbWVuc2lvbnNDb2xcIj5EaW1lbnNpb25zPC91aTUtdGFibGUtaGVhZGVyLWNlbGw-XG5cdFx0XHRcdDx1aTUtdGFibGUtaGVhZGVyLWNlbGwgaWQ9XCJ3ZWlnaHRDb2xcIj5XZWlnaHQ8L3VpNS10YWJsZS1oZWFkZXItY2VsbD5cblx0XHRcdFx0PHVpNS10YWJsZS1oZWFkZXItY2VsbCBpZD1cInByaWNlQ29sXCI-UHJpY2U8L3VpNS10YWJsZS1oZWFkZXItY2VsbD5cblx0XHRcdDwvdWk1LXRhYmxlLWhlYWRlci1yb3c-XG48IS0tIHBsYXlncm91bmQtZm9sZCAtLT5cblx0XHRcdDx1aTUtdGFibGUtcm93PlxuXHRcdFx0XHQ8dWk1LXRhYmxlLWNlbGw-PHVpNS1sYWJlbD48Yj5Ob3RlYm9vayBCYXNpYyAxNTwvYj48YnI-SFQtMTAwMDwvdWk1LWxhYmVsPjwvdWk1LXRhYmxlLWNlbGw-XG5cdFx0XHRcdDx1aTUtdGFibGUtY2VsbD48dWk1LWxhYmVsPlZlcnkgQmVzdCBTY3JlZW5zPC91aTUtbGFiZWw-PC91aTUtdGFibGUtY2VsbD5cblx0XHRcdFx0PHVpNS10YWJsZS1jZWxsPjx1aTUtbGFiZWw-MzAgeCAxOCB4IDMgY208L3VpNS1sYWJlbD48L3VpNS10YWJsZS1jZWxsPlxuXHRcdFx0XHQ8dWk1LXRhYmxlLWNlbGw-PHVpNS1sYWJlbCBzdHlsZT1cImNvbG9yOiAjMmI3YzJiXCI-PGI-NC4yPC9iPiBLRzwvdWk1LWxhYmVsPjwvdWk1LXRhYmxlLWNlbGw-XG5cdFx0XHRcdDx1aTUtdGFibGUtY2VsbD48dWk1LWxhYmVsPjxiPjk1NjwvYj4gRVVSPC91aTUtbGFiZWw-PC91aTUtdGFibGUtY2VsbD5cblx0XHRcdDwvdWk1LXRhYmxlLXJvdz5cblx0XHRcdDx1aTUtdGFibGUtcm93PlxuXHRcdFx0XHQ8dWk1LXRhYmxlLWNlbGw-PHVpNS1sYWJlbD48Yj5Ob3RlYm9vayBCYXNpYyAxNzwvYj48YnI-SFQtMTAwMTwvdWk1LWxhYmVsPjwvdWk1LXRhYmxlLWNlbGw-XG5cdFx0XHRcdDx1aTUtdGFibGUtY2VsbD48dWk1LWxhYmVsPlNtYXJ0Y2FyZHM8L3VpNS1sYWJlbD48L3VpNS10YWJsZS1jZWxsPlxuXHRcdFx0XHQ8dWk1LXRhYmxlLWNlbGw-PHVpNS1sYWJlbD4yOSB4IDE3IHggMy4xIGNtPC91aTUtbGFiZWw-PC91aTUtdGFibGUtY2VsbD5cblx0XHRcdFx0PHVpNS10YWJsZS1jZWxsPjx1aTUtbGFiZWwgc3R5bGU9XCJjb2xvcjogIzJiN2MyYlwiPjxiPjQuNTwvYj4gS0c8L3VpNS1sYWJlbD48L3VpNS10YWJsZS1jZWxsPlxuXHRcdFx0XHQ8dWk1LXRhYmxlLWNlbGw-PHVpNS1sYWJlbD48Yj4xMjQ5PC9iPiBFVVI8L3VpNS1sYWJlbD48L3VpNS10YWJsZS1jZWxsPlxuXHRcdFx0PC91aTUtdGFibGUtcm93PlxuXHRcdFx0PHVpNS10YWJsZS1yb3c-XG5cdFx0XHRcdDx1aTUtdGFibGUtY2VsbD48dWk1LWxhYmVsPjxiPk5vdGVib29rIEJhc2ljIDE4PC9iPjxicj5IVC0xMDAyPC91aTUtbGFiZWw-PC91aTUtdGFibGUtY2VsbD5cblx0XHRcdFx0PHVpNS10YWJsZS1jZWxsPjx1aTUtbGFiZWw-VGVjaG5vY29tPC91aTUtbGFiZWw-PC91aTUtdGFibGUtY2VsbD5cblx0XHRcdFx0PHVpNS10YWJsZS1jZWxsPjx1aTUtbGFiZWw-MzIgeCAyMSB4IDQgY208L3VpNS1sYWJlbD48L3VpNS10YWJsZS1jZWxsPlxuXHRcdFx0XHQ8dWk1LXRhYmxlLWNlbGw-PHVpNS1sYWJlbCBzdHlsZT1cImNvbG9yOiAjMmI3YzJiXCI-PGI-My43PC9iPiBLRzwvdWk1LWxhYmVsPjwvdWk1LXRhYmxlLWNlbGw-XG5cdFx0XHRcdDx1aTUtdGFibGUtY2VsbD48dWk1LWxhYmVsPjxiPjI5PC9iPiBFVVI8L3VpNS1sYWJlbD48L3VpNS10YWJsZS1jZWxsPlxuXHRcdFx0PC91aTUtdGFibGUtcm93PlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuXHRcdDwvdWk1LXRhYmxlPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQgLS0-XG5cdDwvZGl2PlxuICAgIFxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuIn0sIm1haW4uanMiOnsibmFtZSI6Im1haW4uanMiLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvVGFibGUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1RhYmxlSGVhZGVyUm93LmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9UYWJsZUhlYWRlckNlbGwuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0xhYmVsLmpzXCI7In19

In comparison with the old compat ui5-table which overflows correctly: https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG48aGVhZD5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5TYW1wbGU8L3RpdGxlPlxuPC9oZWFkPlxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpO1wiPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuXG48dWk1LXRhYmxlPlxuXG4gICAgPHVpNS10YWJsZS1jb2x1bW4gc2xvdD1cImNvbHVtbnNcIj5cbiAgICAgICAgPHVpNS10ZXh0PlByb2R1Y3Q8L3VpNS10ZXh0PlxuICAgIDwvdWk1LXRhYmxlLWNvbHVtbj5cbiAgICA8dWk1LXRhYmxlLWNvbHVtbiBzbG90PVwiY29sdW1uc1wiPlxuICAgICAgICA8dWk1LXRleHQ-U3VwcGxpZXI8L3VpNS10ZXh0PlxuICAgIDwvdWk1LXRhYmxlLWNvbHVtbj5cbiAgICA8dWk1LXRhYmxlLWNvbHVtbiBzbG90PVwiY29sdW1uc1wiPlxuICAgICAgICA8dWk1LXRleHQ-RGltZW5zaW9uczwvdWk1LXRleHQ-XG4gICAgPC91aTUtdGFibGUtY29sdW1uPlxuICAgIDx1aTUtdGFibGUtY29sdW1uIHNsb3Q9XCJjb2x1bW5zXCI-XG4gICAgICAgIDx1aTUtdGV4dD5XZWlnaHQ8L3VpNS10ZXh0PlxuICAgIDwvdWk1LXRhYmxlLWNvbHVtbj5cbiAgICA8dWk1LXRhYmxlLWNvbHVtbiBzbG90PVwiY29sdW1uc1wiPlxuICAgICAgICA8dWk1LXRleHQ-UHJpY2U8L3VpNS10ZXh0PlxuICAgIDwvdWk1LXRhYmxlLWNvbHVtbj5cblxuICAgIDx1aTUtdGFibGUtcm93PlxuICAgICAgICA8dWk1LXRhYmxlLWNlbGw-XG4gICAgICAgICAgICA8dWk1LXRleHQ-Tm90ZWJvb2sgQmFzaWMgMTU8L3VpNS10ZXh0PlxuICAgICAgICA8L3VpNS10YWJsZS1jZWxsPlxuICAgICAgICA8dWk1LXRhYmxlLWNlbGw-XG4gICAgICAgICAgICA8dWk1LXRleHQ-VmVyeSBCZXN0IFNjcmVlbnM8L3VpNS10ZXh0PlxuICAgICAgICA8L3VpNS10YWJsZS1jZWxsPlxuICAgICAgICA8dWk1LXRhYmxlLWNlbGw-XG4gICAgICAgICAgICA8dWk1LXRleHQ-MzAgeCAxOCB4IDNjbTwvdWk1LXRleHQ-XG4gICAgICAgIDwvdWk1LXRhYmxlLWNlbGw-XG4gICAgICAgIDx1aTUtdGFibGUtY2VsbD5cbiAgICAgICAgICAgIDx1aTUtdGV4dD40LjI8L2I-S0c8L3VpNS10ZXh0PlxuICAgICAgICA8L3VpNS10YWJsZS1jZWxsPlxuICAgICAgICA8dWk1LXRhYmxlLWNlbGw-XG4gICAgICAgICAgICA8dWk1LXRleHQ-OTU2PC9iPkVVUjwvdWk1LXRleHQ-XG4gICAgICAgIDwvdWk1LXRhYmxlLWNlbGw-XG4gICAgPC91aTUtdGFibGUtcm93PlxuXG4gICAgPHVpNS10YWJsZS1yb3c-XG4gICAgICAgIDx1aTUtdGFibGUtY2VsbD5cbiAgICAgICAgICAgIDx1aTUtdGV4dD5pUGhvbmUgMTM8L3VpNS10ZXh0PlxuICAgICAgICA8L3VpNS10YWJsZS1jZWxsPlxuICAgICAgICA8dWk1LXRhYmxlLWNlbGw-XG4gICAgICAgICAgICA8dWk1LXRleHQ-QXBwbGU8L3VpNS10ZXh0PlxuICAgICAgICA8L3VpNS10YWJsZS1jZWxsPlxuICAgICAgICA8dWk1LXRhYmxlLWNlbGw-XG4gICAgICAgICAgICA8dWk1LXRleHQ-MTAgeCAxMiB4IDNjbTwvdWk1LXRleHQ-XG4gICAgICAgIDwvdWk1LXRhYmxlLWNlbGw-XG4gICAgICAgIDx1aTUtdGFibGUtY2VsbD5cbiAgICAgICAgICAgIDx1aTUtdGV4dD4xNTA8L2I-RzwvdWk1LXRleHQ-XG4gICAgICAgIDwvdWk1LXRhYmxlLWNlbGw-XG4gICAgICAgIDx1aTUtdGFibGUtY2VsbD5cbiAgICAgICAgICAgIDx1aTUtdGV4dD44MDA8L2I-RVVSPC91aTUtdGV4dD5cbiAgICAgICAgPC91aTUtdGFibGUtY2VsbD5cbiAgICA8L3VpNS10YWJsZS1yb3c-XG5cbiAgICA8dWk1LXRhYmxlLXJvdz5cbiAgICAgICAgPHVpNS10YWJsZS1jZWxsPlxuICAgICAgICAgICAgPHVpNS10ZXh0PmlQaG9uZSA0MzwvdWk1LXRleHQ-XG4gICAgICAgIDwvdWk1LXRhYmxlLWNlbGw-XG4gICAgICAgIDx1aTUtdGFibGUtY2VsbD5cbiAgICAgICAgICAgIDx1aTUtdGV4dD5BcHBsZTwvdWk1LXRleHQ-XG4gICAgICAgIDwvdWk1LXRhYmxlLWNlbGw-XG4gICAgICAgIDx1aTUtdGFibGUtY2VsbD5cbiAgICAgICAgICAgIDx1aTUtdGV4dD4xMiB4IDEyIHggM2NtPC91aTUtdGV4dD5cbiAgICAgICAgPC91aTUtdGFibGUtY2VsbD5cbiAgICAgICAgPHVpNS10YWJsZS1jZWxsPlxuICAgICAgICAgICAgPHVpNS10ZXh0PjI1MDwvYj5HPC91aTUtdGV4dD5cbiAgICAgICAgPC91aTUtdGFibGUtY2VsbD5cbiAgICAgICAgPHVpNS10YWJsZS1jZWxsPlxuICAgICAgICAgICAgPHVpNS10ZXh0PjEyMDA8L2I-RVVSPC91aTUtdGV4dD5cbiAgICAgICAgPC91aTUtdGFibGUtY2VsbD5cbiAgICA8L3VpNS10YWJsZS1yb3c-XG5cbjwvdWk1LXRhYmxlPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQgLS0-XG4gICAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwibWFpbi5qc1wiPjwvc2NyaXB0PlxuPC9ib2R5PlxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuXG4ifSwibWFpbi5qcyI6eyJuYW1lIjoibWFpbi5qcyIsImNvbnRlbnQiOiIvKiBwbGF5Z3JvdW5kLWhpZGUgKi9cbmltcG9ydCBcIi4vcGxheWdyb3VuZC1zdXBwb3J0LmpzXCI7XG4vKiBwbGF5Z3JvdW5kLWhpZGUtZW5kICovXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9UZXh0LmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtY29tcGF0L2Rpc3QvVGFibGUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1jb21wYXQvZGlzdC9UYWJsZVJvdy5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWNvbXBhdC9kaXN0L1RhYmxlQ29sdW1uLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtY29tcGF0L2Rpc3QvVGFibGVDZWxsLmpzXCI7In19

Affected Component

ui5-table

Expected Behaviour

The table should overflow if overflow-mode="Scroll" is specified for the ui5-table and not truncate column headers.

Isolated Example

No response

Steps to Reproduce

        <ui5-table id="table" overflow-mode="Scroll">
            <ui5-table-header-row slot="headerRow">
                <ui5-table-header-cell id="produtCol"><span>Product</span></ui5-table-header-cell>
                <ui5-table-header-cell id="supplierCol">Supplier</ui5-table-header-cell>
                <ui5-table-header-cell id="dimensionsCol">Dimensions</ui5-table-header-cell>
                <ui5-table-header-cell id="weightCol">Weight</ui5-table-header-cell>
                <ui5-table-header-cell id="priceCol">Price</ui5-table-header-cell>
            </ui5-table-header-row>
<!-- playground-fold -->
            <ui5-table-row>
                <ui5-table-cell><ui5-label><b>Notebook Basic 15</b><br>HT-1000</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label>Very Best Screens</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.2</b> KG</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label><b>956</b> EUR</ui5-label></ui5-table-cell>
            </ui5-table-row>
            <ui5-table-row>
                <ui5-table-cell><ui5-label><b>Notebook Basic 17</b><br>HT-1001</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label>Smartcards</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label>29 x 17 x 3.1 cm</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.5</b> KG</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label><b>1249</b> EUR</ui5-label></ui5-table-cell>
            </ui5-table-row>
            <ui5-table-row>
                <ui5-table-cell><ui5-label><b>Notebook Basic 18</b><br>HT-1002</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label style="color: #2b7c2b"><b>3.7</b> KG</ui5-label></ui5-table-cell>
                <ui5-table-cell><ui5-label><b>29</b> EUR</ui5-label></ui5-table-cell>
            </ui5-table-row>
<!-- playground-fold-end -->
        </ui5-table>

Log Output, Stack Trace or Screenshots

Old compat ui5-table:

New ui5-table:

Priority

None

UI5 Web Components Version

2.1.2

Browser

Chrome

Operating System

Windows

Additional Context

No response

Organization

SAP

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[elenastoyanovaa]

Hello @SAP/ui5-webcomponents-table ,

The issue is related to the overflow-mode property of the new table. The issue is reproducible in the samples provided by the reporter. Can you please have a look?

Kind Regards, Elena