3

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?

Yixing Liu
  • 2,179
  • 1
  • 20
  • 36

0 Answers0