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 {
ClientSideRowModelModule,
GridApi,
GridOptions,
ModuleRegistry,
createGrid,
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]);
let gridApi: GridApi<IOlympicData>;
const gridOptions: GridOptions<IOlympicData> = {
columnDefs: [
// 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" },
],
defaultColDef: {
flex: 1,
minWidth: 200,
},
groupDisplayType: "custom",
};
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((response) => response.json())
.then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
<div id="myGrid" style="height: 100%"></div>
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
}The example above demonstrates the following configuration:
const gridOptions = {
columnDefs: [
{ field: 'country', rowGroup: true, hide: true },
{ field: 'year', rowGroup: true, hide: true },
{ headerName: 'Groups', showRowGroup: true, cellRenderer: 'agGroupCellRenderer' },
// ...other column definitions
],
groupDisplayType: 'custom',
// other grid options ...
} 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 {
ClientSideRowModelModule,
ColDef,
GridApi,
GridOptions,
ModuleRegistry,
createGrid,
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 columnDefs: 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" },
];
let gridApi: GridApi<IOlympicData>;
const gridOptions: GridOptions<IOlympicData> = {
columnDefs: columnDefs,
defaultColDef: {
flex: 1,
minWidth: 150,
},
groupDisplayType: "custom",
};
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((response) => response.json())
.then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
<div id="myGrid" style="height: 100%"></div>
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
}The example above demonstrates the following configuration for configuring multiple groups columns:
const gridOptions = {
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
],
groupDisplayType: 'custom',
// other grid options ...
}