Problem refreshing while filtering datas

Hello, I have a problem using the Grid component. I doing an iTunes like software and I’m trying to implement a search function.

The datas are well filtered, the props are updated in all components but the rendering is very strange. If the result of the filtering return 3 rows (like in the below image), the grid render the first 3 rows of the initial data set and not taking into account the new data set.

My code :

class TableContainer extends React.Component {

    render() {
        let filteredrowRenderers = [];
        if (this.state.rowRenderers) {
            filteredrowRenderers = this._getFilteredData();
        }

        return (
            <section id="list">
                <section id="searchData">
                    <FontIcon className="material-icons">search</FontIcon>
                    <TextField className="textField" name={"search"} placeholder={"Recherche"}
                               onKeyPress={ e => this._searchData(e.target.value) }
                    />
                </section>
                <MyVirtualizeTable headers={ this.headers }
                                 data={ filteredrowRenderers }/>
            </section>
        );
    }

    _getFilteredData() {
        const {rowRenderers, searchText} = this.state;

        if (searchText) {
            return rowRenderers.filter(rowRenderer => rowRenderer.data.searchText.indexOf(searchText.toLowerCase()) >= 0);
        }
        return rowRenderers;
    }

    _searchData(text) {
        this.setState({
            ...this.state,
            searchText: text
        });
    }
    
}

export default class MyVirtualizeTable extends React.PureComponent {

  ...

  render() {
    const rowCount = this.props.data.length;

    return (
      <div>
        <ScrollSync>
          {({
              clientHeight,
              clientWidth,
              onScroll,
              scrollHeight,
              scrollLeft,
              scrollTop,
              scrollWidth,
            }) => {
            return (
              <div ...>
                <AutoSizer>
                  {(childrenParam) => (
                    <div>
                      <div
                        <Grid
                          className={styles.HeaderGrid}
                          columnWidth={(index) => this._getColumnWidth(index, childrenParam.width - scrollbarSize())}
                          columnCount={columnCount}
                          height={rowHeight}
                          overscanColumnCount={overscanColumnCount}
                          cellRenderer={(headerParam) => this._renderHeaderCell(headerParam, childrenParam.width - scrollbarSize())}
                          rowHeight={rowHeight}
                          rowCount={1}
                          scrollLeft={scrollLeft}
                          width={childrenParam.width - scrollbarSize()}
                        />
                      </div>
                      <div>
                        <Grid
                          cellRenderer={(headerParam) => this._renderBodyCell(headerParam, childrenParam.width - scrollbarSize())}
                          
                          className={styles.BodyGrid}
                          columnWidth={(index) => this._getColumnWidth(index, childrenParam.width - scrollbarSize())}
                          columnCount={columnCount}
                          height={childrenParam.height}
                          onScroll={onScroll}
                          overscanColumnCount={overscanColumnCount}
                          overscanRowCount={overscanRowCount}
                          rowHeight={rowHeight}
                          rowCount={rowCount}
                          width={childrenParam.width}
                        />
                      </div>
                    </div>
                  )}
                </AutoSizer>
              </div>
            );
          }}
        </ScrollSync>
      </div>
    );
  }

  _renderBodyCell({columnIndex, key, rowIndex, style}, totalWidth) {
    const rowRenderer = this.props.data[rowIndex];
    
    return (
      <div key={"body_" + key}>
        { rowRenderer.renderCell(columnIndex) }
      </div>
    );
  }

  _renderHeaderCell({columnIndex, key, rowIndex, style}, totalWidth) {
    const headerData = this.props.headers[columnIndex];

    return (
      <div key={"header_" + key}>
        { headerData.name }
      </div>
    );
  }
  
  ...

}

export class RowRenderer {

	...
    
  renderCell = (column) => {
    
    switch (column) {
      case 0 :
        return (
          <div>
            { this.data.propA }
          </div>
        );
      case 1 :
        return (
          <div>
            { this.data.propB }
          </div>
        );
      case 2 :
        return (
          <div>
            { this.data.propC }
          </div>
        );
      ...
  };
  
}

Do you have any clue on why the grid is rendering its initial datas filtered on the n first rows an not the filtered datas its receives with props ?

Thank you.

[krayush]

@wuweiweiwu: Didn’t work. I have a similar issue working with List component and the input data is filtered by a outer component.

Used both forceUpdate and forceUpdateGrids, none of them worked

[priley86]

Hi, I’m seeing a similar issue when data changes after I have set isScrollingOptOut = true. My current workaround is to refresh the grid onComponentUpdate:

https://github.com/openshift/console/blob/5107eacc97430f453dc9cf573d0f779dd5eea746/frontend/public/components/factory/table.tsx#L365

We’ve written a wrapper around VirtualGrid due to changes proposed in #1377, however this is essentially the same:

 this._cellMeasurementCache.clearAll();
 this._gridRef.recomputeGridSize();