Grouping hierarchy can be displayed in the grid in different ways.
Display Types Copy Link
The row hierarchy can be shown in three different ways, configured by the groupDisplayType grid option:
- A Single Group Column containing all row group levels.
- Multiple Group Columns with each column representing a row group level.
- Group Rows where parent rows are displayed as full width rows.
import {
ClientSideRowModelModule,
GridApi,
GridOptions,
ModuleRegistry,
RowGroupingDisplayType,
createGrid,
enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);
let gridApi: GridApi<IOlympicData>;
const gridOptions: GridOptions<IOlympicData> = {
columnDefs: [
{ field: "country", rowGroup: true, hide: true },
{ field: "year", rowGroup: true, hide: true },
{ field: "athlete" },
{ field: "sport" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
],
defaultColDef: {
flex: 1,
minWidth: 100,
},
autoGroupColumnDef: {
minWidth: 200,
},
groupDefaultExpanded: 1,
};
function onDisplayTypeChange() {
const displayType = (
document.querySelector("#input-display-type") as HTMLSelectElement
).value as RowGroupingDisplayType;
gridApi!.setGridOption("groupDisplayType", displayType);
}
var 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));
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).onDisplayTypeChange = onDisplayTypeChange;
}
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
.example-header {
margin-bottom: 5px;
}
<div class="example-wrapper">
<div class="example-header">
<label>
<span>groupDisplayType:</span>
<select id="input-display-type" onchange="onDisplayTypeChange()">
<option value="singleColumn">"singleColumn"</option>
<option value="multipleColumns">"multipleColumns"</option>
<option value="groupRows">"groupRows"</option>
</select>
</label>
</div>
<div id="myGrid" style="height: 100%"></div>
</div>
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
}To configure the display type, set the groupDisplayType property in the grid options to one of "singleColumn", "multipleColumns" or "groupRows" as demonstrated in the following configuration:
const gridOptions = {
groupDisplayType: 'multipleColumns',
// other grid options ...
}While not advised, it is also possible to configure these columns using Custom Group Columns.