Description
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
- Use the AnalyticalTable component
- Add minWidth for all columns
- 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.
Metadata
Metadata
Assignees
Type
Projects
Status
🆕 New