React - custom styling ag grid header

1
votes

It is about react ag grid column header NOT cell in each row.

I have 4 columns, I want to make first 2's header bg color in black and last 2's header bg color in green.

return[
  {
    headerName: 'name',
    field: 'name',   
  },
  {
    headerName: 'age',
    field: 'age',     
  },
  {
    headerName: 'city',
    field: 'city',   
  },
  {
    headerName: 'state',
    field: 'state',
  },
]

tried to control css by using.ag-header-group-cell-label, but this will make all columns in same bg color. someone says use headerComponentFramework, if it works can provide an example?

1
reactjsag-gridag-grid-react

1 Answers

2
votes

You can use the headerClass property in your column definitions:

[
  {
    headerName: 'First',
    field: 'first',
    headerClass: 'header-black'
  },
  {
    headerName: 'Second',
    field: 'second',
    headerClass: 'header-green'
  }
]

Then in your css:

.header-black {
  background-color: black;
}

.header-green {
  background-color: green;
}

https://embed.plnkr.co/T81TLEjln2Jzwdfy/