Documentation
Nested Headers
Nested headers allow you to create hierarchical column structures by grouping related columns under a parent header, making complex data more organized and easier to understand.
Implementation
To create nested headers, add a children array to your parent header object, containing the child column definitions:
React TSX
1
Key Points About Nested Headers
- Parent headers serve as container columns and typically don't display cell data
- Child columns can have all the same properties as regular columns (sorting, filtering, custom renderers, etc.)
- You can have multiple levels of nesting by adding children to child columns
- Width of the parent column will automatically adjust to fit all child columns
Common Use Cases
- Grouped Data Categories: Organize related columns like "Personal Information", "Contact Details", etc.
- Time-based Data: Group columns by time periods (Q1, Q2, Q3, Q4) with child columns for specific metrics
- Financial Reports: Group columns for "Revenue", "Expenses", "Profit" with subcategories
- Test Scores: As shown in the example, group different subject scores under a single parent
