Dexie Data Source

This example demonstrates how to use VitalGrid with Dexie and IndexedDB for persistent client-side storage. All changes are automatically saved to IndexedDB and persist across page refreshes.

Features Demonstrated

• IndexedDB Storage: Data stored in browser's IndexedDB database
• Persistent Storage: Data survives page refreshes and browser sessions
• Reactive Updates: Uses dexie-react-hooks for automatic UI updates
• Full CRUD Operations: Create, read, update, and delete operations
• No Server Required: Fully client-side solution

Live Example

Implementation Details

Data Source Structure

The Dexie 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: VitalGridColumn) => Promise<void>;
    update: (id: string, updates: Partial<VitalGridColumn>) => Promise<void>;
    delete: (id: string) => Promise<void>;
    current: VitalGridColumn[];
  };
  capabilities: DataSourceCapabilities;
}

Key Implementation Notes

1. Dexie Database: Uses Dexie library for IndexedDB access
2. Reactive Queries: Uses useLiveQuery from dexie-react-hooks for automatic updates
3. Auto-save: Changes are immediately persisted to IndexedDB
4. Initialization: Default data is seeded on first visit

Use Cases

This approach is perfect for:

• Offline-first Applications: Works without internet connection
• Client-side Only Apps: No backend server required
• Progressive Web Apps: Persistent storage for PWA features
• Development & Prototyping: Quick setup without backend
• Settings Management: User preferences and configuration

Setup Instructions

1. Install Dependencies:

   npm install dexie dexie-react-hooks

2. Create Data Source:

   import { useDexieDataSource } from '@fed/vital-grid/lib/data-sources/dexie';
   
   function DexieExample() {
     const dataSource = useDexieDataSource({
       dbName: 'my-app-db',
     });
   
     const { grid } = VitalGrid.useVitalGrid({
       dataSource,
       data: dataSource.rows.current,
       columns: dataSource.columns.current.map(
         VitalGrid.createColumnDef
       ),
     });
   
     return (
       <VitalGrid.Provider grid={grid} workspaceId="demo" height={600}>
         <VitalGrid.Root height={600}>
           <VitalGrid.Toolbar />
           <VitalGrid.Header />
           <VitalGrid.Body />
         </VitalGrid.Root>
       </VitalGrid.Provider>
     );
   }

Advantages Over localStorage

• Larger Storage: IndexedDB can store much more data than localStorage
• Better Performance: Asynchronous operations don't block the UI
• Structured Data: Better support for complex data structures
• Indexing: Can create indexes for faster queries
• Transactions: Supports atomic operations

Production Considerations

For production applications:

• Data Limits: IndexedDB has storage quotas (check with navigator.storage.estimate())
• Browser Support: Ensure target browsers support IndexedDB
• Migration: Plan for schema migrations if data structure changes
• Backup: Consider syncing critical data to a server
• Performance: Index large datasets appropriately

Related Examples

• Local Data Source - Simpler localStorage-based approach
• Data Sources Guide - Learn about creating custom data sources