Skip to content

Commit 47d3f16

Browse files
Lukas742Lukas742
authored
fix(AnalyticalTable): prevent horizontal overflow if last column is resizable (#612)
1 parent 83a808e commit 47d3f16

3 files changed

Lines changed: 37 additions & 31 deletions

File tree

‎packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export interface ColumnHeaderProps {
4040
isResizing: boolean;
4141
isDraggable: boolean;
4242
role: string;
43+
isLastColumn: boolean;
4344
}
4445

4546
const styles = {
@@ -118,7 +119,8 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
118119
onDragEnd,
119120
isDraggable,
120121
dragOver,
121-
role
122+
role,
123+
isLastColumn
122124
} = props;
123125

124126
const isFiltered = column.filterValue && column.filterValue.length > 0;
@@ -203,7 +205,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
203205
{...column.getResizerProps()}
204206
data-resizer
205207
className={classes.resizer}
206-
style={{ left: `${column.totalLeft + column.totalFlexWidth}px` }}
208+
style={{ left: `${column.totalLeft + column.totalFlexWidth - (isLastColumn ? 3 : 0)}px` }}
207209
/>
208210
)}
209211
</>

‎packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
255255
data-resizer="true"
256256
draggable="false"
257257
role="separator"
258-
style="left: 600px;"
258+
style="left: 597px;"
259259
/>
260260
</header>
261261
<div
@@ -758,7 +758,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
758758
data-resizer="true"
759759
draggable="false"
760760
role="separator"
761-
style="left: 600px;"
761+
style="left: 597px;"
762762
/>
763763
</header>
764764
<div
@@ -1261,7 +1261,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
12611261
data-resizer="true"
12621262
draggable="false"
12631263
role="separator"
1264-
style="left: 600px;"
1264+
style="left: 597px;"
12651265
/>
12661266
</header>
12671267
<svg
@@ -1827,7 +1827,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
18271827
data-resizer="true"
18281828
draggable="false"
18291829
role="separator"
1830-
style="left: 647px;"
1830+
style="left: 644px;"
18311831
/>
18321832
</header>
18331833
<div
@@ -2401,7 +2401,7 @@ exports[`AnalyticalTable custom row height 1`] = `
24012401
data-resizer="true"
24022402
draggable="false"
24032403
role="separator"
2404-
style="left: 600px;"
2404+
style="left: 597px;"
24052405
/>
24062406
</header>
24072407
<div
@@ -2904,7 +2904,7 @@ exports[`AnalyticalTable render without data 1`] = `
29042904
data-resizer="true"
29052905
draggable="false"
29062906
role="separator"
2907-
style="left: 600px;"
2907+
style="left: 597px;"
29082908
/>
29092909
</header>
29102910
<div
@@ -3172,7 +3172,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
31723172
data-resizer="true"
31733173
draggable="false"
31743174
role="separator"
3175-
style="left: 600px;"
3175+
style="left: 597px;"
31763176
/>
31773177
</header>
31783178
<div
@@ -3675,7 +3675,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
36753675
data-resizer="true"
36763676
draggable="false"
36773677
role="separator"
3678-
style="left: 600px;"
3678+
style="left: 597px;"
36793679
/>
36803680
</header>
36813681
<div
@@ -4178,7 +4178,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
41784178
data-resizer="true"
41794179
draggable="false"
41804180
role="separator"
4181-
style="left: 600px;"
4181+
style="left: 597px;"
41824182
/>
41834183
</header>
41844184
<div
@@ -4681,7 +4681,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
46814681
data-resizer="true"
46824682
draggable="false"
46834683
role="separator"
4684-
style="left: 600px;"
4684+
style="left: 597px;"
46854685
/>
46864686
</header>
46874687
<div
@@ -5226,7 +5226,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
52265226
data-resizer="true"
52275227
draggable="false"
52285228
role="separator"
5229-
style="left: 653px;"
5229+
style="left: 650px;"
52305230
/>
52315231
</header>
52325232
<div
@@ -5813,7 +5813,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
58135813
data-resizer="true"
58145814
draggable="false"
58155815
role="separator"
5816-
style="left: 600px;"
5816+
style="left: 597px;"
58175817
/>
58185818
</header>
58195819
<div

‎packages/main/src/components/AnalyticalTable/index.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -379,23 +379,27 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
379379
return (
380380
// eslint-disable-next-line react/jsx-key
381381
<header {...headerProps} role="rowgroup">
382-
{headerGroup.headers.map((column) => (
383-
// eslint-disable-next-line react/jsx-key
384-
<ColumnHeader
385-
{...column.getHeaderProps()}
386-
onSort={onSort}
387-
onGroupBy={onGroupByChanged}
388-
onDragStart={handleDragStart}
389-
onDragOver={handleDragOver}
390-
onDrop={handleOnDrop}
391-
onDragEnter={handleDragEnter}
392-
onDragEnd={handleOnDragEnd}
393-
dragOver={column.id === dragOver}
394-
isDraggable={!isTreeTable && column.canReorder}
395-
>
396-
{column.render('Header')}
397-
</ColumnHeader>
398-
))}
382+
{headerGroup.headers.map((column, index) => {
383+
const isLastColumn = !column.disableResizing && index + 1 === headerGroup.headers.length;
384+
return (
385+
// eslint-disable-next-line react/jsx-key
386+
<ColumnHeader
387+
{...column.getHeaderProps()}
388+
isLastColumn={isLastColumn}
389+
onSort={onSort}
390+
onGroupBy={onGroupByChanged}
391+
onDragStart={handleDragStart}
392+
onDragOver={handleDragOver}
393+
onDrop={handleOnDrop}
394+
onDragEnter={handleDragEnter}
395+
onDragEnd={handleOnDragEnd}
396+
dragOver={column.id === dragOver}
397+
isDraggable={!isTreeTable && column.canReorder}
398+
>
399+
{column.render('Header')}
400+
</ColumnHeader>
401+
);
402+
})}
399403
</header>
400404
);
401405
})}

0 commit comments

Comments
 (0)