Configure the initial expanded group row state when using Tree Data.
Expanding by Group Level
When providing a hierarchy, all levels will default to a collapsed state. This can be configured by setting the groupDefaultExpanded
grid option, providing a number will expand all groups down to that level, or providing -1 will expand all groups.
The example above uses the following configuration to expand the first level of groups, but no others:
const groupDefaultExpanded = 1;
<AgGridReact groupDefaultExpanded={groupDefaultExpanded} />
Expanding via Callback
To granularly determine which groups should be expanded by default, use the isGroupOpenByDefault
grid callback.
(Client-side Row Model only) Allows groups to be open by default. |
The example above uses the following configuration to expand the Australia
and its child 2004
groups by default:
const isGroupOpenByDefault = (params) => {
const route = params.rowNode.getRoute();
const destPath = ['Australia', '2004'];
return route.every((item, idx) => destPath[idx] === item);
};
<AgGridReact isGroupOpenByDefault={isGroupOpenByDefault} />
Row keys are only unique within their groups, so it is recommended to instead use the entire Row Route to identify the row.
Prevent Sticky Groups
When scrolling through an expanded group, the group row will stick to the top of the grid. To prevent this behaviour, set the suppressGroupRowsSticky
property to true
.
The example above uses the following configuration to prevent groups from sticking:
const suppressGroupRowsSticky = true;
<AgGridReact suppressGroupRowsSticky={suppressGroupRowsSticky} />
Scrolling Child Rows into View
When expanding a group the vertical scroll does not change, which can result in the child rows not being visible. You can use the ensureIndexVisible()
function on the API to ensure the index is visible, scrolling the table if needed.
In the example below, if you expand a group at the bottom, the grid will scroll so that all of the children of the group are visible.
API
The grid exposes API methods to expand or collapse groups programmatically.
Expand all groups. |
Collapse all groups. |
Expand or collapse a specific row node, optionally expanding/collapsing all of its parent nodes.
By default rows are expanded asynchronously for best performance. Set forceSync: true if you need to interact with the expanded row immediately after this function. |
Expand Row Ancestors
When expanding rows via the API, the setRowNodeExpanded
function can be used to expand a specific row as well as all of its ancestors.
The example above uses Row IDs to demonstrate the following configuration to expand all of the ancestors of the row with the ID "2"
:
const expandToRow = () => {
const node = gridApi.getRowNode('2');
if (node) {
gridApi.setRowNodeExpanded(node, true, true);
}
}
Next Up
Continue to the next section to learn about Hierarchy Selection.