Open pepe95270 opened 1 year ago
What problem does this feature solve?
For now, if we have a Table with tree structured dataSource, there is no way to manage the
indeterminate
state of the checkboxes. InrowSelection
of the Table component, theselectedRowKeys
prop doesn't allow to manage halfChecked keys like we can in the Tree component withcheckedKeys
prop. Moreover, if we try to manually change the checkbox prop toindeterminate
withrowSelection.getCheckboxProps
, it doesn't work and a warning is shown :Warning: [antd: Table] set 'indeterminate' using 'rowSelection.getCheckboxProps' is not allowed with tree structured dataSource.
This can be an absolute necessity when using tree structured dataSource with
checkStrictly = true
.What does the proposed API look like?
Like for the Tree component, when
checkStrictly = true
,selectedRowKeys
should look like{checked: string[], halfChecked: string[]}
I run into the same issue recently, upgrading from antd3 to antd4 . is there any update on this issue?
I don’t think there has been any update :(
Still the same warning when using rowSelection.getCheckboxProps
I set checkStrictly: false on rowSelection property in the table, this seems to solve the problem? it does show half checked when clicking on the child
I set checkStrictly: false on rowSelection property in the table, this seems to solve the problem? it does show half checked when clicking on the child
Yes but checkStrictly = false
implies that you can't control manually the state of the parent checkbox, so unfortunately this is not a good solution for me.
@07akioni Is there a particular reason why we can't use indeterminate
with rowSelection.getCheckboxProps
for tree structured dataSource ?
I run into the same issue. Is there any workarounds or updates on this?
Yes I found a workaround.
You need to use the renderCell
property of rowSelection
.
Something like this:
const rowSelection = {
type: 'checkbox',
selectedRowKeys: checkedKeys,
checkStrictly: true,
onSelect: (record, selected, selectedRows) => onSelect(record.key, selected),
renderCell: (checked, record, index, originNode) => {
return (
<span>
<Checkbox
checked={checked}
indeterminate={isIndeterminate(record) && !checked}
onChange={(e) => {onSelect(record.key, e.target.checked)}}
/>
</span>
);
},
};
I've just noticed that because it seems like half checked state is not displayed for checkboxes with children when they are disabled using getCheckboxProps
@pepe95270 Great, thank you!
Yes I was also trying to use getCheckboxProps
but it was not working properly.
Note that with renderCell
you can also manage disabled and half-checked keys ;)
What problem does this feature solve?
For now, if we have a Table with tree structured dataSource, there is no way to manage the
indeterminate
state of the checkboxes. InrowSelection
of the Table component, theselectedRowKeys
prop doesn't allow to manage halfChecked keys like we can in the Tree component withcheckedKeys
prop. Moreover, if we try to manually change the checkbox prop toindeterminate
withrowSelection.getCheckboxProps
, it doesn't work and a warning is shown :Warning: [antd: Table] set 'indeterminate' using 'rowSelection.getCheckboxProps' is not allowed with tree structured dataSource.
This can be an absolute necessity when using tree structured dataSource with
checkStrictly = true
.What does the proposed API look like?
Like for the Tree component, when
checkStrictly = true
,selectedRowKeys
should look like{checked: string[], halfChecked: string[]}