Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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'),
    },
Tags:

2

Answers


  1. 0

    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();
}}
    Login or Signup to reply.
  2. 0

    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()}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search