@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/DataTable/hooks/__tests__/useDataTableState.test.ts

@@ -10,6 +10,10 @@ import { renderHook, act } from '@testing-library/react';
 import { useDataTableState, dataTableReducer } from '../useDataTableState';
 import type { DataRecord, SortingState, ColumnFiltersState, VisibilityState, GroupingState, ExpandedState, PaginationState } from '../../types';
 
+// Following testing standards: use timeout parameter to prevent hanging
+// See: packages/core/docs/standards/04-testing-standards.md
+const TEST_TIMEOUT = 10000; // 10 seconds per test
+
 interface TestData extends DataRecord {
   id: string;
   name: string;
@@ -51,7 +55,7 @@ describe('[unit] dataTableReducer', () => {
     
     expect(result.sorting).toEqual(newSorting);
     expect(result).toEqual({ ...initialState, sorting: newSorting });
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_COLUMN_FILTERS action', () => {
     const newFilters: ColumnFiltersState = [{ id: 'name', value: 'John' }];
@@ -60,7 +64,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.columnFilters).toEqual(newFilters);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_COLUMN_VISIBILITY action', () => {
     const newVisibility: VisibilityState = { name: false, email: true };
@@ -69,7 +73,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.columnVisibility).toEqual(newVisibility);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_GROUPING action', () => {
     const newGrouping: GroupingState = ['name'];
@@ -78,7 +82,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.grouping).toEqual(newGrouping);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_EXPANDED action', () => {
     const newExpanded: ExpandedState = { '1': true };
@@ -87,7 +91,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.expanded).toEqual(newExpanded);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_PAGINATION action', () => {
     const newPagination: PaginationState = { pageIndex: 2, pageSize: 25 };
@@ -96,7 +100,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.pagination).toEqual(newPagination);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_COLUMN_ORDER action', () => {
     const newOrder = ['name', 'id', 'email'];
@@ -105,7 +109,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.columnOrder).toEqual(newOrder);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_ROW_SELECTION action', () => {
     const newSelection = { '1': true, '2': false };
@@ -114,7 +118,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.rowSelection).toEqual(newSelection);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles TOGGLE_ROW_SELECTION action', () => {
     const initialStateWithSelection = { ...initialState, rowSelection: { '1': true } };
@@ -123,7 +127,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialStateWithSelection, action);
     
     expect(result.rowSelection).toEqual({ '1': true, '2': true });
-  });
+  }, TEST_TIMEOUT);
 
   it('handles CLEAR_ROW_SELECTION action', () => {
     const initialStateWithSelection = { ...initialState, rowSelection: { '1': true, '2': true } };
@@ -132,7 +136,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialStateWithSelection, action);
     
     expect(result.rowSelection).toEqual({});
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_CREATING action', () => {
     const action = { type: 'SET_CREATING' as const, payload: true };
@@ -140,7 +144,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.isCreating).toBe(true);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_CREATION_DATA action', () => {
     const creationData = { name: 'New User', email: 'new@example.com' };
@@ -149,7 +153,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.creationData).toEqual(creationData);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles CLEAR_CREATION_DATA action', () => {
     const initialStateWithCreationData = { ...initialState, creationData: { name: 'Test' } };
@@ -158,7 +162,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialStateWithCreationData, action);
     
     expect(result.creationData).toEqual({});
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_EDITING_ROW action', () => {
     const editingData = { rowId: '1', data: { name: 'Updated Name' } };
