reactjstypescriptantd

antd table sortable column title with switch. How to avoid sort when click on switch?


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


Solution

  • 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();
    }}