--- title: "Row Grouping" enterprise: true framework: react version: "36.1.0" --- # Row Grouping The Grid can group rows with equivalent cell values under shared parent rows. #### Kitchen Sink ```tsx "use client"; import React, { useCallback, useMemo, useRef, useState, StrictMode, } from "react"; import { createRoot } from "react-dom/client"; import { AgGridReact, AgGridProvider } from "ag-grid-react"; import { AutoGroupColumnDef, ClientSideRowModelModule, ColDef, ColGroupDef, GridApi, GridOptions, ModuleRegistry, enableDevValidations, } from "ag-grid-community"; import { RowGroupingModule, RowGroupingPanelModule } from "ag-grid-enterprise"; import { IOlympicData } from "./interfaces"; import { useFetchJson } from "./useFetchJson"; if (process.env.NODE_ENV !== "production") { enableDevValidations(); } const modules = [ ClientSideRowModelModule, RowGroupingModule, RowGroupingPanelModule, ]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []); const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []); const [columnDefs, setColumnDefs] = useState([ { field: "country", rowGroup: true, enableRowGroup: true, hide: true }, { field: "year", rowGroup: true, enableRowGroup: true, hide: true }, { field: "athlete" }, { field: "sport", enableRowGroup: true }, { field: "gold" }, { field: "silver" }, { field: "bronze" }, ]); const defaultColDef = useMemo(() => { return { flex: 1, minWidth: 100, }; }, []); const autoGroupColumnDef = useMemo(() => { return { minWidth: 200, }; }, []); const { data, loading } = useFetchJson( "https://www.ag-grid.com/example-assets/olympic-winners.json", ); return (
rowData={data} loading={loading} columnDefs={columnDefs} defaultColDef={defaultColDef} autoGroupColumnDef={autoGroupColumnDef} rowGroupPanelShow={"always"} groupDefaultExpanded={1} />
); }; const root = createRoot(document.getElementById("root")!); root.render( , ); ``` [Live example: Kitchen Sink](https://www.ag-grid.com/examples/grouping/kitchen-sink/reactFunctionalTs) ## Enabling Row Grouping Row Grouping is enabled by setting `rowGroup` to `true` on one or more [Column Definition](https://www.ag-grid.com/react-data-grid/column-definitions/). Group rows are then introduced for each unique value in that column, containing the rows with that value. The example above uses the following configuration to group rows by their `country` and `year` values: ```jsx const [columnDefs, setColumnDefs] = useState([ { field: 'country', rowGroup: true }, { field: 'year', rowGroup: true }, // ...other column definitions ]); ``` ## API Reference > **Note** > > The row grouping state can be saved and restored as part of [Grid State](https://www.ag-grid.com/react-data-grid/grid-state/). | Property | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `groupDisplayType` | `RowGroupingDisplayType` | | | Specifies how the results of row grouping should be displayed. The options are: - `'singleColumn'`: single group column automatically added by the grid. - `'multipleColumns'`: a group column per row group is added automatically. - `'groupRows'`: group rows are automatically added instead of group columns. - `'custom'`: informs the grid that group columns will be provided. See [Row Grouping - Display Types](https://www.ag-grid.com/react-data-grid/grouping-display-types/) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `autoGroupColumnDef` | `AutoGroupColumnDef` | | | Allows specifying the group 'auto column' if you are not happy with the default. If grouping, this column definition is included as the first column in the grid. If not grouping, this column is not included. Cell tooltip properties set here (`tooltipField`, `tooltipValueGetter`, `tooltipComponent`) apply to leaf rows only; group rows inherit cell tooltips from their underlying column `colDef`. `headerTooltip` continues to apply to the group column header. See [Group Column Configuration](https://www.ag-grid.com/react-data-grid/grouping-single-group-column/#configuration) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `groupRowRenderer` | `any` | | | Provide the Cell Renderer to use when `groupDisplayType = 'groupRows'`. See [Custom Group Row Cell Renderer](https://www.ag-grid.com/react-data-grid/grouping-group-rows/#custom-cell-renderer) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `groupRowRendererParams` | `any` | | | Customise the parameters provided to the `groupRowRenderer` component. See [Configuring Group Row Cell Renderer](https://www.ag-grid.com/react-data-grid/grouping-group-rows/#cell-component) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `showOpenedGroup` | `boolean` | | `false` | Shows the open group in the group column for non-group rows. See [Showing Open Groups](https://www.ag-grid.com/react-data-grid/grouping-multiple-group-columns/#display-the-parent-group-value) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `groupHideOpenParents` | `boolean` | | `false` | Set to `true` to hide parents that are open. When used with multiple columns for showing groups, it can give a more pleasing user experience. See [Hide Open Parents](https://www.ag-grid.com/react-data-grid/grouping-multiple-group-columns/#hiding-expanded-parent-rows) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `groupHideColumnsUntilExpanded` | `boolean` | | `false` | When using `groupDisplayType='multipleColumns'` or `groupHideOpenParents=true`, hides group columns for levels that have not yet been expanded. Only the top-level group column is initially visible; each subsequent level becomes visible when at least one group at the preceding level is expanded. (Client Side Row Model only) See [Hiding Group Columns Until Expanded](https://www.ag-grid.com/react-data-grid/grouping-multiple-group-columns/#hiding-group-columns-until-expanded) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `groupHideParentOfSingleChild` | `boolean \| 'leafGroupsOnly'` | | `false` | Enable to display the child row in place of the group row when the group only has a single child. See [Remove Single Children](https://www.ag-grid.com/react-data-grid/grouping-data/#hiding-parents-of-individual-rows) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `initialGroupOrderComparator` | `InitialGroupOrderComparator` | | | Allows default sorting of groups. See [Initial Group Order](https://www.ag-grid.com/react-data-grid/grouping-sorting/#unsorted-group-order) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `groupAllowUnbalanced` | `boolean` | | `false` | Set to `true` to prevent the grid from creating a '(Blanks)' group for nodes which do not belong to a group, and display the unbalanced nodes alongside group nodes. See [Enabling Unbalanced Groups](https://www.ag-grid.com/react-data-grid/grouping-data/#grouping-on-null-and-undefined-data) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `groupMaintainOrder` | `boolean` | | `false` | When `true`, sorting on non-group columns does not reorder groups; only the rows within each group are sorted. Group order remains the structural order set at grouping time (data-insertion order, or `initialGroupOrderComparator` if configured) and is preserved across filter changes and transactions. If a group column was sorted via `colDef.sort` and the user later explicitly clears that sort, the structural order is restored. With multi-level row grouping, the order is maintained per level: a sort on a group column at one level only re-orders that level's groups; sibling levels keep their structural order. Applies to row grouping only. Has no effect on tree data, where row order is determined by the tree structure. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `groupDefaultExpanded` | `number` | | `0` | If grouping, set to the number of levels to expand by default, e.g. `0` for none, `1` for first level only, etc. Set to `-1` to expand everything. See [Opening Group Levels by Default](https://www.ag-grid.com/react-data-grid/grouping-opening-groups/#expanding-by-group-level) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `isGroupOpenByDefault` | `IsGroupOpenByDefault` | | | (Client-side Row Model only) Allows group rows to be open by default. For master rows use `isMasterOpenByDefault`. See [Open Groups by Default](https://www.ag-grid.com/react-data-grid/grouping-opening-groups/#expanding-via-callback) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `suppressGroupRowsSticky` | `boolean` | | `false` | Set to `true` prevent Group Rows from sticking to the top of the grid. See [Suppressing Sticky Groups](https://www.ag-grid.com/react-data-grid/grouping-opening-groups/#prevent-sticky-groups) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/react-data-grid/modules/). [Initial](https://www.ag-grid.com/react-data-grid/grid-interface/#initial-grid-options). | | `rowGroupPanelShow` | `'always' \| 'onlyWhenGrouping' \| 'never'` | | `'never'` | When to show the 'row group panel' (where you drag rows to group) at the top. See [Enabling Row Group Panel](https://www.ag-grid.com/react-data-grid/grouping-group-panel/#enabling-the-row-group-panel) for more information. Module: [`RowGroupingPanelModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `rowGroupPanelSuppressSort` | `boolean` | | `false` | Set to `true` to suppress sort indicators and actions from the row group panel. See [Suppress Sorting](https://www.ag-grid.com/react-data-grid/grouping-group-panel/#prevent-sorting) for more information. Module: [`RowGroupingPanelModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `pivotPanelSuppressSort` | `boolean` | | `false` | Set to `true` to suppress sort indicators and actions from the pivot panel and the column tool panel pivot pills. See [Sorting Pivot Columns](https://www.ag-grid.com/react-data-grid/pivoting-column-groups/#sorting-pivot-columns) for more information. Module: [`RowGroupingPanelModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `groupLockGroupColumns` | `number` | | `0` | If grouping, locks the group settings of a number of columns, e.g. `0` for no group locking. `1` for first group column locked, `-1` for all group columns locked. See [Group Lock Group Columns](https://www.ag-grid.com/react-data-grid/grouping-group-panel/#prevent-changes-to-group-order) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). [Initial](https://www.ag-grid.com/react-data-grid/grid-interface/#initial-grid-options). | | `groupHierarchyConfig` | `GroupHierarchyConfig` | | | Custom group hierarchy components can be defined here for later use in `colDef.groupHierarchy` See [Group Hierarchy Configuration](https://www.ag-grid.com/react-data-grid/grouping-data/#defining-custom-grouping-hierarchies) for more information. Module: [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `suppressDragLeaveHidesColumns` | `boolean` | | `false` | By default, dragging a column out of the grid, i.e. to the [Row Group Panel](https://www.ag-grid.com/react-data-grid/grouping-group-panel/), it will be hidden in the grid. This property prevents the column becoming hidden in the grid. Default: `false` See [Keeping Columns Visible](https://www.ag-grid.com/react-data-grid/grouping-group-panel/#prevent-user-grouping-from-hiding-columns) for more information. | | `suppressGroupChangesColumnVisibility` | `boolean \| 'suppressHideOnGroup' \| 'suppressShowOnUngroup'` | | `false` | Enable to prevent column visibility changing when grouped columns are changed. See [Keeping Columns Visible](https://www.ag-grid.com/react-data-grid/grouping-group-panel/#prevent-user-grouping-from-hiding-columns) for more information. | | `ssrmExpandAllAffectsAllRows` | `boolean` | | | (Server-side Row Model only) Controls whether expandAll / collapseAll operations apply to all rows (not just loaded ones), and whether group interactions override the default expansion state set by `isServerSideGroupOpenByDefault`. When true, users must provide a `getRowId` function to ensure proper row identification. Default: `false`. See [Row Grouping - Expand All / Collapse All](https://www.ag-grid.com/react-data-grid/server-side-model-grouping/#expand-all--collapse-all) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/react-data-grid/modules/). | | `refreshAfterGroupEdit` | `boolean` | | `false` | When `true`, the grid re-evaluates the grouping hierarchy after editing a grouped column value, moving the row to the correct group instantly. Also enables managed row dragging to update grouped column values so rows can move between groups. See [Row Grouping - Editing Groups](https://www.ag-grid.com/react-data-grid/grouping-edit/) for more information. Modules (any of): [`RowGroupingModule`](https://www.ag-grid.com/react-data-grid/modules/), [`TreeDataModule`](https://www.ag-grid.com/react-data-grid/modules/). |