CODEWITHSUNDEEP
angulartypescriptag-gridag-grid-angular
Liero
Liero

Reputation: 27348

How to show values in the group column in ag-grid, when group is expanded?

I have following data:

[{ 'Year': 2016, Month: 'January, 'Other columns...' },
 { 'Year': 2016, Month: 'February, 'Other columns...' }]

And I want it to be grouped by year. However, I don't want separate column for Month, when group is expanded, but rather reuse the group column like this:

enter image description here

I guess autoGroupColumnDef is what I need and I achieved almost what I want:

gridOptions: GridOptions = {
  suppressAggFuncInHeader: true,
  autoGroupColumnDef: {field: 'Month', headerName: '', cellRendererParams: { suppressCount: true}},
  groupIncludeTotalFooter: true,
};


columnDefs: ColDef[] = [
  {field: 'Year', hide: true, rowGroup: true },
  {field: 'Other Column1', aggFunc: 'sum'},
  {field: 'Other Column2', aggFunc: 'sum'},
];

see stackblitz example

However, the Month values are still aligned right to the year, not under it.

enter image description here

Upvotes: 0

Views: 3130

Answers (1)

Paritosh
Paritosh

Reputation: 11570

This can be achieved easily by CSS.

.ag-theme-balham .ag-ltr .ag-row-group-leaf-indent {
  margin-left: 0 !important;
}

Have a look at the link: StackBlitz

Upvotes: 1

Related Questions