Update TablePageTemplate.tsx

frontend/src/templates/TablePageTemplate.tsx

@@ -232,7 +232,7 @@ export default function TablePageTemplate({
   };
 
   // Initialize visible columns from localStorage or defaults
-  const initializeVisibleColumns = () => {
+  const initializeVisibleColumns = useMemo(() => {
     const storageKey = getStorageKey();
     try {
       const saved = localStorage.getItem(storageKey);
@@ -257,16 +257,38 @@ export default function TablePageTemplate({
         .filter(col => col.defaultVisible !== false)
         .map(col => col.key)
     );
-  };
+  }, [columns, location.pathname]);
 
   const [visibleColumns, setVisibleColumns] = useState<Set<string>>(initializeVisibleColumns);
 
-  // Update visible columns when columns prop changes (e.g., when switching pages)
+  // Update visible columns when columns prop or pathname changes
   useEffect(() => {
-    const newVisibleColumns = initializeVisibleColumns();
+    const storageKey = getStorageKey();
-    setVisibleColumns(newVisibleColumns);
+    try {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      const saved = localStorage.getItem(storageKey);
-  }, [location.pathname]); // Re-initialize when pathname changes
+      if (saved) {
+        const savedSet = new Set(JSON.parse(saved));
+        // Validate that all saved columns still exist
+        const validColumns = columns.filter(col => savedSet.has(col.key));
+        if (validColumns.length > 0) {
+          // Add any new columns with defaultVisible !== false
+          const newColumns = columns
+            .filter(col => !savedSet.has(col.key) && col.defaultVisible !== false)
+            .map(col => col.key);
+          setVisibleColumns(new Set([...Array.from(validColumns.map(col => col.key)), ...newColumns]));
+          return;
+        }
+      }
+    } catch (e) {
+      // Ignore parse errors
+    }
+    // Default: show all columns that have defaultVisible !== false
+    setVisibleColumns(new Set(
+      columns
+        .filter(col => col.defaultVisible !== false)
+        .map(col => col.key)
+    ));
+  }, [columns, location.pathname]); // Re-initialize when columns or pathname changes
 
   // Save to localStorage whenever visibleColumns changes
   useEffect(() => {
@@ -276,7 +298,6 @@ export default function TablePageTemplate({
     } catch (e) {
       // Ignore storage errors
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visibleColumns, location.pathname]);
 
   // Filter columns based on visibility