how to mix rowspan and expandable rows in ant design table - reactjs

Question

I want to use both row span and expandable rows from ant design table component
the target table should look something like this:
i am using the following code to generate this table:
const columns = [
{
title: 'Overall',
colSpan: 4,
dataIndex: 'metric',
ellipsis: true,
fixed: 'left',
width: 100,
render: (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index % 8 === 0) {
obj.props.rowSpan = 8;
} else {
obj.props.rowSpan = 0;
}
return obj;
},
},
{
title: 'Bucket',
colSpan: 0,
dataIndex: 'bucket',
ellipsis: true,
fixed: 'left',
width: 100,
render: (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index % 2 === 0) {
obj.props.rowSpan = 2;
} else {
obj.props.rowSpan = 0;
}
return obj;
},
},
{
title: 'Target',
colSpan: 0,
dataIndex: 'target',
ellipsis: true,
fixed: 'left',
width: 100,
},
{
title: 'Overall Value',
colSpan: 0,
dataIndex: 'overall_value',
ellipsis: true,
fixed: 'left',
width: 100,
},
{
title: '2019-01-01',
dataIndex: '2019-01-01',
ellipsis: true,
width: 100,
},
{
title: '2019-01-02',
dataIndex: '2019-01-02',
ellipsis: true,
width: 100,
},
{
title: '2019-01-03',
dataIndex: '2019-01-03',
ellipsis: true,
width: 100,
},
{
title: '2019-01-04',
dataIndex: '2019-01-04',
ellipsis: true,
width: 100,
},
{
title: '2019-01-05',
dataIndex: '2019-01-05',
ellipsis: true,
width: 100,
},
];
const data = [
{
key: '1',
metric: 'ALBS',
bucket: 'Overall',
target: 'Actual',
overall_value: 4781,
'2019-01-01': 213,
'2019-01-02': 21,
'2019-01-03': 23,
'2019-01-04': 13,
'2019-01-05': 35,
},
{
key: '2',
metric: 'ALBS',
bucket: 'Overall',
target: '1 Year Ago',
overall_value: 4781,
'2019-01-01': 213,
'2019-01-02': 21,
'2019-01-03': 23,
'2019-01-04': 13,
'2019-01-05': 35,
children: [
{
key: '3',
metric: 'ALBS',
bucket: 'Shanghai',
target: 'Actual',
overall_value: 4781,
'2019-01-01': 213,
'2019-01-02': 21,
'2019-01-03': 23,
'2019-01-04': 13,
'2019-01-05': 35,
},
{
key: '4',
metric: 'ALBS',
bucket: 'Shanghai',
target: '1 Year Ago',
overall_value: 4781,
'2019-01-01': 213,
'2019-01-02': 21,
'2019-01-03': 23,
'2019-01-04': 13,
'2019-01-05': 35,
},
{
key: '5',
metric: 'ALBS',
bucket: 'Peking',
target: 'Actual',
overall_value: 4781,
'2019-01-01': 213,
'2019-01-02': 21,
'2019-01-03': 23,
'2019-01-04': 13,
'2019-01-05': 35,
},
{
key: '6',
metric: 'ALBS',
bucket: 'Peking',
target: '1 Year Ago',
overall_value: 4781,
'2019-01-01': 213,
'2019-01-02': 21,
'2019-01-03': 23,
'2019-01-04': 13,
'2019-01-05': 35,
},
{
key: '7',
metric: 'ALBS',
bucket: 'Canton',
target: 'Actual',
overall_value: 4781,
'2019-01-01': 213,
'2019-01-02': 21,
'2019-01-03': 23,
'2019-01-04': 13,
'2019-01-05': 35,
},
{
key: '8',
metric: 'ALBS',
bucket: 'Canton',
target: '1 Year Ago',
overall_value: 4781,
'2019-01-01': 213,
'2019-01-02': 21,
'2019-01-03': 23,
'2019-01-04': 13,
'2019-01-05': 35,
},
]
},
];
const expandable = {
expandIconColumnIndex: 1,
};
return (
<Table columns={columns} size="small" dataSource={data} expandable={expandable} scroll={{ x: true }} bordered defaultExpandAllRows />
);
the table being generated looks something like this:
there are several problems with this table:
the second column messes up the children, somehow it doesn't realise that first column is rendered already
the expand button doesn't get rendered correctly because i am attaching children on (col 2, row 2) instead of (col 2, row 1). but if i attach children on first row, it doesn't realise that every 2 rows should be treated as a group when expanding
any idea how to fix these problems?