时间戳

首页 > 解决方案 > antd table的sortupicon和sortdown icon可以改吗

reactjs - antd table的sortupicon和sortdown icon可以改吗

问题描述

我们目前在定制 ant design table 的 sortupicon 和 sortdown 图标时遇到问题。我的问题，是否允许自定义桌面上的图标？还是ant design对此没有作用？我今天有很多研究，该线程没有正确答案。

这是插图：

插图

<Table
    
    dataSource={data}
    columns={columns}
    onChange={onChangeSort}
    size="small"
    rowSelection={{
        type: "checkbox",
        ...rowSelection,
        }}
    pagination={false}
    footer={() => `Total No. of Checks: ${data.length}`}
    />

标签： reactjsantd

解决方案

是的，你可以做到。我找到了一种解决方案

.ant-table-column-sorter {
  display: none;
}

export default function App() {
  const [orderDirection, setOrderDirection] = React.useState();

  const changeOrder = (direction) => () => {
    setOrderDirection(direction);
  };

  const columns = [
    {
      title: (
        <div>
          Age <button onClick={changeOrder("ascend")}>up</button>
          <button onClick={changeOrder("descent")}>down</button>
        </div>
      ),
      dataIndex: "age",
      key: "age",
      sorter: (a, b) => a.age - b.age,
      sortOrder: orderDirection
    }
  ];
  return (
    <div className="App">
      <Table columns={columns} dataSource={data} />
    </div>
  );
}

您可以在此处查看完整示例：https ://codesandbox.io/s/morning-https-rvzjl?file=/src/App.js

推荐阅读