Table onChange function is passed with wrong `sorter` value when page changes

[zhhanging]

Reproduction link

Steps to reproduce

1. Click the pager to change to another page. Then the "sort by" dropdown select will show sort key is changed to the last column key which has a sorter.

What is expected?

sorter.columnKey should be null

What is actually happening?

sorter.columnKey is the last column which has a sorter

Environment	Info
antd	5.21.1
React	18.3.1
System	macOS 15.0
Browser	Chrome 129.0.6668.60

---

I need to manually change the sort key from outside the table component

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• antd-reproduce-5x-vhk8ra (Open reproduction)

[petercat-assistant[bot]]

It appears that there are no directly related issues that match the specific problem you are encountering with the sorter.columnKey value when the page changes in the Ant Design Table component.

Given this, let's consider a potential solution or workaround for your issue. You mentioned that you need to manually change the sort key from outside the table component. Here is a possible approach to handle this:

Workaround:

You can manually reset the sorter state when the page changes. Here's an example of how you might implement this:

import React, { useState } from 'react';
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: true,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: true,
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const Demo = () => {
  const [sorter, setSorter] = useState(null);

  const handleTableChange = (pagination, filters, sorter) => {
    if (pagination.current !== 1) {
      sorter.columnKey = null;
    }
    setSorter(sorter);
  };

  return (
    <Table
      columns={columns}
      dataSource={data}
      onChange={handleTableChange}
      pagination={{ pageSize: 2 }}
    />
  );
};

export default Demo;

In this example, the handleTableChange function checks if the current page is not the first page and resets the sorter.columnKey to null.

Please try this workaround and let me know if it resolves your issue.

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[github-actions[bot]]

Hello @zhhanging. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @zhhanging，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。