@@ -168,7 +172,7 @@ describe('[unit] dataTableReducer', () => {
     
     expect(result.editingRowId).toBe('1');
     expect(result.editingData).toEqual({ name: 'Updated Name' });
-  });
+  }, TEST_TIMEOUT);
 
   it('handles CLEAR_EDITING action', () => {
     const initialStateWithEditing = { 
@@ -182,7 +186,7 @@ describe('[unit] dataTableReducer', () => {
     
     expect(result.editingRowId).toBe(null);
     expect(result.editingData).toEqual({});
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_IMPORT_MODAL action', () => {
     const action = { type: 'SET_IMPORT_MODAL' as const, payload: true };
@@ -190,7 +194,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.showImportModal).toBe(true);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_FILTER_ROW action', () => {
     const action = { type: 'SET_FILTER_ROW' as const, payload: true };
@@ -198,7 +202,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.showFilterRow).toBe(true);
-  });
+  }, TEST_TIMEOUT);
 
   it('handles SET_SEARCH_QUERY action', () => {
     const action = { type: 'SET_SEARCH_QUERY' as const, payload: 'search term' };
@@ -206,7 +210,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, action);
     
     expect(result.searchQuery).toBe('search term');
-  });
+  }, TEST_TIMEOUT);
 
   it('handles RESET_STATE action', () => {
     const modifiedState = {
@@ -229,7 +233,7 @@ describe('[unit] dataTableReducer', () => {
     expect(result.rowSelection).toEqual({});
     expect(result.isCreating).toBe(false);
     expect(result.searchQuery).toBe('');
-  });
+  }, TEST_TIMEOUT);
 
   it('handles INITIALIZE_STATE action', () => {
     const partialState = {
@@ -244,7 +248,7 @@ describe('[unit] dataTableReducer', () => {
     expect(result.sorting).toEqual(partialState.sorting);
     expect(result.searchQuery).toBe(partialState.searchQuery);
     expect(result.columnFilters).toEqual(initialState.columnFilters); // Should remain unchanged
-  });
+  }, TEST_TIMEOUT);
 
   it('returns same state for unknown action', () => {
     const unknownAction = { type: 'UNKNOWN_ACTION' as any, payload: null };
@@ -252,7 +256,7 @@ describe('[unit] dataTableReducer', () => {
     const result = dataTableReducer(initialState, unknownAction);
     
     expect(result).toBe(initialState);
-  });
+  }, TEST_TIMEOUT);
 });
 
 describe('[unit] useDataTableState', () => {
@@ -274,7 +278,7 @@ describe('[unit] useDataTableState', () => {
     expect(result.current.state.showImportModal).toBe(false);
     expect(result.current.state.showFilterRow).toBe(false);
     expect(result.current.state.searchQuery).toBe('');
-  });
+  }, TEST_TIMEOUT);
 
   it('initializes with custom options', () => {
     const options = {
@@ -288,7 +292,7 @@ describe('[unit] useDataTableState', () => {
     expect(result.current.state.pagination.pageSize).toBe(25);
     expect(result.current.state.columnOrder).toEqual(['id', 'name', 'email']);
     expect(result.current.state.rowSelection).toEqual({ '1': true });
-  });
+  }, TEST_TIMEOUT);
 
   it('provides action creators', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -312,7 +316,7 @@ describe('[unit] useDataTableState', () => {
     expect(typeof result.current.actions.setFilterRow).toBe('function');
     expect(typeof result.current.actions.setSearchQuery).toBe('function');
     expect(typeof result.current.actions.resetState).toBe('function');
-  });
+  }, TEST_TIMEOUT);
 
   it('updates state when actions are called', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -322,7 +326,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.sorting).toEqual([{ id: 'name', desc: false }]);
-  });
+  }, TEST_TIMEOUT);
 
   it('updates column filters', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -332,7 +336,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.columnFilters).toEqual([{ id: 'name', value: 'John' }]);
-  });
+  }, TEST_TIMEOUT);
 
   it('updates column visibility', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -342,7 +346,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.columnVisibility).toEqual({ name: false, email: true });
-  });
+  }, TEST_TIMEOUT);
 
   it('updates grouping', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -352,7 +356,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.grouping).toEqual(['name']);
-  });
+  }, TEST_TIMEOUT);
 
   it('updates expanded state', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -362,7 +366,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.expanded).toEqual({ '1': true });
-  });
+  }, TEST_TIMEOUT);
 
   it('updates pagination', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -372,7 +376,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.pagination).toEqual({ pageIndex: 2, pageSize: 25 });
-  });
+  }, TEST_TIMEOUT);
 
   it('updates column order', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -382,7 +386,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.columnOrder).toEqual(['name', 'id', 'email']);
-  });
+  }, TEST_TIMEOUT);
 
   it('updates row selection', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -392,7 +396,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.rowSelection).toEqual({ '1': true, '2': false });
-  });
+  }, TEST_TIMEOUT);
 
   it('toggles row selection', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -408,7 +412,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.rowSelection).toEqual({ '1': false });
-  });
+  }, TEST_TIMEOUT);
 
   it('clears row selection', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -424,7 +428,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.rowSelection).toEqual({});
