AgGrid: How to blink cell in different color depending on change

Question

I'm using ag-grid-react like this:

import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

and declares it like this in render(some details removed for clarity):

return <div className="MarketGrid ag-theme-balham" >
    <AgGridReact domLayout='autoHeight'
        enableCellChangeFlash={true}
        rowSelection={'single'}
        onSelectionChanged={this.onSelectionChanged.bind(this)}
        onGridReady={this.onGridReady.bind(this)} />
    </div>;

the "enableCellChangeFlash" property works fine, and I know how to change the color of it, but what if I want to change the color depending on whether the new value is higher or lower than the previous?

My update code looks somewhat like this:

let row = this.gridApi.getRowNode(this.props.productIds.indexOf(id));
    for (var f in data) {
        row.setDataValue(f, data[f]);
    }
}

I guess I should set the cell style somewhere, but I'm not sure where.

UPDATE: According to this page https://www.ag-grid.com/javascript-grid-data-update/#flashing I should do this:

"If you want to override how the flash presents itself (eg change the background color, or remove the animation) then override the relevant CSS classes."

Anyone knows how to do this?

Peter Andersson Peter Andersson · Accepted Answer · 2019-11-05T19:38:24

I almost got this now. The answer I found out is based on CSS. Set the classname for blinking/stop-blinking like:

return (<div key={Math.random()}
  className={some logic to set classname here, like "blink-red" or "blink-blue"}
  onAnimationEnd={() => this.setState({ fade: false })}
  > {this.state.value} </div>);

and use onAnimationEnd to set some state variable that will affect that logic.

Then add the fading logic like this to CSS:

.blink-red {
  animation: redtotransparent 3s ease 5s;
}

@keyframes redtotransparent {
  from {
    background-color: red;
    color: white;
  }
  to {
    background-color: transparent;
    color: black;
  }
}

It's still not perfect, but almost there. Changing the key makes React think the DOM has changed. When I come up with anything better I will add it here.

AgGrid: How to blink cell in different color depending on change

2 Answers