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.

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.

• javascript
• reactjs
• antd

• What's the value of that boolean column represented in your code? I assume they only have 2 values so localCompare works just fine. – Duc Nguyen Commented Jul 6, 2020 at 10:22
• true and false . If true dispaly Yes , else displays No in the column – Jane Fred Commented Jul 6, 2020 at 10:54

2 Answers 2

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

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),