fix(AnalyticalTable): prevent horizontal overflow if last column is resizable (#612)

Author: Lukas742

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

@@ -40,6 +40,7 @@ export interface ColumnHeaderProps {
   isResizing: boolean;
   isDraggable: boolean;
   role: string;
+  isLastColumn: boolean;
 }
 
 const styles = {
@@ -118,7 +119,8 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     onDragEnd,
     isDraggable,
     dragOver,
-    role
+    role,
+    isLastColumn
   } = props;
 
   const isFiltered = column.filterValue && column.filterValue.length > 0;
@@ -203,7 +205,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
           {...column.getResizerProps()}
           data-resizer
           className={classes.resizer}
-          style={{ left: `${column.totalLeft + column.totalFlexWidth}px` }}
+          style={{ left: `${column.totalLeft + column.totalFlexWidth - (isLastColumn ? 3 : 0)}px` }}
         />
       )}
     </>

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

@@ -255,7 +255,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <div
@@ -758,7 +758,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <div
@@ -1261,7 +1261,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <svg
@@ -1827,7 +1827,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 647px;"
+        style="left: 644px;"
       />
     </header>
     <div
@@ -2401,7 +2401,7 @@ exports[`AnalyticalTable custom row height 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <div
@@ -2904,7 +2904,7 @@ exports[`AnalyticalTable render without data 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <div
@@ -3172,7 +3172,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <div
@@ -3675,7 +3675,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <div
@@ -4178,7 +4178,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <div
@@ -4681,7 +4681,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <div
@@ -5226,7 +5226,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 653px;"
+        style="left: 650px;"
       />
     </header>
     <div
@@ -5813,7 +5813,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
         data-resizer="true"
         draggable="false"
         role="separator"
-        style="left: 600px;"
+        style="left: 597px;"
       />
     </header>
     <div

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

@@ -379,23 +379,27 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
           return (
             // eslint-disable-next-line react/jsx-key
             <header {...headerProps} role="rowgroup">
-              {headerGroup.headers.map((column) => (
-                // eslint-disable-next-line react/jsx-key
-                <ColumnHeader
-                  {...column.getHeaderProps()}
-                  onSort={onSort}
-                  onGroupBy={onGroupByChanged}
-                  onDragStart={handleDragStart}
-                  onDragOver={handleDragOver}
-                  onDrop={handleOnDrop}
-                  onDragEnter={handleDragEnter}
-                  onDragEnd={handleOnDragEnd}
-                  dragOver={column.id === dragOver}
-                  isDraggable={!isTreeTable && column.canReorder}
-                >
-                  {column.render('Header')}
-                </ColumnHeader>
-              ))}
+              {headerGroup.headers.map((column, index) => {
+                const isLastColumn = !column.disableResizing && index + 1 === headerGroup.headers.length;
+                return (
+                  // eslint-disable-next-line react/jsx-key
+                  <ColumnHeader
+                    {...column.getHeaderProps()}
+                    isLastColumn={isLastColumn}
+                    onSort={onSort}
+                    onGroupBy={onGroupByChanged}
+                    onDragStart={handleDragStart}
+                    onDragOver={handleDragOver}
+                    onDrop={handleOnDrop}
+                    onDragEnter={handleDragEnter}
+                    onDragEnd={handleOnDragEnd}
+                    dragOver={column.id === dragOver}
+                    isDraggable={!isTreeTable && column.canReorder}
+                  >
+                    {column.render('Header')}
+                  </ColumnHeader>
+                );
+              })}
             </header>
           );
         })}