I would like to specify the Header style of just one column on my grid. I know how to configure the Header style for all columns of a specific grid. For that it's necessary to add on "styles:scss" file the following:
Example:
#IdOfGrid .ag-header-cell-label {
justify-content: left;}
How can I apply this style for just one column header?
Thank you!
As per https://www.ag-grid.com/javascript-grid-column-properties/
You can add headerClass property to your column properties and add css for that class it applies only for that column header
Have a CSS class in headerClass
property inside columnDefs like this:
columnDefs = [
{
headerName: "Table Name",
headerClass: "table-header",
field: "tableName"
},
.
.
.
]
In css, use ::ng-deep
along with another component/class names if your ag-grid-angular component is wrapped inside different elements. In my case, I got the style like this:
::ng-deep .main-wrapper app-custom-grid ag-grid-angular .table-header {
background-color: blue;
}
To set column basic style, just give:
headerName: 'Title Here',
field:'title',
styleCss: { background: '#eee'; 'font-size': '15px' }
If you want to give style on some condition, then you need a external func, and call it inside column definition, as follows:
constructor(){
this.gridOptions = {
getRowStyle: (params: any) => {
if (params.data){
if(params.data.flag) {
return { background: '#eee', 'font-weight': 750 };
}
}
}
}// end of gridoptions
}// end of constructor
For more detail, look deeply on my another answer: https://stackoverflow.com/a/61236065/7118138
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.