{"action":"created","issue":{"url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/1104","repository_url":"https://api.github.com/repos/bvaughn/react-virtualized","labels_url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/1104/labels{/name}","comments_url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/1104/comments","events_url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/1104/events","html_url":"https://github.com/bvaughn/react-virtualized/issues/1104","id":321455265,"node_id":"MDU6SXNzdWUzMjE0NTUyNjU=","number":1104,"title":"Problem refreshing while filtering datas","user":{"login":"Casou","id":11075579,"node_id":"MDQ6VXNlcjExMDc1NTc5","avatar_url":"https://avatars0.githubusercontent.com/u/11075579?v=4","gravatar_id":"","url":"https://api.github.com/users/Casou","html_url":"https://github.com/Casou","followers_url":"https://api.github.com/users/Casou/followers","following_url":"https://api.github.com/users/Casou/following{/other_user}","gists_url":"https://api.github.com/users/Casou/gists{/gist_id}","starred_url":"https://api.github.com/users/Casou/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Casou/subscriptions","organizations_url":"https://api.github.com/users/Casou/orgs","repos_url":"https://api.github.com/users/Casou/repos","events_url":"https://api.github.com/users/Casou/events{/privacy}","received_events_url":"https://api.github.com/users/Casou/received_events","type":"User","site_admin":false},"labels":[{"id":281363939,"node_id":"MDU6TGFiZWwyODEzNjM5Mzk=","url":"https://api.github.com/repos/bvaughn/react-virtualized/labels/question","name":"question","color":"cc317c","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-05-09T07:09:34Z","updated_at":"2018-06-01T10:01:20Z","closed_at":null,"author_association":"NONE","body":"Hello,\r\nI have a problem using the Grid component. I doing an iTunes like software and I'm trying to implement a search function.\r\n![image](https://user-images.githubusercontent.com/11075579/39799256-ec9ff7e4-5363-11e8-8801-4966fc2f6fbe.png)\r\n\r\nThe 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.\r\n![image](https://user-images.githubusercontent.com/11075579/39799969-77fd3a48-5366-11e8-81d6-c7f0df4f9150.png)\r\n\r\nMy code :\r\n```\r\nclass TableContainer extends React.Component {\r\n\r\n    render() {\r\n        let filteredrowRenderers = [];\r\n        if (this.state.rowRenderers) {\r\n            filteredrowRenderers = this._getFilteredData();\r\n        }\r\n\r\n        return (\r\n            <section id=\"list\">\r\n                <section id=\"searchData\">\r\n                    <FontIcon className=\"material-icons\">search</FontIcon>\r\n                    <TextField className=\"textField\" name={\"search\"} placeholder={\"Recherche\"}\r\n                               onKeyPress={ e => this._searchData(e.target.value) }\r\n                    />\r\n                </section>\r\n                <MyVirtualizeTable headers={ this.headers }\r\n                                 data={ filteredrowRenderers }/>\r\n            </section>\r\n        );\r\n    }\r\n\r\n    _getFilteredData() {\r\n        const {rowRenderers, searchText} = this.state;\r\n\r\n        if (searchText) {\r\n            return rowRenderers.filter(rowRenderer => rowRenderer.data.searchText.indexOf(searchText.toLowerCase()) >= 0);\r\n        }\r\n        return rowRenderers;\r\n    }\r\n\r\n    _searchData(text) {\r\n        this.setState({\r\n            ...this.state,\r\n            searchText: text\r\n        });\r\n    }\r\n    \r\n}\r\n```\r\n\r\n```\r\n\r\nexport default class MyVirtualizeTable extends React.PureComponent {\r\n\r\n  ...\r\n\r\n  render() {\r\n    const rowCount = this.props.data.length;\r\n\r\n    return (\r\n      <div>\r\n        <ScrollSync>\r\n          {({\r\n              clientHeight,\r\n              clientWidth,\r\n              onScroll,\r\n              scrollHeight,\r\n              scrollLeft,\r\n              scrollTop,\r\n              scrollWidth,\r\n            }) => {\r\n            return (\r\n              <div ...>\r\n                <AutoSizer>\r\n                  {(childrenParam) => (\r\n                    <div>\r\n                      <div\r\n                        <Grid\r\n                          className={styles.HeaderGrid}\r\n                          columnWidth={(index) => this._getColumnWidth(index, childrenParam.width - scrollbarSize())}\r\n                          columnCount={columnCount}\r\n                          height={rowHeight}\r\n                          overscanColumnCount={overscanColumnCount}\r\n                          cellRenderer={(headerParam) => this._renderHeaderCell(headerParam, childrenParam.width - scrollbarSize())}\r\n                          rowHeight={rowHeight}\r\n                          rowCount={1}\r\n                          scrollLeft={scrollLeft}\r\n                          width={childrenParam.width - scrollbarSize()}\r\n                        />\r\n                      </div>\r\n                      <div>\r\n                        <Grid\r\n                          cellRenderer={(headerParam) => this._renderBodyCell(headerParam, childrenParam.width - scrollbarSize())}\r\n                          \r\n                          className={styles.BodyGrid}\r\n                          columnWidth={(index) => this._getColumnWidth(index, childrenParam.width - scrollbarSize())}\r\n                          columnCount={columnCount}\r\n                          height={childrenParam.height}\r\n                          onScroll={onScroll}\r\n                          overscanColumnCount={overscanColumnCount}\r\n                          overscanRowCount={overscanRowCount}\r\n                          rowHeight={rowHeight}\r\n                          rowCount={rowCount}\r\n                          width={childrenParam.width}\r\n                        />\r\n                      </div>\r\n                    </div>\r\n                  )}\r\n                </AutoSizer>\r\n              </div>\r\n            );\r\n          }}\r\n        </ScrollSync>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  _renderBodyCell({columnIndex, key, rowIndex, style}, totalWidth) {\r\n    const rowRenderer = this.props.data[rowIndex];\r\n    \r\n    return (\r\n      <div key={\"body_\" + key}>\r\n        { rowRenderer.renderCell(columnIndex) }\r\n      </div>\r\n    );\r\n  }\r\n\r\n  _renderHeaderCell({columnIndex, key, rowIndex, style}, totalWidth) {\r\n    const headerData = this.props.headers[columnIndex];\r\n\r\n    return (\r\n      <div key={\"header_\" + key}>\r\n        { headerData.name }\r\n      </div>\r\n    );\r\n  }\r\n  \r\n  ...\r\n\r\n}\r\n```\r\n\r\n```\r\nexport class RowRenderer {\r\n\r\n\t...\r\n    \r\n  renderCell = (column) => {\r\n    \r\n    switch (column) {\r\n      case 0 :\r\n        return (\r\n          <div>\r\n            { this.data.propA }\r\n          </div>\r\n        );\r\n      case 1 :\r\n        return (\r\n          <div>\r\n            { this.data.propB }\r\n          </div>\r\n        );\r\n      case 2 :\r\n        return (\r\n          <div>\r\n            { this.data.propC }\r\n          </div>\r\n        );\r\n      ...\r\n  };\r\n  \r\n}\r\n```\r\n\r\nDo 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 ?\r\n\r\nThank you.\r\n"},"comment":{"url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/comments/393834735","html_url":"https://github.com/bvaughn/react-virtualized/issues/1104#issuecomment-393834735","issue_url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/1104","id":393834735,"node_id":"MDEyOklzc3VlQ29tbWVudDM5MzgzNDczNQ==","user":{"login":"wuweiweiwu","id":35270620,"node_id":"MDQ6VXNlcjM1MjcwNjIw","avatar_url":"https://avatars3.githubusercontent.com/u/35270620?v=4","gravatar_id":"","url":"https://api.github.com/users/wuweiweiwu","html_url":"https://github.com/wuweiweiwu","followers_url":"https://api.github.com/users/wuweiweiwu/followers","following_url":"https://api.github.com/users/wuweiweiwu/following{/other_user}","gists_url":"https://api.github.com/users/wuweiweiwu/gists{/gist_id}","starred_url":"https://api.github.com/users/wuweiweiwu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wuweiweiwu/subscriptions","organizations_url":"https://api.github.com/users/wuweiweiwu/orgs","repos_url":"https://api.github.com/users/wuweiweiwu/repos","events_url":"https://api.github.com/users/wuweiweiwu/events{/privacy}","received_events_url":"https://api.github.com/users/wuweiweiwu/received_events","type":"User","site_admin":false},"created_at":"2018-06-01T10:01:20Z","updated_at":"2018-06-01T10:01:20Z","author_association":"COLLABORATOR","body":"I would try to update to 9.19.x version of react virtualized. any prop changes should trigger a re-render. \r\n\r\nhowever, `forceUpdate` and `forceUpdateGrids` are also viable alternatives.\r\n\r\nhope that helps!"}}
{"actor":{"display_login":"wuweiweiwu"}}