[AnalyticalTable]: Root receives a second vertical scrollbar when horizontal scrollbar is present in AutoWithEmptyRows mode

[mbritof]

Describe the bug

When AnalyticalTable is used with visibleRowCountMode="AutoWithEmptyRows" inside a constrained-height parent, the table root can become vertically scrollable when the table also needs horizontal scrolling.

The intended vertical scroll owner appears to be AnalyticalTableBody, but the outer table root also receives a small vertical scroll range. This results in two visible vertical scrollbars: the internal table body scrollbar and a second scrollbar on the table root.

The issue appears when:

• the table has enough columns/min widths to require horizontal scrolling
• the table has enough rows to require vertical body scrolling
• the available height lands near a row boundary
• the horizontal scrollbar consumes vertical space inside AnalyticalTableContainer

Note:

To make the issue appear in a consistent manner, macOS devices must turn the scroll bar to always visible.
Follow this steps:

1. Settings
2. Appereance
3. Show scroll bars -> Always

Isolated Example

A minimal reproduction can be found here:

https://stackblitz.com/edit/vitejs-vite-hmsr55pj?file=src%2FApp.tsx

Example component:

import { AnalyticalTable } from "@ui5/webcomponents-react";

const columns = [
  { Header: "Name", accessor: "name", minWidth: 280 },
  { Header: "Type", accessor: "type", minWidth: 180 },
  { Header: "Description", accessor: "description", minWidth: 220 },
  { Header: "Location", accessor: "location", minWidth: 180 },
  { Header: "Published", accessor: "published", minWidth: 220 },
];

const data = Array.from({ length: 50 }, (_, index) => ({
  name: `Item ${index}`,
  type: "Type",
  description: "Long description",
  location: "Folder",
  published: "Jun 5, 2026",
}));

export default function App() {
  return (
    <div style={{ height: 528, width: 592, display: "flex", flexDirection: "column" }}>
      <AnalyticalTable
        columns={columns}
        data={data}
        visibleRowCountMode="AutoWithEmptyRows"
        rowHeight={38}
        headerRowHeight={32}
        selectionMode="None"
      />
    </div>
  );
}

Reproduction steps

1. Render AnalyticalTable in a constrained-height parent.
2. Use visibleRowCountMode="AutoWithEmptyRows".
3. Add enough columns/min widths so the table needs horizontal scrolling.
4. Add enough rows so the table body needs vertical scrolling.
5. Resize the parent/browser so available height is near a row boundary.
6. Observe that the table root gets an additional vertical scrollbar.

Expected Behaviour

Only the internal table body should be vertically scrollable. The outer AnalyticalTable root should not receive a second vertical scroll range.

Actual Behaviour

The outer table root becomes vertically scrollable by a few pixels while AnalyticalTableBody is also vertically scrollable.

Potential root cause and fix

The issue seems to come from a height-accounting mismatch when AnalyticalTable has both horizontal and vertical scrolling.

The table root sets overflow-x to auto. Since overflow-y is not explicitly set, the browser computes overflow-y as auto as well. This means the root can become vertically scrollable if its children exceed its height by even a few pixels.

In Auto and AutoWithEmptyRows mode, the table appears to calculate the available body height from the parent height and extension/header height, but it does not seem to subtract the height consumed by the horizontal scrollbar.

Measured example:

AnalyticalTable root:
clientHeight: 528
scrollHeight: 535
can scroll vertically: true

AnalyticalTableContainer:
clientHeight: 488
offsetHeight: 503
horizontal scrollbar height: about 15px
horizontal overflow: true

AnalyticalTableBody:
clientHeight: 456
scrollHeight: 1254
vertical scrolling: true

So the body correctly owns vertical row scrolling, but the root also becomes scrollable because the horizontal scrollbar height is not reflected in the outer/root height calculation.

A possible fix could be to subtract the horizontal scrollbar height when calculating the body height in Auto and AutoWithEmptyRows modes, when the table container is horizontally scrollable.

Conceptually:

horizontalScrollbarHeight =
tableContainer.scrollWidth > tableContainer.clientWidth
? tableContainer.offsetHeight - tableContainer.clientHeight
: 0

bodyHeight = tableHeight - extensionsHeight - horizontalScrollbarHeight

This should prevent the root from receiving an extra vertical scroll range while keeping vertical scrolling inside AnalyticalTableBody and horizontal scrolling inside AnalyticalTableContainer.

Screenshots or Videos

Not attached. The bug can be observed by inspecting the scrollbars and DOM dimensions in the isolated reproduction.

Environment Info

UI5 Web Components for React Version

2.24.1

UI5 Web Components Version

2.24.0

Browser

Chrome

Operating System

macOS

Additional Information

scrollbar-gutter: stable and scrollbar-gutter: stable both-edges do not resolve the issue because they reserve inline gutter space, not block-end height for the horizontal scrollbar.

scrollbar-width: thin reduces the mismatch but does not remove it. scrollbar-width: none removes the symptom by hiding the horizontal scrollbar, which is not acceptable.

Release notes for 2.25.0 do not mention a fix for this. The newer release only lists a dependency update for @tanstack/react-virtual, MCP docs, and an update to UI5 Web Components 2.25.0.

Relevant log output

No console errors.

Organization

SAP Signavio

Declaration

I’m not disclosing any internal or sensitive information.

[DougDK]

@Lukas742 I would like to work on this Issue if it isn't assigned yet

[Lukas742]

Hi @DougDK
thank you very much, but I just created a fix for it. The offer is still really appreciated 🙂