I'm using AG-Grid to display a value. I was wondering: Is there a way to color the matched cell when quick filtering?
E.g. I have
[
{ firstName: 'Tom', lastName: 'Doe', company: 'Tesla' },
{ firstName: 'Tim', lastName: 'Boulder', company: 'Tommy Hilfiger },
{ firstName: 'Ben', lastName: 'Miller', company: 'D3' }
]
and I search for om
that Ben isn't displayed any more and the table colors Tom
for Tom and Tommy Hilfiger
for Tim.
One possible way: get the quickfilter text with
gridOptions.quickFilterText
and then use it in a cellclass function:
var colDef = {
name: 'First name',
field: 'firstName',
cellClass: function(params) {
return params.value.indexOf(this.gridOptions.quickFilterText) > -1
? 'value-found-class'
: 'no-value-found-class'
);}
}
If the cellClass function does not get retriggered, listen to the filterChanged event:
gridOptions.onFilterChanged = function() {
gridOptions.api.refreshCells();
}
Check out the params for refreshCells: https://www.ag-grid.com/javascript-grid-refresh/