title: How to model a HTML table with two cells per column in React?
body: <p>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).</p>
  
  <pre><code>+---------------------+---------------------+-----+-------------------+
  |     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 |
  +----------+----------+----------+----------+-----+---------+---------+
  </code></pre>
  
  <p>I've modelled the table like this:</p>
  
  <p>Main component <code>Table</code>, which renders:</p>
  
  <pre><code>&lt;table&gt; 
    &lt;thead&gt;
      &lt;tr&gt;
      {headers}  &lt;!-- &lt;Header/&gt; components --&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      {rows}     &lt;!-- &lt;Row/&gt; components --&gt;
    &lt;/tbody&gt; 
  &lt;/table&gt;
  </code></pre>
  
  <p>The <code>Header</code> components render as <code>&lt;th colSpan="2"&gt;Col 1 Header&lt;/th&gt;</code></p>
  
  <p>Each <code>Row</code> renders as</p>
  
  <pre><code>&lt;tr&gt;
    {cells}    &lt;!-- &lt;Cell/&gt; components --&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Now the <code>Cell</code> component is where I run into trouble as I want to split each column into two sub columns (as the header columns have <code>colSpan="2"</code>.)</p>
  
  <p>Since <a href="http://facebook.github.io/react/docs/component-specs.html#render">ReactComponent's render()</a> method has to return a single child component, I can't figure out how to return the two cells like this: <code>&lt;td&gt;Data 1A&lt;/td&gt;&lt;td&gt;Data 1B&lt;/td&gt;</code></p>
  
  <p>In non-table situations I could return something like </p>
  
  <pre><code>&lt;div&gt;
     &lt;div class="subcol1"&gt;Data 1A&lt;/div&gt;
     &lt;div class="subcol2"&gt;Data 1B&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>