-  });
+  }, TEST_TIMEOUT);
 
   it('updates creating state', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -434,7 +438,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.isCreating).toBe(true);
-  });
+  }, TEST_TIMEOUT);
 
   it('updates creation data', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -445,7 +449,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.creationData).toEqual(creationData);
-  });
+  }, TEST_TIMEOUT);
 
   it('clears creation data', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -461,7 +465,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.creationData).toEqual({});
-  });
+  }, TEST_TIMEOUT);
 
   it('updates editing row', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -472,7 +476,7 @@ describe('[unit] useDataTableState', () => {
     
     expect(result.current.state.editingRowId).toBe('1');
     expect(result.current.state.editingData).toEqual({ name: 'Updated Name' });
-  });
+  }, TEST_TIMEOUT);
 
   it('clears editing state', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -489,7 +493,7 @@ describe('[unit] useDataTableState', () => {
     
     expect(result.current.state.editingRowId).toBe(null);
     expect(result.current.state.editingData).toEqual({});
-  });
+  }, TEST_TIMEOUT);
 
   it('updates import modal state', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -499,7 +503,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.showImportModal).toBe(true);
-  });
+  }, TEST_TIMEOUT);
 
   it('updates filter row state', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -509,7 +513,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.showFilterRow).toBe(true);
-  });
+  }, TEST_TIMEOUT);
 
   it('updates search query', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -519,7 +523,7 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(result.current.state.searchQuery).toBe('search term');
-  });
+  }, TEST_TIMEOUT);
 
   it('resets state to initial values', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -546,7 +550,7 @@ describe('[unit] useDataTableState', () => {
     expect(result.current.state.columnFilters).toEqual([]);
     expect(result.current.state.rowSelection).toEqual({});
     expect(result.current.state.searchQuery).toBe('');
-  });
+  }, TEST_TIMEOUT);
 
   it('calls onRowSelectionChange callback when provided', () => {
     const onRowSelectionChange = vi.fn();
@@ -559,20 +563,20 @@ describe('[unit] useDataTableState', () => {
     });
     
     expect(onRowSelectionChange).toHaveBeenCalledWith({ '1': true });
-  });
+  }, TEST_TIMEOUT);
 
   it('provides computed values', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
     
     expect(result.current.computed).toBeDefined();
     expect(typeof result.current.computed).toBe('object');
-  });
+  }, TEST_TIMEOUT);
 
   it('provides clearFilters function', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
     
     expect(typeof result.current.clearFilters).toBe('function');
-  });
+  }, TEST_TIMEOUT);
 
   it('maintains state consistency across multiple actions', () => {
     const { result } = renderHook(() => useDataTableState<TestData>());
@@ -588,5 +592,5 @@ describe('[unit] useDataTableState', () => {
     expect(result.current.state.columnFilters).toEqual([{ id: 'name', value: 'John' }]);
     expect(result.current.state.pagination).toEqual({ pageIndex: 1, pageSize: 25 });
     expect(result.current.state.rowSelection).toEqual({ '1': true, '2': false });
-  });
+  }, TEST_TIMEOUT);
 });

package/src/components/DataTable/hooks/useDataTablePermissions.ts

