I am trying to achieve to generate rowSpan
daynamic on a Column
component inside onCell
props
Imaging I am getting the data
from a backend in below format
export const BACKEND_DATA_FIELDS = [
{
items: [
{name: ''},
],
property: "Chemistry",
},
{
items: [
{},
{},
{},
{},
],
property: "Material property",
},
{
items: [
{},
{},
{},
],
property: "Coating",
},
{
items: [
{},
],
property: "Oiling",
},
{
items: [
{},
],
property: "Forming",
},
];
Below is my code
<Table
bordered
dataSource={BACKEND_DATA_FIELDS}
pagination={false}
style={{ width: "100%" }}
>
<Column
title="Material Property"
key="1"
dataIndex="property"
onCell={(r, index) => {
// need to generate dynamic as per backend data
// only 5 rows are render instead of 10 rows
if (index === 0)
return {
rowSpan: 1,
};
if (index === 1)
return {
rowSpan: 3,
};
if (index > 1 && index <= 3)
return {
rowSpan: 0,
};
.........
}}
/>
<Column title="Test Item" key="2" dataIndex="name" />
<Column
title="Requirement"
key="3"
render={(f, r, i) => (
<Form.Item
name={i + "_applicable"}
style={{ margin: 0 }}
valuePropName="checked"
>
<Checkbox />
</Form.Item>
)}
/>
<Column
title="Standard"
key="3"
render={(f, r, i) =>
formData.getFieldValue(i + "_applicable") && (
<Form.Item
name={i + "_test_standard"}
rules={[{ required: true }]}
style={{ margin: 0 }}
>
<Input
/>
</Form.Item>
)
}
/>
</Table>
What needed to achieve
-
total rows of a table should be equal to (total length of all
items
key) -
first columns will have
dataIndex={property}
with rowSpan dynamic generated it means that
(for property ‘chemical’rowSpan
be1
and for property Material PropertyrowSpan
be3
) -
second columns hold the value
dataIndex={name}
I am new here, Thanks in advance, let me know if anything unclear
Azhar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.