CODEWITHSUNDEEP
javascriptreactjsantd
CraZyDroiD
CraZyDroiD

Reputation: 7105

Reset antd table row selections when click on the header checkbox

So i have an antd table implemented with select/deselect all checkbox option. What i want to do if the user has selected only several of the checkboxes and then when clicking on the checkbox at header, the selected checkboxes should reset. Current behaviour is it select all the checkboxes(rows).

Following is my rowSelection code

const rowSelection = {
    onSelectAll: (selected: any, selectedRows: any, changeRows: any) => {
      if(selectedRows.length !== 15){
        console.log("reset checkboxes");
      }
    },
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      setSelectedRows(selectedRows);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === "Disabled User",
      name: record.name,
    }),
  };

Upvotes: 1

Views: 3965

Answers (1)

Chanandrei
Chanandrei

Reputation: 2421

One solution is to make the selected row controlled.

const [selectedRowKeys, setSelectedRowKeys] = useState([]);

const rowSelection = {
    selectedRowKeys: selectedRowKeys,
    onSelectAll: (selected, selectedRows, changeRows) => {
      if (selectedRowKeys.length !== 0) {
        setSelectedRowKeys([]);
      }
    },
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
    }
};

When you click checkbox on rows, the onChange function will execute and set the selected row keys. And when you click checkbox at header, the onChange function will execute again and set all the row keys followed by onSelectAll (take note that setState on onChange will not take effect immediately) which then reset all the selected row keys if there are several selected row (on state).

See working code here:

Edit prod-http-h73fi

Upvotes: 3

Related Questions