I've been learning React recently, and I'm running into a problem trying to model and render a HTML table of the following structure (note the columns which are split into two using the colspan attribute for the headers).
+---------------------+---------------------+-----+-------------------+
| Col 1 Header | Col 2 Header | ... | Col N header |
+----------+----------+----------+----------+-----+---------+---------+
| Data 1A | Data 1B | Data 2A | Data 2B | ... | Data NA | Data NB |
+----------+----------+----------+----------+-----+---------+---------+
| Data 1A | Data 1B | Data 2A | Data 2B | ... | Data NA | Data NB |
+----------+----------+----------+----------+-----+---------+---------+
I've modelled the table like this:
Main component Table
, which renders:
<table>
<thead>
<tr>
{headers} <!-- <Header/> components -->
</tr>
</thead>
<tbody>
{rows} <!-- <Row/> components -->
</tbody>
</table>
The Header
components render as <th colSpan="2">Col 1 Header</th>
Each Row
renders as
<tr>
{cells} <!-- <Cell/> components -->
</tr>
Now the Cell
component is where I run into trouble as I want to split each column into two sub columns (as the header columns have colSpan="2"
.)
Since ReactComponent's render() method has to return a single child component, I can't figure out how to return the two cells like this: <td>Data 1A</td><td>Data 1B</td>
In non-table situations I could return something like
<div>
<div class="subcol1">Data 1A</div>
<div class="subcol2">Data 1B</div>
</div>
but I can't seem to figure out how to achive this with a table. Maybe the way I've designed the component structure is a bit off?