Data Grid - Row grouping recipes
Advanced grid customization recipes.
Toggling groups on row click
In the demo below, you can toggle the group by clicking anywhere on the grouping row:
Company
Title
Gross
Director
Year
Cinematic Universe
20th Century Fox (3)
Disney Studios (20)
Universal Pictures (5)
Warner Bros. Pictures (4)
New Line Cinema (1)
Paramount Pictures (2)
Pinning a grouped column
Use GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD
to pin a grouped column. In the demo below, the Company
column is pinned:
Company
Title
Gross
Director
Year
Cinematic Universe
20th Century Fox (3)
Disney Studios (20)
Universal Pictures (5)
Warner Bros. Pictures (4)
New Line Cinema (1)
Paramount Pictures (2)
Sorting row groups by the number of child rows
By default, the row grouping column uses sortComparator
of the grouping column for sorting.
To sort the row groups by the number of child rows, you can override it using groupingColDef.sortComparator
:
Group
Title
Gross
Company
Director
Year
Disney Studios (20)
Universal Pictures (5)
Warner Bros. Pictures (4)
20th Century Fox (3)
Paramount Pictures (2)
New Line Cinema (1)