Compound Components

VitalGrid's compound component architecture allows you to compose grid functionality using flexible, reusable components.

Compound Component Pattern

VitalGrid follows a compound component pattern where:

• Provider: Manages state and context for the entire grid
• Root: Main container component
• Toolbar: Customizable toolbar with actions and controls
• Header: Column headers with sorting and filtering
• Body: Main grid body with virtualized rows
• Footer: Optional footer for summaries and pagination

Customization Options

Toolbar Customization

<VitalGrid.Toolbar>
  <VitalGrid.Toolbar.Search />
  <VitalGrid.Toolbar.Actions />
  <VitalGrid.Toolbar.Views />
  <CustomToolbarComponent />
</VitalGrid.Toolbar>

Header Customization

<VitalGrid.Header>
  <VitalGrid.Header.Row>
    <VitalGrid.Header.Cell columnId="name" />
    <CustomHeaderCell columnId="actions" />
  </VitalGrid.Header.Row>
</VitalGrid.Header>

Body Customization

<VitalGrid.Body>
  <VitalGrid.Body.VirtualizedRows>
    <VitalGrid.Body.Row>
      <VitalGrid.Body.Cell columnId="name" />
      <CustomBodyCell columnId="actions" />
    </VitalGrid.Body.Row>
  </VitalGrid.Body.VirtualizedRows>
</VitalGrid.Body>

Benefits

• Flexibility: Mix and match components as needed
• Reusability: Create custom components that work with the grid
• Maintainability: Clear separation of concerns
• Extensibility: Easy to add new features without breaking existing code

Best Practices

1. Use the Provider: Always wrap your grid in the Provider component
2. Consistent Styling: Follow the established styling patterns
3. Performance: Use memoization for custom components
4. Accessibility: Ensure custom components follow ARIA guidelines