From 3d5c00c613cbeb162044778ec2ad15b3032e4d02 Mon Sep 17 00:00:00 2001
From: Edwin Jose <edwin.jose@datastax.com>
Date: Thu, 6 Mar 2025 14:13:16 -0500
Subject: [PATCH] fix: remove empty space for hidden column (#6954)

* Update index.tsx

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../components/tableComponent/index.tsx       | 21 ++++++++++++++-----
 1 file changed, 16 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 099493c53..4f6edad59 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx
@@ -55,12 +55,12 @@ const TableComponent = forwardRef<
   ) => {
     let colDef = props.columnDefs
       .filter((col) => !col.hide)
-      .map((col, index) => {
+      .map((col, index, filteredArray) => {
         let newCol = {
           ...col,
         };
 
-        if (index !== props.columnDefs.length - 1) {
+        if (index !== filteredArray.length - 1) {
           newCol = {
             ...newCol,
             suppressSizeToFit: true,
@@ -123,7 +123,11 @@ const TableComponent = forwardRef<
     const dark = useDarkStore((state) => state.dark);
     const initialColumnDefs = useRef(colDef);
     const [columnStateChange, setColumnStateChange] = useState(false);
-    const storeReference = props.columnDefs.map((e) => e.headerName).join("_");
+    // Only use visible columns for the store reference
+    const storeReference = props.columnDefs
+      .filter((col) => !col.hide)
+      .map((e) => e.headerName)
+      .join("_");
 
     const onGridReady = (params) => {
       // @ts-ignore
@@ -148,6 +152,8 @@ const TableComponent = forwardRef<
       setTimeout(() => {
         if (!realRef?.current?.api?.isDestroyed) {
           realRef?.current?.api?.hideOverlay();
+          // Force column fit after hiding overlay to ensure proper layout
+          realRef?.current?.api?.sizeColumnsToFit();
         }
       }, 1000);
       if (props.onGridReady) props.onGridReady(params);
@@ -168,7 +174,7 @@ const TableComponent = forwardRef<
 
       const containerWidth = containerElement.clientWidth;
 
-      // Get all columns
+      // Get only visible columns
       const columns = gridApi.getColumns();
       if (!columns) return;
 
@@ -227,9 +233,14 @@ const TableComponent = forwardRef<
           {...props}
           defaultColDef={{
             minWidth: 100,
+            suppressColumnsToolPanel: true, // Don't show hidden columns in tool panel
           }}
           animateRows={false}
-          gridOptions={{ colResizeDefault: "shift", ...props.gridOptions }}
+          gridOptions={{
+            colResizeDefault: "shift",
+            suppressColumnVirtualisation: false, // Enable column virtualization for better performance
+            ...props.gridOptions,
+          }}
           onColumnResized={onColumnResized}
           columnDefs={colDef}
           ref={(node) => {