Search

Vue Data GridRow Grouping - Expanding Groups

Enterprise

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:

<ag-grid-vue
    :groupDefaultExpanded="groupDefaultExpanded"
    /* other grid options ... */>
</ag-grid-vue>

this.groupDefaultExpanded = 1;

Expanding via Callback

To granularly determine which groups should be expanded by default, use the isGroupOpenByDefault grid callback.

isGroupOpenByDefault
Function
(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:

<ag-grid-vue
    :isGroupOpenByDefault="isGroupOpenByDefault"
    /* other grid options ... */>
</ag-grid-vue>

this.isGroupOpenByDefault = (params) => {
    const route = params.rowNode.getRoute();
    const destPath = ['Australia', '2004'];
    return route.every((item, idx) => destPath[idx] === item);
};

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:

<ag-grid-vue
    :suppressGroupRowsSticky="suppressGroupRowsSticky"
    /* other grid options ... */>
</ag-grid-vue>

this.suppressGroupRowsSticky = true;

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.

expandAll
Function
Expand all groups.
collapseAll
Function
Collapse all groups.
setRowNodeExpanded
Function
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.