[AnalyticalTable | @ui5/webcomponents-react | 2.7.1 | typescript]:

[clevianerebeca-silva]

Bug Description

AnalyticalTable columns with minWidth are causing an unnecessary overflow

Affected Component

AnalyticalTable

Expected Behaviour

When we set minWidths for all columns and the table size is bigger than the sum of the minWidths, no overflow should happen.

Isolated Example

https://stackblitz.com/edit/github-thk7nci8-znb8zkpk?file=src%2FApp.tsx

Steps to Reproduce

1. Use the AnalyticalTable component
2. Add minWidth for all columns
3. Check it on a screen bigger than the sum of minWidths
   ...

Log Output, Stack Trace or Screenshots

Our AnalyticalTable usage:

<AnalyticalTable
      columns={columns}
      data={tableData ?? []}
      sortable
      filterable
      isTreeTable={!!groupBy}
      {...(!!groupBy && { groupBy: [groupBy] })}
      minRows={1}
      globalFilterValue={searchTerm}
      noDataText={t('myProcessOverview.tableNoDataText')}
      {...(loading && {
        NoDataComponent: () => (
          <div className={style.dataLoading}>
            <BusyIndicator active delay={0} />
          </div>
        ),
      })}
      reactTableOptions={{
        initialState: {
          sortBy: [{ id: initialSortById, desc: initialSortByDesc }],
        },
      }}
      onRowClick={onRowClick}
/>

Columns definition:

 const columns = [
    createTextColumn({
      accessor: 'model.name',
      header: t('myProcessOverview.tableNameHeader'),
      object: 'Process Model',
      isBold: true,
      minWidth: 425,
      onTextClick: (e, row) => {
        e.stopPropagation()
        const { __typename, id } = row.model
        const url = getUrl({ __typename, id, excludeBasePath: true })
        url && navigate(url)
      },
    }),
    createTextColumn({
      accessor: 'model.type',
      header: t('myProcessOverview.tableTypeHeader'),
      minWidth: 130,
    }),
    createTextColumn({
      accessor: 'model.description',
      header: t('myProcessOverview.tableDescriptionHeader'),
      minWidth: 130,
    }),
    createChipColumn({
      accessor: 'relatedRoleTitles',
      header: t('myProcessOverview.tableMyRoleHeader'),
      filterableValues: availableRoles,
      design: 'indication5',
      minWidth: 300,
    }),
  ]

Screen.Recording.2025-03-12.at.16.49.23.mov

As you can see in the video, the table is 1197px wide, while the sum of the minWidths is 985px. Since there is available space, the horizontal scroll shouldn't appear. We also tried with scaleWidthMode as Grow and Smart but the overflow also happens in both cases.

Priority

Low

UI5 Web Components Version

2.7.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

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

[nnaydenow]

Hi @Lukas742, @MarcusNotheis,

The issue is related to AnalyticalTable so I'm forwarding it to ui5-webcomponents-react project.

---

Hi @clevianerebeca-silva,
Could you please provide an example where colleagues could debug it because I've tried to reproduce it without success:
https://stackblitz.com/edit/github-thk7nci8?file=package.json

[clevianerebeca-silva]

hey @nnaydenow here is: https://stackblitz.com/edit/github-thk7nci8-znb8zkpk?file=src%2FApp.tsx. I basically set a higher minWidth for the first and last columns. Check it on a large screen that is wider than the sum of the minWidths, and you'll see that the horizontal scroll appears