import type { VisibilityState } from "@tanstack/react-table"; import { useCallback, useState } from "react"; const STORAGE_KEYS = { COLUMN_VISIBILITY: "datatable-column-visibility", getTableColumnVisibility: (tableId: string) => `datatable-${tableId}-column-visibility` }; const getStoredColumnVisibility = ( tableId: string, defaultVisibility?: Record ): Record => { 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, 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 function useStoredColumnVisibility( tableId: string, defaultColumnVisibility?: Record ) { const [columnVisibility, setVisibility] = useState(() => getStoredColumnVisibility(tableId, defaultColumnVisibility) ); const setColumnVisibility = useCallback( ( updaterOrValue: | VisibilityState | ((old: VisibilityState) => VisibilityState) ) => { if (typeof updaterOrValue === "function") { setVisibility((oldValue) => { const newValue = updaterOrValue(oldValue); setStoredColumnVisibility(newValue, tableId); return newValue; }); } else { setVisibility(updaterOrValue); setStoredColumnVisibility(updaterOrValue, tableId); } }, [tableId] ); return [columnVisibility, setColumnVisibility] as const; }