React antd 表格组件自定义渲染勾选框和全选功能

要实现的效果如图：

有两列数据要渲染出勾选框，并且右上角有一个全选按钮，其有三种状态，全选，半选，和空状态。

 组件代码：

const columns = [
    {
        title: '第五列'
        dataIndex: 'fifthColumn',
        key: 'fifthColumn',
        render: (value, record) => {
            // 遍历后台返回的数据，后台返回的是用逗号隔开的数据
            const data = value.split(',').map(i => {
                // 拼接一下数据确保唯一性
                return { label: i, value: `${record.firstColumn}-${i}`}; 
            });
            return data?.map((i, idx) => (
                <Checkbox
                    key={idx}
                    value={i.value}
                    onChange={e => handleCheckedType(e)}
                >
                    {i.label}
                </Checkbox>
            ))
        }
    },
    // 后面略......
];

<div>
    <div>勾选数据权限：</div>
    <Checkbox
        indeterminate={indeterminate}
        onChange={onCheckAllChange}
        checked={checkAll}
    >
        全选
    </Checkbox>
</div>


<div>
    // 表格里面的勾选框
    <CheckboxGroup
        onChange={onChange}
        value={numLists}
    >
        <Table
            bordered
            rowKey={'id'}
            dataSource={tableData}
            columns={columns}
        />
    </CheckboxGroup>
</div>

交互逻辑：

const [numLists, setNumLists] = useState([]); //勾选的数据
const [indeterminate, setIndeterminate] = useState(false); //控制半选状态
const [checkAll, setCheckAll] = useState(false); //控制全选状态

useEffect(() => {
    setNumLists(getNum); // 把表格里面的勾选框全部渲染出来
}, [])

// 包裹table的复选框组
const onChange = e => {
    setIndeterminate(Boolean(e.length) && e.length < getNum.length);
    setNumLists(e);
    setCheckAll(e.length === getNum.length);
};

// 全选按钮
const onCheckAllChange = e => {
    setNumLists(e.target.checked ? getNum : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
}

// 把表格里面所有的需要渲染勾选框的数据放进一个数组里面  
// finalData是扁平化之后的数据
const getNum = Array.from(new Set(getTypeNum(finalData))).concat(
    getEnumNum(finalData),
);