@@ -100,14 +100,7 @@ export function useDataTablePermissions<TData extends DataRecord>(
       }, 5000);
 
       try {
-        logger.debug('useDataTablePermissions', 'Starting super admin check', { userId: user?.id });
         const superAdminStatus = await isSuperAdmin(user.id);
-        const elapsed = Date.now() - startTime;
-        logger.debug('useDataTablePermissions', 'Super admin check completed', {
-          userId: user?.id,
-          isSuperAdmin: superAdminStatus,
-          elapsedMs: elapsed,
-        });
         setIsSuperAdminUser(superAdminStatus);
       } catch (error) {
         const elapsed = Date.now() - startTime;
@@ -159,7 +152,8 @@ export function useDataTablePermissions<TData extends DataRecord>(
   const { resolvedScope: rawResolvedScope, isLoading: scopeLoading } = useResolvedScope({
     supabase,
     selectedOrganisationId: selectedOrganisation?.id || null,
-    selectedEventId: selectedEvent?.event_id || null
+    selectedEventId: selectedEvent?.event_id || null,
+    selectedEventOrganisationId: selectedEvent?.organisation_id || null
   });
 
   /**
@@ -277,24 +271,33 @@ export function useDataTablePermissions<TData extends DataRecord>(
   // to maintain consistent API with useCan return type
   // React 19 fix: Read isLoading directly from result objects to ensure we get the latest state
   // instead of relying on memoized object references which may not update properly in React 19
+  // CRITICAL FIX: When isSuperAdminUser is true, immediately grant all permissions without waiting
+  // for useCan results. This ensures super admins can use DataTable features immediately.
   const permissions = useMemo(() => {
     // Helper to create a permission result that bypasses for super admins
     // If super admin check is still loading, we show loading state to prevent premature "Access Denied"
     // Once super admin check completes, if user is super admin, all permissions are true
     // Otherwise, use the normal permission check results
-    const createSuperAdminAwarePermission = (result: ReturnType<typeof useCan>) => ({
-      // If super admin check completed and user is super admin, grant all permissions
-      // and mark loading as complete for DataTable gating purposes.
-      // This is not a "hack": super admins *semantically* bypass permission checks, so the
-      // table must not remain blocked behind background permission queries.
-      can: isSuperAdminUser === true ? true : result.can,
-      isLoading:
-        isSuperAdminUser === true
-          ? false
-          : (isSuperAdminUser === null && isCheckingSuperAdmin) || result.isLoading,
-      error: isSuperAdminUser === true ? null : result.error,
-      refetch: result.refetch,
-    });
+    const createSuperAdminAwarePermission = (result: ReturnType<typeof useCan>) => {
+      // CRITICAL: If super admin is confirmed, immediately grant permission
+      // Don't wait for useCan results - super admins bypass all checks
+      if (isSuperAdminUser === true) {
+        return {
+          can: true,
+          isLoading: false,
+          error: null,
+          refetch: result.refetch,
+        };
+      }
+      
+      // For non-super-admins or while checking, use normal permission results
+      return {
+        can: result.can,
+        isLoading: (isSuperAdminUser === null && isCheckingSuperAdmin) || result.isLoading,
+        error: result.error,
+        refetch: result.refetch,
+      };
+    };
 
     return {
       canRead: createSuperAdminAwarePermission(canReadResult),

package/src/components/DataTable/hooks/useDataTableState.ts

@@ -8,7 +8,7 @@
  * This replaces the scattered useState calls with a single, predictable state management system.
  */
 
-import { useReducer, useCallback, useMemo } from 'react';
+import { useReducer, useCallback, useMemo, useEffect } from 'react';
 import type { 
   SortingState, 
   ColumnFiltersState, 
@@ -18,6 +18,10 @@ import type {
   PaginationState 
 } from '@tanstack/react-table';
 import type { DataRecord, CellValue, RowId } from '../types';
+import { useSessionDraft } from '../../../hooks/useSessionDraft';
+import { deriveDataTableKey } from '../../../utils/persistence/keyDerivation';
+import { filterSensitiveFields } from '../../../utils/persistence/sensitiveFieldDetection';
+import { useUnifiedAuth } from '../../../providers/services/UnifiedAuthProvider';
 
 // Re-export types for external use
 export type { DataRecord, CellValue, RowId };
@@ -265,6 +269,11 @@ export interface UseDataTableStateOptions<TData extends DataRecord> {
   onRowSelectionChange?: (selection: Record<string, boolean>) => void;
   defaultSorting?: SortingState;
   defaultGrouping?: GroupingState;
+  // Persistence options
+  rbacPageId?: string;
+  title?: string;
+  location?: { pathname: string } | null;
+  columnFieldNames?: string[]; // Field names for sensitive field filtering
 }
 
 export function useDataTableState<TData extends DataRecord>({
@@ -273,18 +282,78 @@ export function useDataTableState<TData extends DataRecord>({
   initialRowSelection = {},
   onRowSelectionChange,
   defaultSorting,
-  defaultGrouping
+  defaultGrouping,
+  rbacPageId,
+  title,
+  location,
+  columnFieldNames = [],
 }: UseDataTableStateOptions<TData> = {}) {
   
-  const initialState = useMemo(() => 
+  // Call all hooks unconditionally at the top level
+  // Hooks must be called in the same order on every render
+  // Get user ID for scoping persistence (prevents data leakage between users)
+  // If provider is missing, it will throw - errors should be handled by error boundaries
+  const auth = useUnifiedAuth();
+  const userId = auth.user?.id || null;
+
+  const persistenceKey = useMemo(() => {
+    return deriveDataTableKey(
+      {
+        rbacPageId,
+        title,
+        columnIds,
+      },
+      location,
+      userId
+    );
+  }, [rbacPageId, title, columnIds, location, userId]);
+
+  // Create initial state
+  const baseInitialState = useMemo(() => 
     createInitialState<TData>(initialPageSize, columnIds, defaultSorting, defaultGrouping),
     [initialPageSize, columnIds, defaultSorting, defaultGrouping]
   );
 
-  const [state, dispatch] = useReducer(dataTableReducer<TData>, {
-    ...initialState,
-    rowSelection: initialRowSelection
-  });
+  // Define state subset to persist (excluding sensitive fields from editing/creation data)
+  type PersistedState = Omit<DataTableState<TData>, 'editingData' | 'creationData'> & {
+    editingData: Partial<Record<string, CellValue>>;
+    creationData: Partial<Record<string, CellValue>>;
+  };
+
+  // Use session draft for persistence
+  const { state: persistedState, setState: setPersistedState, clearDraft } = useSessionDraft<PersistedState>(
+    persistenceKey || 'datatable:no-key',
+    {
+      ...baseInitialState,
+      rowSelection: initialRowSelection,
+      editingData: {},
+      creationData: {},
+    } as PersistedState,
+    {
+      enabled: Boolean(persistenceKey),
+      debounceMs: 300,
+    }
+  );
+
+  // Merge persisted state with initial state (persisted takes precedence)
+  const initialState = useMemo(() => {
+    if (!persistenceKey || !persistedState) {
+      return {
+        ...baseInitialState,
+        rowSelection: initialRowSelection,
+      };
+    }
+
+    // Merge persisted state with initial state
+    return {
+      ...baseInitialState,
+      ...persistedState,
+      // Ensure rowSelection is merged properly
+      rowSelection: persistedState.rowSelection || initialRowSelection,
+    };
+  }, [baseInitialState, persistedState, initialRowSelection, persistenceKey]);
+
+  const [state, dispatch] = useReducer(dataTableReducer<TData>, initialState);
 
   // ============================================================================
   // ACTION CREATORS
@@ -384,10 +453,57 @@ export function useDataTableState<TData extends DataRecord>({
     dispatch({ type: 'SET_SEARCH_QUERY', payload: '' });
   }, []);
 
+  // Persist state changes (debounced)
+  useEffect(() => {
+    if (!persistenceKey) {
+      return;
+    }
+
+    // Filter sensitive fields from editingData and creationData
+    const filteredEditingData = columnFieldNames.length > 0
+      ? filterSensitiveFields(state.editingData, columnFieldNames)
+      : state.editingData;
+
+    const filteredCreationData = columnFieldNames.length > 0
+      ? filterSensitiveFields(state.creationData, columnFieldNames)
+      : state.creationData;
+
+    // Persist state subset
+    const stateToPersist: PersistedState = {
+      sorting: state.sorting,
+      columnFilters: state.columnFilters,
+      columnVisibility: state.columnVisibility,
+      grouping: state.grouping,
+      expanded: state.expanded,
+      pagination: state.pagination,
+      columnOrder: state.columnOrder,
+      rowSelection: state.rowSelection,
+      isCreating: state.isCreating,
+      creationData: filteredCreationData,
+      editingRowId: state.editingRowId,
+      editingData: filteredEditingData,
+      showImportModal: state.showImportModal,
+      showFilterRow: state.showFilterRow,
+      searchQuery: state.searchQuery,
+    };
+
+    setPersistedState(stateToPersist);
+  }, [
+    state,
+    persistenceKey,
+    columnFieldNames,
+    setPersistedState,
+  ]);
+
+  // Enhanced actions - no need to modify, persistence happens automatically via useEffect
+  const enhancedActions = actions;
+
   return {
     state,
-    actions,
+    actions: enhancedActions,
     computed,
-    clearFilters
+    clearFilters,
+    // Expose clearDraft for external use (e.g., on successful submit)
+    clearDraft: persistenceKey ? clearDraft : undefined,
   };
 }