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>

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) {
+        if (index !== props.columnDefs.length - 1) {
-          return null;
+          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;