Local Data Source

This example demonstrates how to use VitalGrid with browser localStorage for persistent data storage. All changes are automatically saved and restored across page refreshes.

Features Demonstrated

• Persistent Storage: Data survives page refreshes and browser sessions
• Real-time Updates: Simulated real-time data updates
• Full CRUD Operations: Create, read, update, and delete operations
• Auto-save: Automatic saving to localStorage on any change
• Performance Monitoring: Render count tracking for optimization

Live Example

Implementation Details

Data Source Structure

The local data source implements the VitalGridDataSource interface:

interface VitalGridDataSource<T> {
  rows: {
    create: (data: Partial<T>) => Promise<T>;
    update: (id: string, updates: Partial<T>) => Promise<void>;
    delete: (id: string) => Promise<void>;
    current: T[];
  };
  columns: {
    create: (column: Partial<VitalGridColumn>) => Promise<void>;
    update: (id: string, updates: Partial<VitalGridColumn>) => Promise<void>;
    delete: (id: string) => Promise<void>;
    current: VitalGridColumn[];
  };
  capabilities: DataSourceCapabilities;
}

Key Implementation Notes

1. Memoization: The data source object is memoized to prevent infinite re-renders
2. Auto-save: useEffect hooks automatically save changes to localStorage
3. Initialization: Default data is loaded on first visit
4. Real-time Simulation: Interval updates demonstrate live data capabilities

Use Cases

This approach is perfect for:

• Prototyping and development
• Client-side only applications
• Offline-first applications
• Settings and preference management
• Temporary data storage

Production Considerations

For production applications with server-side requirements, consider:

• Dexie Data Source for IndexedDB storage with better performance
• Custom API integration for existing backends
• Database integration for persistent server-side storage