单击标题复选框时重置 antd 表行选择

Question

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

Answer 1

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: