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?
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;
}