antd Table is not automatically rerendered when datasource data changes

Question

Ant Design Table is not rerendered automatically when datasource data changes.

<Table
                columns={columns}
                dataSource={filteredData}
                pagination={pagination}
                loading={loading}
                onChange={this.handleChange} />

filteredData is changed in a method based on a custom filter which is placed outside the table.

Shouldn't the table rerender automatically when filteredData is changed?

Does anybody know how to refresh the table when filteredData is changed?

Answer 1

If you want a Table to re-render automatically, filteredData should be state.

onSourceChange = (something) => {
  this.setState({filteredData: something})
}
render(){
  return (
   <div>
    <Table
      columns={columns}
      dataSource={this.state.filteredData}
      pagination={pagination}
      loading={loading}
      onChange={this.handleChange} />
    <button onClick={()=>onSourceChange(['a','b','c'])}>change datasource</button>
   </div>
  )}

Answer 2

I can imagine that people are still looking for answers specially with the newest version of antd.

So in Antd version 5.x table API, you could find a property call rowKey.

In version 4.0 table API, the property called key thou.

And to way to tackle the problem correctly is to set it like following:

<Table
   columns={columns}
   dataSource={this.state.filteredData}
   rowKey={this.state.filteredData.key}
   pagination={pagination}
   loading={loading}
   onChange={this.handleChange} />

Note: Please consider to have a key property in your array of course. key must be unique.