title: Expand subcomponent rows by default with react-table
body: <p>I am using react-table to display some rows, each row has a subcomponent, which just renders some more "subrows." However, you have to click the row in order to show the subrows. React-table does not have a setting to have then expanded by default. There is some discussion out there on doing this but I can't seem to make anything work with my example. </p>
  
  <p>Current looks like this on load:
  <a href="https://i.stack.imgur.com/ELdZS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ELdZS.png" alt="enter image description here"></a></p>
  
  <p>After clicking on each row (how im trying to get it to look by default)
  <a href="https://i.stack.imgur.com/mpax2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mpax2.png" alt="enter image description here"></a></p>
  
  <p>Table.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactTable from 'react-table';
  import { columns, subComponent } from './tableSetup';
  
  
  class Table extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;ReactTable data={ data }
          columns={ columns }
          SubComponent={ subComponent }
          expandedRows={ true }
          resizable={ false }
          minRows={ 1 }
          pageSize={ 8 }
          showPageSizeOptions={ false } /&gt;
      );
    }
  }
  
  export default Table;
  </code></pre>
  
  <p>tableSetup.js with exampe data
      import React from 'react';</p>
  
  <pre><code>export const columns = [
    {
      Header: () =&gt; (
        &lt;div /&gt;
      ),
      accessor: 'name',
      maxWidth: 300,
      Cell: row =&gt; (
        &lt;div className='first-column'&gt;{row.value}&lt;/div&gt;
      )
    }
  ];
  
  export const subComponent = row =&gt; {
    return (
      &lt;div&gt;
        {row.original.types.map((type, id) =&gt; {
          return (
            &lt;div className='subRow' key={ id }&gt;{ type.name }&lt;/div&gt;
          );
        })}
      &lt;/div&gt;
    );
  };
  
  export const data = [
    {
      id: '12345',
      name: 'sports',
      types: [
        {
          name: 'basketball',
          id: '1'
        },
        {
          name: 'soccer',
          id: '2'
  
        },
        {
          name: 'baseball',
          id: '3'
        }
      ]
    },
    {
      id: '678910',
      name: 'food',
      types: [
        {
          name: 'pizza',
          id: '4'
        },
        {
          name: 'hamburger',
          id: '5'
  
        },
        {
          name: 'salad',
          id: '6'
        }
      ]
    }
  ];
  </code></pre>