There is an antd table. One of the columns has a title with a switch. The column can be sorted.
When I click on the switch, the column sorter also changes. Is it possible to avoid changes in sorter when i click on the switch?
Following is my code:
{
dataIndex: 'owner',
title:
<div>
Owner <Switch
size="small"
checkedChildren="Current User"
unCheckedChildren="All Users"
onChange={(checked) => {
setOwnerIsMe(checked)
}}
/>
</div>
,
sorter: (a, b) => a.name.localeCompare(b.name),
...getColumnSearchProps('owner'),
},
Switch onChange callback has second parameter event.
Need to stop event propagation using event object.
Change your Switch onChange to
onChange={(checked, event) => {
setOwnerIsMe(checked);
event.stopPropagation();
}}