antd Table is not automatically rerendered when datasource data changes - datatable

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.