Im' trying to set style on a specific header in an ag-grid array generated dynamically. How Can I do this without manipulating the DOM ? This is a timeslot array and I want to highlight the current day.
I already tried to apply cellStyle, but it can't affect headers. Do you have some ideas ?
Some code generating the array :
this.tmpDefs = [{ headerName: '', field: 'user', width: 90, suppressSizeToFit: true }];
for(wantedDays){
this.tmpDefs.push([Some generated children])
}
this.gridApi.setColumnDefs(this.tmpDefs);
To show the icon, you need to give components property components: { agColumnHeader: CustomHeader } to the grid instance and create custom header function. Follow the link ag-grid-header-component.
The grid header displays the view's header. The table below lists the main properties affecting element behavior and appearance. Characteristics. Members. Value.
In addition to the above, the grid provides additional ways to help simplify and avoid duplication of column definitions. This is done through the following: defaultColDef : contains properties that all columns will inherit. defaultColGroupDef : contains properties that all column groups will inherit.
You can use the headerClass
property in your column definition.
Here is the full documentation about column properties: https://www.ag-grid.com/javascript-grid-column-properties/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With