Ant Design Table component onChange callback not fired

Question

The Table component from Ant Design has the prop onChange which is fired whenever some pagination, filter or sort is happening. In my case it is about filtering. When using the default filter elements from the table head, the callback is fired. But I am using custom filter elements outside of the Table component which set a local state and this state is used for the filteredValue prop on the column. The filtering itself works flawless. But the onChange callback is not fired. I am interested in the attributes from onChange since they contain the currentDataSource props which represents the actual rendered data source object. I can't find any other callbacks for Table which are triggered whenever the component renders.

Has anybody an idea about another way to get the rendered dataSource object when filters are enabled? Sure, I could start calculating on the original dataSouruce object because I am aware of the filters, but since Table provides the information in genereal I would like to prevent the redundancy.

Update:

See basic example here: https://codesandbox.io/s/react-antd-styled-template-73yxh Whenever you use the filter elements in the table head, you see a console.log event (via Table's onChange prop). When you click the button on the bottom, you will see that the filter changes, but the console.log event does not happen.

Please provide a producible example, refer to How to create a Minimal, Reproducible Example. I want to help you but saying "But the onChange callback is not fired" is not enough, need to see the specific example — Dennis Vash
You can add an example with stack snippet as mentioned in the link or use this template on codesandbox. — Dennis Vash
I don't think it's possible if it does, you should try doing it with Table's ref. — Dennis Vash
"Table's ref"? You mean like ref to the DOM element? That would not help when the table is paginated. — RumTraubeNuss

RumTraubeNuss RumTraubeNuss · Accepted Answer · 2019-10-25T07:43:06

The described behaviour is intended. Table behaves like a controlled input field which also does not call onChange when external state changes.

In my case I am interested in the currentDataSource object, to see how many items the table contains. Which is different then dataSource when filters are active.

You can get this value from somewhere else. The Table's Pagination has a showTotal callback with a signature of Function(total, range). Set this callback and you get the actual total items count whenever the pagination renders.

<Table
  dataSource={someData}
  columns={someColumns}
  pagination={{
    showTotal: (total, range) => {
      console.log({ total, range });
    }
  }}
/>

Update:

Feedback from Ant Design Team with information about the component behaviour on external state change: https://github.com/ant-design/ant-design/issues/19415#issuecomment-546182503

Ant Design Table component onChange callback not fired

1 Answers