I use react-virtualized Table to render data in real time.
render() {
...
return(
<div>
<AutoSizer disableHeight>
{({width}) => (
<Table
ref="Table"
headerClassName={styles.headerColumn}
height={height}
noRowsRenderer={this._noRowsRenderer}
rowHeight={ rowHeight}
rowGetter={rowGetter}
rowCount={rowCount}
scrollToIndex={scrollToIndex}
sort={this._sort}
sortBy={sortBy}
sortDirection={sortDirection}
width={width}>
<Column
label="Index"
cellDataGetter={({rowData}) => rowData.index}
dataKey="index"
disableSort={!this._isSortEnabled()}
width={60}
/>
<Column
dataKey="name"
disableSort={!this._isSortEnabled()}
headerRenderer={this._headerRenderer}
width={90}
/>
</Table>
)}
</AutoSizer>
</div>
);
}
I want to add glow effect to cells that have been updated. The glow effect can be implemented with css animation
@-webkit-keyframes glow-effect {
from {background-color: red;}
to {background-color: yellow;}
}
How can I know which cells have been updated recently so I can use the glow effect css class to render them?