Custom Group Columns can be provided to gain additional control over the group columns.
We advise against using your own group columns. Only do this if you require:
- The ability to position a column left of the group column, and
colDef.lockPositionorcolDef.pinnedare insufficient. - Fine grain control of Multiple Group Columns configuration per column, where callbacks are unsupported.
Enabling a Single Custom Group Column Copy Link
A Single Group Column can be configured by setting the groupDisplayType grid option to "custom". The column displaying groups then needs to also be included in the columnDefs with colDef.showRowGroup set to true, and the cellRenderer set to 'agGroupCellRenderer'.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowGroupingDisplayType,
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"
:groupDisplayType="groupDisplayType"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
// one column for showing the groups
{
headerName: "Group",
cellRenderer: "agGroupCellRenderer",
showRowGroup: true,
minWidth: 210,
},
// the first group column
{ field: "country", rowGroup: true, hide: true },
{ field: "year", rowGroup: true, hide: true },
{ field: "athlete" },
{ field: "total" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 200,
});
const groupDisplayType = ref<RowGroupingDisplayType>("custom");
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,
groupDisplayType,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
The example above demonstrates the following configuration:
<ag-grid-vue
:columnDefs="columnDefs"
:groupDisplayType="groupDisplayType"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{ field: 'country', rowGroup: true, hide: true },
{ field: 'year', rowGroup: true, hide: true },
{ headerName: 'Groups', showRowGroup: true, cellRenderer: 'agGroupCellRenderer' },
// ...other column definitions
];
this.groupDisplayType = 'custom'; Enabling Multiple Custom Group Columns Copy Link
Multiple Group Columns can be configured by setting the groupDisplayType grid option to "custom".
Each column displaying groups needs to be included in the columnDefs with colDef.showRowGroup set to the colId of the grouped column they are displaying. The colDef also requires cellRenderer to be set to 'agGroupCellRenderer'.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
RowGroupingDisplayType,
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"
:groupDisplayType="groupDisplayType"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{
headerName: "Country Groups",
minWidth: 200,
showRowGroup: "country",
cellRenderer: "agGroupCellRenderer",
},
{
headerName: "Year Groups",
minWidth: 200,
showRowGroup: "year",
cellRenderer: "agGroupCellRenderer",
},
{ field: "country", rowGroup: true, hide: true },
{ field: "year", rowGroup: true, hide: true },
{ field: "athlete", minWidth: 220 },
{ field: "total" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 150,
});
const groupDisplayType = ref<RowGroupingDisplayType>("custom");
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,
groupDisplayType,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
The example above demonstrates the following configuration for configuring multiple groups columns:
<ag-grid-vue
:columnDefs="columnDefs"
:groupDisplayType="groupDisplayType"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{ colId: 'country', field: 'country', rowGroup: true, hide: true },
{ colId: 'year', field: 'year', rowGroup: true, hide: true },
{ headerName: 'Country Groups', showRowGroup: 'country', cellRenderer: 'agGroupCellRenderer', },
{ headerName: 'Year Groups', showRowGroup: 'year', cellRenderer: 'agGroupCellRenderer', },
// ...other column definitions
];
this.groupDisplayType = 'custom';