title: react-table: multiple levels of sub-columns
body: <p>Is it possible to divide a <strong>sub-column</strong> into another set of <strong>sub-columns</strong> in the <em>react-table</em>? Like so:</p>
  <pre><code>-----------------------------------------------------------------------
                                  Column 1
  -----------------------------------------------------------------------
           Sub-column 1              |           Sub-column 2
  -----------------------------------------------------------------------
  Sub-sub-col 11  |  Sub-sub-col 12  | Sub-sub-col 21  |  Sub-sub-col 22 
  -----------------------------------------------------------------------
  </code></pre>
  <p>Here is what I tried with no success:</p>
  <pre><code>[
       Header: 'Column 1',
       columns: [
            {
                 Header: 'Sub-column 1',
                 columns: [
                      {
                           Header: 'Sub-sub-column 11',
                           accessor: 'accessor1'
                      },
                      {
                           Header: 'Sub-sub-column 12',
                           accessor: 'accessor1'
                      }
                 ]
            }
       ]
  ]
  </code></pre>
  <p>The problem is that it renders only <strong>Column 1</strong> and its <strong>Sub-column 1</strong> and none of <strong>Sub-sub-columns</strong>. So the result looks like:</p>
  <pre><code>                                    Column 1
      -----------------------------------------------------------------------
               Sub-column 1              |           Sub-column 2
      -----------------------------------------------------------------------
  </code></pre>
  <p>Am I encountering the limitation of react-table or doing something wrong?
  If this is a limitation, please advise a workaround or any solutions that work for this case.</p>
  <blockquote>
  <p>&quot;react-table&quot;: &quot;^6.11.5&quot;</p>
  </blockquote>