Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set style on a specific header in ag-grid

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);
like image 218
Antoine Bon Avatar asked May 27 '19 12:05

Antoine Bon


People also ask

How do I show the icon on Ag grid header?

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.

What is a grid header?

The grid header displays the view's header. The table below lists the main properties affecting element behavior and appearance. Characteristics. Members. Value.

What is defaultColDef in Ag grid?

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.


1 Answers

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/

like image 105
Grégory Elhaimer Avatar answered Oct 04 '22 13:10

Grégory Elhaimer