Customizing Ag-grid header groups

0
votes

I need to customize header groups in Ag-grid (in Angular): 1) make text in them centered (it is left aligned by default); 2) make background of each header group particular color

How can that be done?

I tried to do that in SCSS for that class, but nothing changed on the view, even when I renamed file it from SCSS to CSS.

Using Angular6, Ag-grid v.20, SCSS.

Please help!

TIA, Oleg

3
angularag-gridag-grid-angular

3 Answers

3
votes

In order to center the header group text in ag-Grid, all you need to do is to use the justify-content CSS property on the .ag-header-group-cell-label class.

You might have to set this on your main styles.scss (the one which is on the same directory level as your index.html, package.json, etc)

.ag-header-group-cell-label {
  justify-content: center;
}

Likewise, this is how you can customise the colour of your header groups. 

.ag-header-group-cell-with-group {
    background-color: blue;
}

Here is a demo for your reference. I have made the changes on the styles.css file.

As for customising your own header groups, you should do it by writing your own custom header group components.

For instance, this is how you should define your columnDefs on your component that contains the ag-grid, whereby the header group is called "Personal", and the custom component is called customHeaderGroupComponent

this.columnDefs = [
  {
    headerName: "Personal",
    headerGroupComponent: "customHeaderGroupComponent",
    children: [
      {
        headerName: "Athlete",
        field: "athlete"
      },
      {
        headerName: "Age",
        field: "age"
      }]
  },
]

You can refer to the rest of the demo over here

1
votes

To center your text, you need to manually customize the component in your CSS file like so: 

    ::ng-deep .ag-header-cell-label {
      display: flex;
      justify-content:center;

      ::ng-deep .ag-header-cell-text {
        display:flex;
        align-items:center;
      }
    }

For your background color, you can do similar to the above, just choose your class you want to modify using the ::ng-deep.

Hope this helps!

0
votes

I needed to do this exact same thing, and I found that the other answers didn't fully answer the question for me. The documentation mostly talks about using a component for rendering, but that didn't work for me and I found it to be overkill for applying some simple styling. You have to define CSS styles for ag-header-group-cell-with-group - that is the main key. Otherwise styles will not show on your UI even though you specify a headerClass in your column definitions. Here is how to do it in CSS:

::ng-deep .ag-header-group-cell-with-group {
    .ag-header-group-cell-label {
        justify-content: center;
    }
}

::ng-deep .ag-header-group-cell-with-group.blueFill {
    background-color: blue;
}

::ng-deep .ag-header-group-cell-with-group.redFill {
    background-color: red;
}

In your column definitions apply the styling like this:

{
    headerName: 'Parent Group A',
    headerClass: 'blueFill',
    children: [...]
},
{
    headerName: 'Parent Group B',
    headerClass: 'redFill',
    children: [...]
}