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();
}}
if you want to manage the click event specifically during the change of the Switch, use the onChange method. If you want a broader and simpler approach, use the onClick method.
1. onChange={(checked, event) => {
setOwnerIsMe(checked);
event.stopPropagation(); }}
2. onClick={(e) => e.stopPropagation()}