Ant design - onCheckboxChange reset table rowselection

Viewed 19

I am trying to reset and disable defaultSelectedRowKeys whenever the user clicks on the checkbox "Is All Permission". On checkbox change, setIsAllPermission state will become true.

How can i reset all the checkbox selection whenever the user selects the checkbox "Is All Permission"? Please help me

Checkbox and table with defaultrowselection

<Tabs>
<TabPane tab='User Role' key='1'>
  <Form layout="vertical">
    <Form.Item>
      <Checkbox checked={isAllPermission} onChange={onCheckboxChange} style={{ marginBottom: 15 }}>
        Is All Permission
      </Checkbox>
      <Table
        className='antTable'
        rowSelection={{
          defaultSelectedRowKeys:
            //check base on the list of key
            editingUserRole == null ? [] : editingUserRole.checkRole,
          type: "checkbox",
          ...roleRowSelection,
          getCheckboxProps: (record) => {
            if (isAllPermission){
              return {
                disabled: record,
              }
            }
          },

        }}
        columns={roleColumns}
        dataSource={dataSourceRole}
      />
    </Form.Item>
  </Form>
</TabPane>

Code of useState and onCheckboxChange:

  const [isAllPermission, setIsAllPermission] = useState(false);

  const onCheckboxChange = (e) => {
    setIsAllPermission(e.target.checked);
    console.log(`checked = ${e.target.checked}`);
  };

The Interface:

User interface

Edit: Disabling is fixed, now I have to find a way to reset the rowSelection checkboxes.

0 Answers
Related