Customizing Ag-grid header groups

Question

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

Answer 1

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