Documentation
Row Grouping
Row grouping allows you to organize your data by common values, creating collapsible sections that make it easier to navigate large datasets and analyze related information.
Basic Row Grouping
To enable row grouping in Simple Table, you need to:
- Add the
expandable: trueproperty to the column you want to use for grouping - Structure your data with nested rows using the
childrenproperty inrowMeta - Set
isExpandedinrowMetato control the initial expansion state
React TSX
1
Key Properties
expandable: true: Makes a column expandable for groupingrowMeta.children: Contains nested rows for the grouprowMeta.isExpanded: Controls whether a group is expanded
Data Structure
Your data should be structured with nested rows using the children property in rowMeta. Here's an example:
{
rowMeta: {
rowId: 1,
children: [
{
rowMeta: { rowId: 2 },
rowData: { /* child row data */ }
}
]
},
rowData: { /* parent row data */ }
}