Essentially, my table consists of several sub-headers and I need to insert a page break after a certain number of these subsections while avoiding automatic breaks within the sections. It should appear like this rough layout. The gray areas represent the sub-headers where a page break would occur before the 4th, 8th, 12th, etc. subsection.
https://i.sstatic.net/6JGFq.png
I am encountering two main challenges which may or may not be specific to React. Bootstrap is also being used in this scenario.
1) The <div> as a child of <table>, <tbody>, <thead> issue:
Initially, I attempted to add
<div className='pagebreak'><th>. However, this generated an error stating that a <div> cannot be nested inside <table>/<tbody>/<thead>The following approach, therefore, is not allowed:
let i = 1;
return _.map(section, s => {
i++;
return (
<table>
<tbody>
<tr>
<th colSpan='6'>{s.subSectionTitle}</th>
</tr>
<tr>
<td>{s.data1}</td>
<td>{s.data2}</td>
<td>{s.data3}</td>
<td>{s.data4}</td>
<td>{s.data5}</td>
<td>{s.data6}</td>
</tr>
{ i = 4 ? <div className='pagebreak'></div> : null }
</tbody>
</table>
)
})
Several alternative approaches were considered but proved ineffective, such as:
{ i = 4 ? <tr className='pagebreak'></tr> : null }
Or:
{ i = 4 ? <th><td className='pagebreak'></th></tr> : null }
Or:
{ i = 4 ? <tr><th><div className='pagebreak'></div></th></tr> : null }
While these circumvent the error, they do not accomplish the desired pagebreak functionality.
Hence, it appears impossible to introduce a page break within a <table> tag.
2) Creating a new <table> for each subsection.
This method yields poor results due to varying column widths across tables unless static widths are enforced, contrary to my preference. Dynamic resizing of columns is maintained by ensuring uniform width throughout determined by the widest data point within any given column.
However, the following approach does succeed in inserting a break:
return (
<table>
<tbody>
<tr>
<th colSpan='6'>{s.subSectionTitle}</th>
</tr>
<tr>
<td>{s.data1}</td>
<td>{s.data2}</td>
<td>{s.data3}</td>
<td>{s.data4}</td>
<td>{s.data5}</td>
<td>{s.data6}</td>
</tr>
</tbody>
</table>
<div className='pagebreak'></div>
<table>
<tbody>
<tr>
<th colSpan='6'>{s.subSectionTitle}</th>
</tr>
<tr>
<td>{s.data1}</td>
<td>{s.data2}</td>
<td>{s.data3}</td>
<td>{s.data4}</td>
<td>{s.data5}</td>
<td>{s.data6}</td>
</tr>
</tbody>
</table>
)
If you have any suggestions on how to address these issues, please let me know!