I have an ag grid with the following columns. My requirement is based on the loggedin user role I want to highlight the background color of the columns 'abc'. If the user role is admin then need to change the background-color to green of the column 'abc'. If the role is normal user then I have to change the color to red.
colDefs=[
abc: {
headerName: 'ABC',
field: 'abc',
colId: 'abc',
pinned: 'left',
},
def:{
headerName: 'DEF',
field: 'def',
colId: 'def',
pinned: 'left',
},
ghi:{
headerName: 'GHI',
field: 'ghi',
colId: 'ghi',
},
pqr:{
headerName: 'PQR',
field: 'pqr',
colId: 'pqr',
editable: false,
}
]
<ag-grid-angular
#grid
[gridOptions]="gridOptions"
class="ag-theme-balham"
[columnDefs]="columnDefs"
></ag-grid-angular>
Could you please tell me how can I implement that? I tried following the already asked questions but didnt get the results Dynamic change of cell color with Ag Grid
Also is there any way to add condition to headerName like following?
headerName: isAdmin ? 'GHI' : 'XYZ',
you can use cellClass and cellStyle as described in documentation:
https://www.ag-grid.com/javascript-data-grid/cell-styles/
{
headerName: 'header name',
field: 'abc',
cellClass: params => {
return params.value === 'something' ? 'my-class-1' : 'my-class-2';
},
},