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:
Edit: Disabling is fixed, now I have to find a way to reset the rowSelection checkboxes.
