From b9f057299560a80637d398120c437c99346cce32 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Mon, 17 Feb 2025 10:55:17 -0300
Subject: [PATCH] fix: address weird column displacement when resizing columns
 (#6240)

* updated colResizeDefault to be shift

* Made last column not resize less than the maximum amount

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
---
 .../components/tableComponent/index.tsx       | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx
index 7111ed15e..099493c53 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx
@@ -54,13 +54,17 @@ const TableComponent = forwardRef<
     ref,
   ) => {
     let colDef = props.columnDefs
+      .filter((col) => !col.hide)
       .map((col, index) => {
         let newCol = {
           ...col,
         };
-        // Filter out hidden columns
-        if (col.hidden) {
-          return null;
+
+        if (index !== props.columnDefs.length - 1) {
+          newCol = {
+            ...newCol,
+            suppressSizeToFit: true,
+          };
         }
         if (props.rowSelection && props.onSelectionChanged && index === 0) {
           newCol = {
@@ -112,8 +116,7 @@ const TableComponent = forwardRef<
           }
         }
         return newCol;
-      })
-      .filter(Boolean); // Filter out null values from hidden columns
+      });
     // @ts-ignore
     const realRef: React.MutableRefObject<AgGridReact> =
       useRef<AgGridReact | null>(null);
@@ -156,6 +159,29 @@ const TableComponent = forwardRef<
       params.api.setGridOption("columnDefs", updatedColumnDefs);
       if (props.onColumnMoved) props.onColumnMoved(params);
     };
+    const onColumnResized = (params) => {
+      if (!realRef.current?.api) return;
+
+      const gridApi = realRef.current.api;
+      const containerElement = document.querySelector(".ag-theme-shadcn");
+      if (!containerElement) return;
+
+      const containerWidth = containerElement.clientWidth;
+
+      // Get all columns
+      const columns = gridApi.getColumns();
+      if (!columns) return;
+
+      const totalWidth = columns.reduce(
+        (sum, col) => sum + col.getActualWidth(),
+        0,
+      );
+
+      // If total width is less than container width, reset column sizes
+      if (totalWidth < containerWidth) {
+        params.api.sizeColumnsToFit();
+      }
+    };
     if (props.rowData.length === 0 && displayEmptyAlert) {
       return (
         <div className="flex h-full w-full items-center justify-center rounded-md border">
@@ -203,6 +229,8 @@ const TableComponent = forwardRef<
             minWidth: 100,
           }}
           animateRows={false}
+          gridOptions={{ colResizeDefault: "shift", ...props.gridOptions }}
+          onColumnResized={onColumnResized}
           columnDefs={colDef}
           ref={(node) => {
             if (!node) return;