How to sort a boolean column in antd table?

Question

In my antd table, one of the column is boolean. I want to sort that column. How to do that?

sorter: (a, b) => a.isPayment.localeCompare(b.isPayment),
render: (val)=><div className="text_overlap">{val ? 'Yes':'No'}</div>

I guess localeCompare works only for string.

Answer 1

In JavaScript we have:

true - false === 1
false - true === -1

So all you have to do is just subtracting booleans in your sorter function.

sorter: (a, b) => a - b

Answer 2

In my case, a error message "The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type." was shown in my VSCode.

Here is my solution.

sorter: (a, b) => Number(a.isPayment) - Number(b.isPayment),