ant-design: Table component doesn't allow custom sort icons

There is a solution with current APIs.

Hide default sort icon

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

Render Custom Sort Icon by title prop, which support ({ sortColumns, filters }) => ReactNode in antd version 3.10.0 or later.

columns = [{
      key: "name"
      title: ({ sortColumns }) => {
        const sortedColumn = sortColumns?.find(({ column }) => column.key === "name");
        return (
          <div>
            Name Title
            {sortedColumn ? (
              sortedColumn.order === "ascend" ? (
                <SortUpIcon />
              ) : (
                <SortDownIcon />
              )
            ) : null}
          </div>
        )
    }
}];

@afc163 Maybe provide a render prop sorterIcon: ReactNode | (sortByAscend: boolean) => ReactNode?

have same issue any possible ways?

Any updates?

I looked into this feature recently and noticed the current implementation has a sortDown and a sortUp icon. I was wondering if we should keep the same or change it to support a sortNone prop as the OP suggested.

@afc163, I’d appreciate your input into the desired API. For those interested, this commit has some changes to support sortDownIcon and sortUpIcon props keeping the default as it is today.

Any updates?

To follow the implementation of the current sortIcon, we should design API like below.

sortDownIcon?: (sortOrder: SortOrder) => React.ReactNode)
sortUpIcon?: (sortOrder: SortOrder) => React.ReactNode)

However it seems to be a little complicated therefore I would like to implement API like below and refactor the logic in useSorter.tsx

sortIcon?: (sortOrder?: SortOrder) => React.ReactNode)

To refactor like this, I must know the parts which would be affected.

Would you let me know if you have any ideas.

any updates??

any updates?

Any updates?

Any updates?

.ant-table-column-sorter { visibility: collapse; }