javascript - How to sort a boolean column in antd table? - Stack Overflow

admin管理员组

文章数量:1024016

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

Share Improve this question Follow edited Jul 6, 2020 at 10:59 Jane Fred asked Jul 6, 2020 at 10:10 Jane FredJane Fred 1,48988 gold badges2626 silver badges4949 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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

Share Improve this question Follow edited Jul 6, 2020 at 10:59 Jane Fred asked Jul 6, 2020 at 10:10 Jane FredJane Fred 1,48988 gold badges2626 silver badges4949 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

本文标签： javascriptHow to sort a boolean column in antd tableStack Overflow