Ag-Grid: Is it possible to style a row on a timer, rather than based on the data in the row?

Question

I need to change the background color of the row after some time. There is a column in the grid with time in seconds and I need to change the row color after 50% of that time has passed.

The data in the grid itself doesn't change, so using rowClassRules doesn't seem to work as nothing changes to trigger the data to be evaluated against the rules. Instead, I thought of using the setTimeout() function with a delay, but couldn't figure out what would be done inside the setTimeout block to apply the css class to the rowNode. I don't want to change any data in the row itself. Worst case scenario, I guess I could add a new hidden column and change the value in that column after the timer, but I'd rather avoid that. I'm using React.

I try to do something like this:

let red_warnings = [] 

let yellow_warnings = []

const rowClassRules = {
    '.red': (params) => { return red_warnings.includes(params.data.Id) }, 
    '.yellow': (params) => { return yellow_warnings.includes(params.data.Id) } 
}

<AgGridReact
    rowClassRules={rowClassRules}
/>

// when a new row is added
setTimeout(() => {
    yellow_warnings.push(Id)
}, 1000 * Timeout * 0.5)

setTimeout(() => {
    red_warnings.push(Id)
}, 1000 * Timeout * 0.8)

But since there is no actual changed data in the row, no re-evaluation of rowClassRules is triggered once I add the ID to the warning array.

Answer 1

This is absolutely possible.

The idea is to update the grid data to apply some predefined styles.

For example, we update the age field of each record to 100 after 3 seconds. According to our rowClassRules, any data with an age greater than 98 will be a candidate for our predefined styles.

function onFirstDataRendered(params) {
  setTimeout(function () {
    params.api.forEachNode((node) => {
      var newData = {
        ...node.data,
        person: {
          ...node.data.person,
          age: 100,
        },
      }
      node.data = newData
      params.api.redrawRows()
    })
  }, 3000)
}

Look at this idiot

https://plnkr.co/plunk/wVt8QvavUM1UrblC