Interactive Features

VitalGrid provides rich interactive features for engaging user experiences including selection, bulk operations, and real-time data updates.

Interactive Capabilities

Row Selection

• Single Selection: Click to select individual rows
• Multi Selection: Ctrl/Cmd + click for multiple selection
• Range Selection: Shift + click for range selection
• Select All: Checkbox in header for selecting all rows
• Keyboard Navigation: Arrow keys and spacebar for selection

Bulk Actions

• Custom Actions: Define custom bulk operations
• Conditional Actions: Show/hide actions based on selection
• Progress Indicators: Visual feedback for long-running operations
• Error Handling: Graceful error handling for failed operations

Real-time Updates

• Live Data: Automatic updates when data changes
• Optimistic Updates: Immediate UI feedback with rollback on error
• Conflict Resolution: Handle concurrent modifications
• Subscription Management: Efficient data synchronization

Implementation Examples

Row Selection

const { grid } = VitalGrid.useVitalGrid({
  // ... other config
  enableRowSelection: true,
  enableMultiRowSelection: true,
  onSelectionChange: (selectedRows) => {
    console.log('Selected rows:', selectedRows);
  },
});

Bulk Actions

<VitalGrid.Toolbar>
  <VitalGrid.Toolbar.BulkActions>
    <BulkDeleteAction />
    <BulkExportAction />
    <CustomBulkAction />
  </VitalGrid.Toolbar.BulkActions>
</VitalGrid.Toolbar>

Real-time Data

// Subscribe to data changes
useEffect(() => {
  const subscription = dataSource.subscribe((updates) => {
    grid.updateData(updates);
  });
  
  return () => subscription.unsubscribe();
}, [grid]);

Use Cases

• Admin Panels: User management with bulk operations
• Data Analysis: Interactive data exploration and filtering
• Project Management: Task selection and bulk status updates
• E-commerce: Product management with bulk price updates
• Content Management: Article selection and bulk publishing

Performance Considerations

• Virtual Scrolling: Handles large datasets efficiently
• Debounced Updates: Prevents excessive re-renders
• Optimized Selection: Efficient selection algorithms
• Memory Management: Proper cleanup of subscriptions

Accessibility

• Keyboard Navigation: Full keyboard support for all interactions
• Screen Reader Support: Proper ARIA labels and announcements
• Focus Management: Logical tab order and focus trapping
• High Contrast: Support for high contrast themes