Skip to content

Commit 8f6f544

Browse files
authored
fix(AnalyticalTable): apply minWidth only if necessary (#620)
1 parent 37f9f99 commit 8f6f544

File tree

1 file changed

+27
-7
lines changed

1 file changed

+27
-7
lines changed

packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const columns = (columns, { instance }) => {
4343
maxWidth: column.maxWidth
4444
}));
4545
let availableWidth = totalWidth;
46-
let internalDefaultColumnsCount = visibleColumns.length;
46+
let defaultColumnsCount = visibleColumns.length;
4747
const columnsWithFixedWidth = columnsWithWidthProperties
4848
.map((column) => {
4949
const { width, minWidth, maxWidth, accessor } = column;
@@ -56,25 +56,45 @@ const columns = (columns, { instance }) => {
5656
? 60
5757
: width;
5858
availableWidth -= acceptedWidth;
59-
internalDefaultColumnsCount--;
59+
defaultColumnsCount--;
6060
return acceptedWidth;
6161
}
62-
if (minWidth > availableWidth / internalDefaultColumnsCount) {
62+
63+
const columnsWithMaxWidth = columnsWithWidthProperties.filter((item) => item.maxWidth);
64+
const aggregatedColumnsMaxWidth = columnsWithMaxWidth.reduce((acc, cur) => acc + cur.maxWidth, 0);
65+
const aggregatedColumnsMinWidth = columnsWithWidthProperties
66+
.filter((item) => item.minWidth && !item.maxWidth)
67+
.reduce((acc, cur) => acc + cur.minWidth, 0);
68+
69+
if (minWidth > availableWidth / defaultColumnsCount) {
70+
// don't apply minWidth if enough space is available because of maxWidth properties
71+
if (
72+
availableWidth - aggregatedColumnsMaxWidth >
73+
aggregatedColumnsMinWidth + (columns.length - columnsWithWidthProperties.length) * 60
74+
) {
75+
// apply minWidth only if it's larger than the calculated available width
76+
if (minWidth > (availableWidth - aggregatedColumnsMaxWidth) / columnsWithMaxWidth.length) {
77+
availableWidth -= minWidth;
78+
defaultColumnsCount--;
79+
return minWidth;
80+
}
81+
return false;
82+
}
6383
availableWidth -= minWidth;
64-
internalDefaultColumnsCount--;
84+
defaultColumnsCount--;
6585
return minWidth;
6686
}
67-
if (maxWidth < availableWidth / internalDefaultColumnsCount) {
87+
if (maxWidth < availableWidth / defaultColumnsCount) {
6888
availableWidth -= maxWidth;
69-
internalDefaultColumnsCount--;
89+
defaultColumnsCount--;
7090
return maxWidth;
7191
}
7292
return false;
7393
})
7494
.filter(Boolean);
7595

7696
const fixedWidth = columnsWithFixedWidth.reduce((acc, val) => acc + val, 0);
77-
const defaultColumnsCount = visibleColumns.length - columnsWithFixedWidth.length;
97+
7898
// check if columns are visible and table has width
7999
if (visibleColumns.length > 0 && totalWidth > 0) {
80100
// set fixedWidth as defaultWidth if all visible columns have fixed value

0 commit comments

Comments
 (0)