1 files changed, 15 insertions, 10 deletions
diff --git a/components/data-table/data-table-view-options.tsx b/components/data-table/data-table-view-options.tsx
index b689adab..592933f2 100644
--- a/components/data-table/data-table-view-options.tsx
+++ b/components/data-table/data-table-view-options.tsx
@@ -80,12 +80,14 @@ export function DataTableViewOptions<TData>({
   const hideableCols = React.useMemo(() => {
     return table
       .getAllLeafColumns()
-      .filter((col) =>  col.getCanHide())
-  }, [table])
+      .filter((col) => col.getCanHide())
+  }, [table.getAllLeafColumns().map(c => c.id).join(',')])
+
 
 
   // 2) local state for "columnOrder" (just the ID of hideable columns)
   //    We'll reorder these with drag & drop
+  const isInitialized = React.useRef(false)
   const [columnOrder, setColumnOrder] = React.useState<string[]>(() =>
     hideableCols.map((c) => c.id)
   )
@@ -107,21 +109,24 @@ export function DataTableViewOptions<TData>({
   // 4) After local state changes, reflect in tanstack table
   //    - We do this in useEffect to avoid "update a different component" error
   React.useEffect(() => {
-    // Also consider "non-hideable" columns, if any, to keep them in original positions
+    if (!isInitialized.current) {
+      isInitialized.current = true
+      return
+    }
+
     const nonHideable = table
       .getAllColumns()
       .filter((col) => !hideableCols.some((hc) => hc.id === col.id))
       .map((c) => c.id)
 
-    // e.g. place nonHideable at the front, then our local hideable order
     const finalOrder = [...nonHideable, ...columnOrder]
+    const currentOrder = table.getState().columnOrder
 
-    // Now we set the table's official column order
-      if (!deepEqual(table.getState().columnOrder, finalOrder)) {
-          table.setColumnOrder(finalOrder)
-          resetAutoSize?.()
-        }
-  }, [columnOrder, hideableCols.join("|"), table, resetAutoSize])
+    if (!deepEqual(currentOrder, finalOrder)) {
+      table.setColumnOrder(finalOrder)
+      resetAutoSize?.()
+    }
+  }, [columnOrder,hideableCols.map(c => c.id).join(','),resetAutoSize])
 
 
   return (