Configure the initial expanded group row state when using Tree Data.
Expanding by Group Level Copy Link
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.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
AutoGroupColumnDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:groupDefaultExpanded="groupDefaultExpanded"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "country", rowGroup: true, hide: true },
{ field: "year", rowGroup: true, hide: true },
{ field: "athlete" },
{ field: "sport" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const autoGroupColumnDef = ref<AutoGroupColumnDef>({
minWidth: 200,
});
const groupDefaultExpanded = ref(1);
const rowData = ref<IOlympicData[]>(null);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
autoGroupColumnDef,
groupDefaultExpanded,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
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 Copy Link
To granularly determine which groups should be expanded by default, use the isGroupOpenByDefault grid callback.
(Client-side Row Model only) Allows group rows to be open by default. For master rows use isMasterOpenByDefault. |
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
AutoGroupColumnDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
IsGroupOpenByDefault,
IsGroupOpenByDefaultParams,
ModuleRegistry,
NumberFilterModule,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
TextFilterModule,
NumberFilterModule,
ClientSideRowModelModule,
RowGroupingModule,
]);
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:isGroupOpenByDefault="isGroupOpenByDefault"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "country", rowGroup: true },
{ field: "year", rowGroup: true },
{ field: "sport" },
{ field: "athlete" },
{ field: "total" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
filter: true,
});
const autoGroupColumnDef = ref<AutoGroupColumnDef>({
minWidth: 200,
});
const isGroupOpenByDefault = ref<IsGroupOpenByDefault>(
(params: IsGroupOpenByDefaultParams) => {
const route = params.rowNode.getRoute();
const destPath = ["Australia", "2004"];
return !!route?.every((item, idx) => destPath[idx] === item);
},
);
const rowData = ref<IOlympicData[]>(null);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
autoGroupColumnDef,
isGroupOpenByDefault,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
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 Copy Link
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.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
AutoGroupColumnDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:suppressGroupRowsSticky="true"
:groupDefaultExpanded="groupDefaultExpanded"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "country", rowGroup: true },
{ field: "year", rowGroup: true },
{ field: "sport" },
{ field: "athlete" },
{ field: "total" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const autoGroupColumnDef = ref<AutoGroupColumnDef>({
minWidth: 200,
});
const groupDefaultExpanded = ref(1);
const rowData = ref<IOlympicData[]>(null);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
autoGroupColumnDef,
groupDefaultExpanded,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
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 Copy Link
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.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
NumberEditorModule,
RowGroupOpenedEvent,
RowGroupingDisplayType,
ScrollApiModule,
TextEditorModule,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ScrollApiModule,
NumberEditorModule,
TextEditorModule,
TextFilterModule,
ClientSideRowModelModule,
RowGroupingModule,
]);
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:animateRows="false"
:groupDisplayType="groupDisplayType"
:defaultColDef="defaultColDef"
:rowData="rowData"
@row-group-opened="onRowGroupOpened"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "athlete", width: 150, rowGroupIndex: 0 },
{ field: "age", width: 90, rowGroupIndex: 1 },
{ field: "country", width: 120, rowGroupIndex: 2 },
{ field: "year", width: 90 },
{ field: "date", width: 110, rowGroupIndex: 2 },
]);
const groupDisplayType = ref<RowGroupingDisplayType>("groupRows");
const defaultColDef = ref<ColDef>({
editable: true,
filter: true,
flex: 1,
minWidth: 100,
});
const rowData = ref<IOlympicData[]>(null);
function onRowGroupOpened(event: RowGroupOpenedEvent<IOlympicData>) {
if (event.expanded) {
const rowNodeIndex = event.node.rowIndex!;
// factor in child nodes so we can scroll to correct position
const childCount = event.node.childrenAfterSort
? event.node.childrenAfterSort.length
: 0;
const newIndex = rowNodeIndex + childCount;
gridApi.value!.ensureIndexVisible(newIndex);
}
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
groupDisplayType,
defaultColDef,
rowData,
onGridReady,
onRowGroupOpened,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
API Copy Link
The row group expansion state can be saved and restored as part of Grid State.
The grid exposes API methods to expand or collapse groups programmatically.
Expand all groups. |
Collapse all groups. |
Reset all group expansion to defaults, as determined by groupDefaultExpanded,
isGroupOpenByDefault, or isServerSideGroupOpenByDefault.
Any user-initiated expand/collapse overrides are discarded. |
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 Copy Link
When expanding rows via the API, the setRowNodeExpanded function can be used to expand a specific row as well as all of its ancestors.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GetRowIdFunc,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowApiModule,
enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
RowApiModule,
ClientSideRowModelModule,
RowGroupingModule,
]);
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:getRowId="getRowId"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "country", rowGroup: true, hide: true },
{ field: "year", rowGroup: true, hide: true },
{ field: "athlete" },
{ field: "total" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 150,
});
const getRowId = ref<GetRowIdFunc>((params) => params.data.id);
const rowData = ref<any[]>(null);
function onFirstDataRendered() {
const node = gridApi.value.getRowNode("2");
if (node) {
gridApi.value.setRowNodeExpanded(node, true, true);
}
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) =>
(rowData.value = data.map((d, i) => ({ ...d, id: String(i) })));
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
getRowId,
rowData,
onGridReady,
onFirstDataRendered,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
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);
}
} Reset Group Expansion Copy Link
After users have expanded or collapsed groups, resetRowGroupExpansion() discards all overrides and re-evaluates each group against the configured defaults (groupDefaultExpanded or isGroupOpenByDefault).
In the example below, the isGroupOpenByDefault callback expands the Australia > 2004 path by default. Try expanding or collapsing groups, then click Reset to Defaults to restore the original expansion state.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
AutoGroupColumnDef,
ClientSideRowModelApiModule,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
IsGroupOpenByDefault,
IsGroupOpenByDefaultParams,
ModuleRegistry,
RowApiModule,
enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
RowApiModule,
ClientSideRowModelModule,
ClientSideRowModelApiModule,
RowGroupingModule,
]);
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="example-wrapper">
<div style="margin-bottom: 5px">
<button v-on:click="onBtExpandAll()">Expand All</button>
<button v-on:click="onBtCollapseAll()">Collapse All</button>
<button v-on:click="onBtResetExpansion()">Reset to Defaults</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:isGroupOpenByDefault="isGroupOpenByDefault"
:rowData="rowData"></ag-grid-vue>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "country", rowGroup: true },
{ field: "year", rowGroup: true },
{ field: "sport" },
{ field: "athlete" },
{ field: "total" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const autoGroupColumnDef = ref<AutoGroupColumnDef>({
minWidth: 200,
});
const isGroupOpenByDefault = ref<IsGroupOpenByDefault>(
(params: IsGroupOpenByDefaultParams) => {
const route = params.rowNode.getRoute();
const destPath = ["Australia", "2004"];
return !!route?.every((item, idx) => destPath[idx] === item);
},
);
const rowData = ref<IOlympicData[]>(null);
function onBtExpandAll() {
gridApi.value!.expandAll();
}
function onBtCollapseAll() {
gridApi.value!.collapseAll();
}
function onBtResetExpansion() {
gridApi.value!.resetRowGroupExpansion();
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
autoGroupColumnDef,
isGroupOpenByDefault,
rowData,
onGridReady,
onBtExpandAll,
onBtCollapseAll,
onBtResetExpansion,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}