SegmentationTable Migration Guide
This guide will help you migrate your code to use the refactored SegmentationTable component.
Key Changesโ
- Context System Refactoring: The context system has been completely redesigned with dedicated providers for different aspects of the segmentation UI
- Compound Component Pattern: Components now follow a more structured compound component pattern with clearer parent-child relationships
- Header Components Changed: The
SegmentationTable.SelectorHeader
has been replaced with specialized header components - New Features: Added segment statistics, hover cards, and better customization options
- Better Customization: Added support for custom dropdown menus and segment statistics headers
Migration Stepsโ
1. Migrate from SelectorHeader to New Header Componentsโ
The SegmentationTable.SelectorHeader
has been removed. Use the new Collapsed pattern instead:
- <SegmentationTable.SelectorHeader>
- <CustomDropdownMenuContent />
- </SegmentationTable.SelectorHeader>
+ <SegmentationTable.Collapsed>
+ <SegmentationTable.Collapsed.Header>
+ <SegmentationTable.Collapsed.DropdownMenu>
+ <CustomDropdownMenuContent />
+ </SegmentationTable.Collapsed.DropdownMenu>
+ <SegmentationTable.Collapsed.Selector />
+ <SegmentationTable.Collapsed.Info />
+ </SegmentationTable.Collapsed.Header>
+ <SegmentationTable.Collapsed.Content>
+ {/* Content here */}
+ </SegmentationTable.Collapsed.Content>
+ </SegmentationTable.Collapsed>
2. Update Component Hierarchy for Expanded Viewโ
The expanded view structure has also changed:
- <SegmentationTable.Expanded>
- <SegmentationTable.Header>
- <CustomDropdownMenuContent />
- </SegmentationTable.Header>
- <SegmentationTable.Segments />
- </SegmentationTable.Expanded>
+ <SegmentationTable.Expanded>
+ <SegmentationTable.Expanded.Header>
+ <SegmentationTable.Expanded.DropdownMenu>
+ <CustomDropdownMenuContent />
+ </SegmentationTable.Expanded.DropdownMenu>
+ <SegmentationTable.Expanded.Label />
+ <SegmentationTable.Expanded.Info />
+ </SegmentationTable.Expanded.Header>
+ <SegmentationTable.Expanded.Content>
+ <SegmentationTable.AddSegmentRow />
+ <SegmentationTable.Segments />
+ </SegmentationTable.Expanded.Content>
+ </SegmentationTable.Expanded>
3. Using the New Segment Statistics Componentโ
The new SegmentStatistics
component provides a way to display segment statistics:
+ <SegmentationTable.Segments>
+ <SegmentationTable.SegmentStatistics.Header>
+ <CustomSegmentStatisticsHeader />
+ </SegmentationTable.SegmentStatistics.Header>
+ <SegmentationTable.SegmentStatistics.Body />
+ </SegmentationTable.Segments>