Add halfChecked controlled state in rowSelection for Table with tree structured dataSource (indeterminate checkbox)

[pepe95270]

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. In rowSelection of the Table component, the selectedRowKeys prop doesn't allow to manage halfChecked keys like we can in the Tree component with checkedKeys prop. Moreover, if we try to manually change the checkbox prop to indeterminate with rowSelection.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[]}

[FanFanFantastic]

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. In rowSelection of the Table component, the selectedRowKeys prop doesn't allow to manage halfChecked keys like we can in the Tree component with checkedKeys prop. Moreover, if we try to manually change the checkbox prop to indeterminate with rowSelection.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?

[pepe95270]

I don’t think there has been any update :( Still the same warning when using rowSelection.getCheckboxProps

[FanFanFantastic]

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

[pepe95270]

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 ?

[andriiDatsiuk]

I run into the same issue. Is there any workarounds or updates on this?

[pepe95270]

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

[andriiDatsiuk]

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!

[pepe95270]

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