antd表格组件升降序加上按钮操作

您可以使用 Ant Design 的 Table 组件来实现表格的升降序排序，并且加上按钮操作。以下是一个示例代码：

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

const data = [
  {
    key: '1',
    name: 'John Doe',
    age: 28,
    address: 'New York',
  },
  {
    key: '2',
    name: 'Jane Smith',
    age: 32,
    address: 'London',
  },
  // ... more data ...
];

const ExampleTable = () => {
  const [sortOrder, setSortOrder] = useState(null);

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      sorter: (a, b) => a.name.localeCompare(b.name),
      sortOrder,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
      sortOrder,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      sorter: (a, b) => a.address.localeCompare(b.address),
      sortOrder,
    },
  ];

  const handleSortChange = (pagination, filters, sorter) => {
    setSortOrder(sorter.order);
  };

  return (
    <div>
      <Button onClick={() => setSortOrder(null)}>清除排序</Button>
      <Table columns={columns} dataSource={data} onChange={handleSortChange} />
    </div>
  );
};

export default ExampleTable;

此示例中，我们使用了 useState 钩子来跟踪排序顺序（升序、降序或无序）。在 columns 中，我们使用 sorter 属性来指定排序函数，并将 sortOrder 设置为当前排序顺序。当用户点击表头时，会触发 onChange 事件，我们可以在 handleSortChange 函数中更新排序顺序。

在组件中，我们还添加了一个按钮，用于清除排序。当用户点击该按钮时，我们将 sortOrder 设置为 null，即清除排序。

您可以根据实际需求修改数据和表头，并将此示例代码集成到您的项目中。