persist column filters

src/components/ClientsTable.tsx

@@ -89,8 +89,13 @@ type ClientTableProps = {
 
 const STORAGE_KEYS = {
     PAGE_SIZE: "datatable-page-size",
+    COLUMN_VISIBILITY: "datatable-column-visibility",
     getTablePageSize: (tableId?: string) =>
-        tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE
+        tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE,
+    getTableColumnVisibility: (tableId?: string) =>
+        tableId
+            ? `datatable-${tableId}-column-visibility`
+            : STORAGE_KEYS.COLUMN_VISIBILITY
 };
 
 const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
@@ -122,6 +127,48 @@ const setStoredPageSize = (pageSize: number, tableId?: string): void => {
     }
 };
 
+const getStoredColumnVisibility = (
+    tableId?: string,
+    defaultVisibility?: Record<string, boolean>
+): Record<string, boolean> => {
+    if (typeof window === "undefined") return defaultVisibility || {};
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            // Validate that it's an object
+            if (typeof parsed === "object" && parsed !== null) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn(
+            "Failed to read column visibility from localStorage:",
+            error
+        );
+    }
+    return defaultVisibility || {};
+};
+
+const setStoredColumnVisibility = (
+    visibility: Record<string, boolean>,
+    tableId?: string
+): void => {
+    if (typeof window === "undefined") return;
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        localStorage.setItem(key, JSON.stringify(visibility));
+    } catch (error) {
+        console.warn(
+            "Failed to save column visibility to localStorage:",
+            error
+        );
+    }
+};
+
 export default function ClientsTable({
     userClients,
     machineClients,
@@ -157,15 +204,22 @@ export default function ClientsTable({
         useState<ColumnFiltersState>([]);
     const [machineGlobalFilter, setMachineGlobalFilter] = useState<any>([]);
 
-    const [userColumnVisibility, setUserColumnVisibility] = useState<VisibilityState>({
+    const defaultUserColumnVisibility = {
         client: false,
         subnet: false
-    });
+    };
-    const [machineColumnVisibility, setMachineColumnVisibility] = useState<VisibilityState>({
+    const defaultMachineColumnVisibility = {
         client: false,
         subnet: false,
         userId: false
-    });
+    };
+
+    const [userColumnVisibility, setUserColumnVisibility] = useState<VisibilityState>(
+        () => getStoredColumnVisibility("user-clients", defaultUserColumnVisibility)
+    );
+    const [machineColumnVisibility, setMachineColumnVisibility] = useState<VisibilityState>(
+        () => getStoredColumnVisibility("machine-clients", defaultMachineColumnVisibility)
+    );
 
     const currentView = searchParams.get("view") || defaultView;
 
@@ -522,10 +576,7 @@ export default function ClientsTable({
                 pageSize: userPageSize,
                 pageIndex: 0
             },
-            columnVisibility: {
+            columnVisibility: userColumnVisibility
-                client: false,
-                subnet: false
-            }
         },
         state: {
             sorting: userSorting,
@@ -551,11 +602,7 @@ export default function ClientsTable({
                 pageSize: machinePageSize,
                 pageIndex: 0
             },
-            columnVisibility: {
+            columnVisibility: machineColumnVisibility
-                client: false,
-                subnet: false,
-                userId: false
-            }
         },
         state: {
             sorting: machineSorting,
@@ -575,6 +622,15 @@ export default function ClientsTable({
         setStoredPageSize(newPageSize, "machine-clients");
     };
 
+    // Persist column visibility changes to localStorage
+    useEffect(() => {
+        setStoredColumnVisibility(userColumnVisibility, "user-clients");
+    }, [userColumnVisibility]);
+
+    useEffect(() => {
+        setStoredColumnVisibility(machineColumnVisibility, "machine-clients");
+    }, [machineColumnVisibility]);
+
     return (
         <>
             {selectedClient && (

src/components/ResourcesTable.tsx

@@ -116,8 +116,13 @@ type ResourcesTableProps = {
 
 const STORAGE_KEYS = {
     PAGE_SIZE: "datatable-page-size",
+    COLUMN_VISIBILITY: "datatable-column-visibility",
     getTablePageSize: (tableId?: string) =>
-        tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE
+        tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE,
+    getTableColumnVisibility: (tableId?: string) =>
+        tableId
+            ? `datatable-${tableId}-column-visibility`
+            : STORAGE_KEYS.COLUMN_VISIBILITY
 };
 
 const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
@@ -149,6 +154,48 @@ const setStoredPageSize = (pageSize: number, tableId?: string): void => {
     }
 };
 
+const getStoredColumnVisibility = (
+    tableId?: string,
+    defaultVisibility?: Record<string, boolean>
+): Record<string, boolean> => {
+    if (typeof window === "undefined") return defaultVisibility || {};
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            // Validate that it's an object
+            if (typeof parsed === "object" && parsed !== null) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn(
+            "Failed to read column visibility from localStorage:",
+            error
+        );
+    }
+    return defaultVisibility || {};
+};
+
+const setStoredColumnVisibility = (
+    visibility: Record<string, boolean>,
+    tableId?: string
+): void => {
+    if (typeof window === "undefined") return;
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        localStorage.setItem(key, JSON.stringify(visibility));
+    } catch (error) {
+        console.warn(
+            "Failed to save column visibility to localStorage:",
+            error
+        );
+    }
+};
+
 export default function ResourcesTable({
     resources,
     internalResources,
@@ -196,8 +243,12 @@ export default function ResourcesTable({
         useState<ColumnFiltersState>([]);
     const [internalGlobalFilter, setInternalGlobalFilter] = useState<any>([]);
     const [isRefreshing, setIsRefreshing] = useState(false);
-    const [proxyColumnVisibility, setProxyColumnVisibility] = useState<VisibilityState>({});
+    const [proxyColumnVisibility, setProxyColumnVisibility] = useState<VisibilityState>(
-    const [internalColumnVisibility, setInternalColumnVisibility] = useState<VisibilityState>({});
+        () => getStoredColumnVisibility("proxy-resources", {})
+    );
+    const [internalColumnVisibility, setInternalColumnVisibility] = useState<VisibilityState>(
+        () => getStoredColumnVisibility("internal-resources", {})
+    );
 
     const currentView = searchParams.get("view") || defaultView;
 
@@ -684,7 +735,8 @@ export default function ResourcesTable({
             pagination: {
                 pageSize: proxyPageSize,
                 pageIndex: 0
-            }
+            },
+            columnVisibility: proxyColumnVisibility
         },
         state: {
             sorting: proxySorting,
@@ -709,7 +761,8 @@ export default function ResourcesTable({
             pagination: {
                 pageSize: internalPageSize,
                 pageIndex: 0
-            }
+            },
+            columnVisibility: internalColumnVisibility
         },
         state: {
             sorting: internalSorting,
@@ -729,6 +782,15 @@ export default function ResourcesTable({
         setStoredPageSize(newPageSize, "internal-resources");
     };
 
+    // Persist column visibility changes to localStorage
+    useEffect(() => {
+        setStoredColumnVisibility(proxyColumnVisibility, "proxy-resources");
+    }, [proxyColumnVisibility]);
+
+    useEffect(() => {
+        setStoredColumnVisibility(internalColumnVisibility, "internal-resources");
+    }, [internalColumnVisibility]);
+
     return (
         <>
             {selectedResource && (

src/components/ui/data-table.tsx

@@ -44,8 +44,13 @@ import {
 
 const STORAGE_KEYS = {
     PAGE_SIZE: "datatable-page-size",
+    COLUMN_VISIBILITY: "datatable-column-visibility",
     getTablePageSize: (tableId?: string) =>
-        tableId ? `${tableId}-size` : STORAGE_KEYS.PAGE_SIZE
+        tableId ? `${tableId}-size` : STORAGE_KEYS.PAGE_SIZE,
+    getTableColumnVisibility: (tableId?: string) =>
+        tableId
+            ? `${tableId}-column-visibility`
+            : STORAGE_KEYS.COLUMN_VISIBILITY
 };
 
 const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
@@ -78,6 +83,48 @@ const setStoredPageSize = (pageSize: number, tableId?: string): void => {
     }
 };
 
+const getStoredColumnVisibility = (
+    tableId?: string,
+    defaultVisibility?: Record<string, boolean>
+): Record<string, boolean> => {
+    if (typeof window === "undefined") return defaultVisibility || {};
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            // Validate that it's an object
+            if (typeof parsed === "object" && parsed !== null) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn(
+            "Failed to read column visibility from localStorage:",
+            error
+        );
+    }
+    return defaultVisibility || {};
+};
+
+const setStoredColumnVisibility = (
+    visibility: Record<string, boolean>,
+    tableId?: string
+): void => {
+    if (typeof window === "undefined") return;
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        localStorage.setItem(key, JSON.stringify(visibility));
+    } catch (error) {
+        console.warn(
+            "Failed to save column visibility to localStorage:",
+            error
+        );
+    }
+};
+
 type TabFilter = {
     id: string;
     label: string;
@@ -104,6 +151,7 @@ type DataTableProps<TData, TValue> = {
     defaultPageSize?: number;
     columnVisibility?: Record<string, boolean>;
     enableColumnVisibility?: boolean;
+    persistColumnVisibility?: boolean | string;
 };
 
 export function DataTable<TData, TValue>({
@@ -122,13 +170,30 @@ export function DataTable<TData, TValue>({
     persistPageSize = false,
     defaultPageSize = 20,
     columnVisibility: defaultColumnVisibility,
-    enableColumnVisibility = false
+    enableColumnVisibility = false,
+    persistColumnVisibility = false
 }: DataTableProps<TData, TValue>) {
     const t = useTranslations();
 
     // Determine table identifier for storage
+    // Use persistPageSize string if provided, otherwise use persistColumnVisibility string, otherwise undefined
     const tableId =
-        typeof persistPageSize === "string" ? persistPageSize : undefined;
+        typeof persistPageSize === "string"
+            ? persistPageSize
+            : typeof persistColumnVisibility === "string"
+              ? persistColumnVisibility
+              : undefined;
+
+    // Compute initial column visibility (from localStorage if enabled, otherwise from prop/default)
+    const initialColumnVisibility = (() => {
+        if (persistColumnVisibility) {
+            return getStoredColumnVisibility(
+                tableId,
+                defaultColumnVisibility
+            );
+        }
+        return defaultColumnVisibility || {};
+    })();
 
     // Initialize page size from storage or default
     const [pageSize, setPageSize] = useState<number>(() => {
@@ -143,9 +208,8 @@ export function DataTable<TData, TValue>({
     );
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
     const [globalFilter, setGlobalFilter] = useState<any>([]);
-    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
+    const [columnVisibility, setColumnVisibility] =
-        defaultColumnVisibility || {}
+        useState<VisibilityState>(initialColumnVisibility);
-    );
     const [activeTab, setActiveTab] = useState<string>(
         defaultTab || tabs?.[0]?.id || ""
     );
@@ -180,7 +244,7 @@ export function DataTable<TData, TValue>({
                 pageSize: pageSize,
                 pageIndex: 0
             },
-            columnVisibility: defaultColumnVisibility || {}
+            columnVisibility: initialColumnVisibility
         },
         state: {
             sorting,
@@ -202,6 +266,13 @@ export function DataTable<TData, TValue>({
         }
     }, [pageSize, table, persistPageSize, tableId]);
 
+    useEffect(() => {
+        // Persist column visibility to localStorage when it changes
+        if (persistColumnVisibility) {
+            setStoredColumnVisibility(columnVisibility, tableId);
+        }
+    }, [columnVisibility, persistColumnVisibility, tableId]);
+
     const handleTabChange = (value: string) => {
         setActiveTab(value);
         // Reset to first page when changing tabs