How to make sub table <tr> of parent table <tr>? - reactjs

Question

I know that maybe this question can be confusing for you, but I will try to explain in more detail.
First: I have this api
{
"data": [
{
"id": 1,
"title": "Действие 1",
"subactions": [
{
"id": 2,
"title": "Субдействие 1",
"status": {
"id": 1,
"text": "Выполнено"
},
"countries": [
"kz",
"kg"
],
"theme": {
"id": 1,
"text": "Изменение климата"
},
"characteristics": {
"0": "Другие действия",
"id": 1
},
"monthes": [
{
"month": 1,
"year": 2017,
"complete": 0
},
{
"month": 2,
"year": 2017,
"complete": 1
},
{
"month": 3,
"year": 2017,
"complete": 1
},
{
"month": 4,
"year": 2017,
"complete": 1
},
{
"month": 5,
"year": 2017,
"complete": 1
},
{
"month": 1,
"year": 2018,
"complete": 0
},
{
"month": 2,
"year": 2018,
"complete": 0
}
]
}
]
}
The second: the table should look like in this picture
The third: The problem is that I don not know how to loop <tr> as child of another <tr> parent.
The Fourth: This my attempts of doing that
{
task.map((value, i) => {
if(value.subactions !== undefined){
return (
value.subactions.map((subaction, i) => {
return (
<div>
{/*Parent tr*/}
<tr key={i}>
<td>{value.id}</td>
<td>{value.title}</td>
</tr>
{/* end Parent tr*/}
{/*sub table of parent tr*/}
<tr key={i}>
<td>{subaction.id}</td>
<td>{subaction.title}</td>
<td>{subaction.status.text}</td>
<td>
{subaction.countries.map((country, i) => {
return (
i == subaction.countries.length - 1 ?
<span key={i}>{country} </span> :
<span key={i}> {country},</span>
)
})
}
</td>
<td></td>
<td>{subaction.theme.text}</td>
<td>{subaction.characteristics[0]}</td>
{subaction.monthes.map((month, i) => {
return (
month.complete ?
<td className='task-month task-end'>
<input
type="checkbox"
className="css-checkbox lrg"/>
<label htmlFor="checkbox69" name="checkbox69_lbl"
className="css-label lrg vlad"/>
</td> : <td></td>
)
})
}
</tr>
{/*end sub table of parent tr*/}
</div>
)
})
)
} else {
return undefined
}
})
}
Please, anyone help to point out of my mistakes.

Answer 1

Replace div tag to table tag and In you parent table at second td use colspan="(total number of td in your second tr) - 2"
check below changes , I have mentioned the colspan count :
task.map((value, i) => {
if(value.subactions !== undefined){
return (
value.subactions.map((subaction, i) => {
return (
<table>
{/*Parent tr*/}
<tr key={i}>
<td>{value.id}</td>
<td colspan="1+totalContriesCount+2+totalMonthsCount">{value.title}</td>
</tr>
{/* end Parent tr*/}
{/*sub table of parent tr*/}
<tr key={i}>
<td>{subaction.id}</td>
<td>{subaction.title}</td>
<td>{subaction.status.text}</td>
<td>
{subaction.countries.map((country, i) => {
return (
i == subaction.countries.length - 1 ?
<span key={i}>{country} </span> :
<span key={i}> {country},</span>
)
})
}
</td>
<td></td>
<td>{subaction.theme.text}</td>
<td>{subaction.characteristics[0]}</td>
{subaction.monthes.map((month, i) => {
return (
month.complete ?
<td className='task-month task-end'>
<input
type="checkbox"
className="css-checkbox lrg"/>
<label htmlFor="checkbox69" name="checkbox69_lbl"
className="css-label lrg vlad"/>
</td> : <td></td>
)
})
}
</tr>
{/*end sub table of parent tr*/}
</table>
)
})
)
} else {
return undefined
}
})
}

Answer 2

Try making the parent row span to the maximum so you might achieve the output
<tr>
<td rowspan="maxRowCount"></td>
<td colspan="1"></td>
</tr>