javascriptmaterial-uiag-gridhighlightag-grid-react

Ag-Grid: Color match when filtering


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.


Solution

  • 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/