ui5-webcomponents-react: AnalyticalTable: Shows horizontal scrollbar when it shouldn't

Describe the bug We have a SplitterLayout with a vertical splitter and two SplitterElements. The right-hand SplitterElement contains an empty div, the left-hand SplitterElement contains an AnalyticalTable. The table has inlineSize: '100%' set on it so it fills the entire SplitterElement (horizontally). This lets us resize the table. If we move the splitter, we will see that as the AnalyticalTable resizes, it will sometimes display a horizontal scrollbar, sometimes it won’t.

I have not been able to figure out a pattern. At first, I suspected it has something to do with the fact that if the table has a floating point width like e.g. 802.8px, each row object will have the width rounded up, in this case 803px. But this doesn’t seem to be the problem, I for example see a scrollbar for 802.8px/803px, but not for 799.8px/800px.

I’ve attached screenshots showing the width of the table header (floating point width) vs the table header row (rounded width), in case it has something to do with that.

Isolated Example If it worked, here’s a sandbox. If it didn’t, here’s the code (App.js of the suggested sandbox):

import React from "react";
import {
  SplitterElement,
  SplitterLayout,
  AnalyticalTable,
  ThemeProvider,
  ShellBar
} from "@ui5/webcomponents-react";

export default function App() {
  const table = (
    <AnalyticalTable
      data={[
        {
          name: "Germany",
          path: ["Germany"],
          country: undefined,
          description: undefined
        },
        {
          name: "France",
          path: ["France"],
          country: undefined,
          description: undefined
        }
      ]}
      columns={[
        { id: "name", accessor: "name", Header: "ID" },
        { id: "description", accessor: "description", Header: "Description" }
      ]}
      subRowsKey={"children"}
      style={{
        inlineSize: "100%",
        blockSize: "100%"
      }}
    />
  );

  return (
    <ThemeProvider>
      <ShellBar primaryTitle="UI5 Web Components for React Issue Template" />
      <SplitterLayout
        style={{
          inlineSize: "100%",
          blockSize: "100%"
        }}
      >
        <SplitterElement size="70%">{table}</SplitterElement>
        <SplitterElement size="30%">
          <div style={{ width: "100%" }} />
        </SplitterElement>
      </SplitterLayout>
    </ThemeProvider>
  );
}

To Reproduce Steps to reproduce the behavior: Just move the slider. Heads up though, I wasn’t able to ever get rid of the scrollbar in the sandbox. In storybook, it will randomly appear or disappear as I move the slider, let go, and the table resizes.

Expected behavior The expected behavior is to not have a horizontal scrollbar as the table fits neatly into its surrounding container.

Screenshots

UI5 Web Components for React Information @ui5/webcomponents version: “1.4.0” @ui5/webcomponents-react version: “0.23.2” Operating System: Win10 Browser: Chrome

Thanks a lot in advance!