title: how to add new row dynamically in reactable
body: <p>I am trying to add new row onclick of accordion i.e while expand using <a href="https://glittershark.github.io/reactable/" rel="nofollow noreferrer">reactable</a>, attached the expected result.
  I have showed the table structured data using <strong>Tr</strong> and <strong>Td</strong> from reactable but however, not sure to add the new row.
  onclick of the arrow the dynamic row should expand,I tried to do so but wasn't able to achieve that.</p>
  <pre><code>class PolicyDetails extends Component {
    showPolicyOperation = (e,models) =&gt; {
      e.preventDefault();
      const {callbacks} = this.props
      const activeClass = document.querySelectorAll('.fa-angle-up')
      const currentTarget = e.currentTarget;
      if(currentTarget.classList.contains('fa-angle-up')){
        currentTarget.classList.remove('fa-angle-up');
        currentTarget.classList.add('fa-angle-down');
      }else{
        currentTarget.classList.remove('fa-angle-down');
        currentTarget.classList.add('fa-angle-up');
      }
      activeClass &amp;&amp; activeClass.forEach(node =&gt; {
        node.classList.remove('fa-angle-up');
        node.classList.add('fa-angle-down');
      })
      callbacks.fetchPoliciesWithId(models.id)
    }
  
    getHeaders = () =&gt; {
      let headers = ([
        &lt;Th key=&quot;0&quot; column=&quot;&quot;&gt;&lt;/Th&gt;,
        &lt;Th key=&quot;1&quot; column=&quot;id&quot;&gt;Policy Id&lt;/Th&gt;,
        &lt;Th key=&quot;2&quot; column=&quot;serviceType&quot;&gt;Service&lt;/Th&gt;,
        &lt;Th key=&quot;3&quot; column=&quot;name&quot;&gt;Policy Name&lt;/Th&gt;,
        &lt;Th key=&quot;4&quot; column=&quot;description&quot;&gt;Policy Description&lt;/Th&gt;,
        &lt;Th key=&quot;5&quot; column=&quot;policyLabel&quot;&gt;Policy Label&lt;/Th&gt;,
        &lt;Th key=&quot;6&quot; column=&quot;policyType&quot;&gt;Policy Type&lt;/Th&gt;,
        &lt;Th key=&quot;7&quot; column=&quot;operation&quot;&gt;Operation&lt;/Th&gt;,
        &lt;Th key=&quot;8&quot; column=&quot;action&quot;&gt;Actions&lt;/Th&gt;
      ])
      return headers;
    }
  
    pageChange = (page) =&gt; {
      this.cPoliciesData.params.page = page - 1 || undefined;
      this.props.callbacks.fetchPolicies();
    }
  
    getRows = (models, idx) =&gt; {
      const state = this.props.options._vState
      let rows = ([
        &lt;Td key=&quot;0&quot; column=&quot;&quot;&gt;
          &lt;i className=&quot;fa pointer fa-angle-down&quot;
            aria-hidden=&quot;true&quot; key = {idx} onClick={e =&gt; {
              state.isPolicySelected = !state.isPolicySelected;
              this.showPolicyOperation(e,models)
            }}&gt;&lt;/i&gt;&lt;/Td&gt;,
        &lt;Td key=&quot;1&quot; column=&quot;id&quot;&gt;{&lt;a&gt;{models.id}&lt;/a&gt;}&lt;/Td&gt;,
        &lt;Td key=&quot;2&quot; column=&quot;serviceType&quot;&gt;{models.serviceType || &quot;--&quot;}&lt;/Td&gt;,
        &lt;Td key=&quot;3&quot; column=&quot;name&quot;&gt;{models.name || &quot;--&quot;}&lt;/Td&gt;,
        &lt;Td key=&quot;4&quot; column=&quot;description&quot;&gt;{models.description || &quot;--&quot;}&lt;/Td&gt;,
        &lt;Td key=&quot;5&quot; column=&quot;policyLabel&quot;&gt;{&quot;--&quot;}&lt;/Td&gt;,
        &lt;Td key=&quot;6&quot; column=&quot;policyType&quot;&gt;{models.serviceType == 'tag' &amp;&amp; models.policyType == 0 ? &quot;Tag Based&quot; : POLICY_TYPE[models.policyType].label}&lt;/Td&gt;,
        &lt;Td key=&quot;7&quot; column=&quot;operation&quot;&gt;{&quot;--&quot;}&lt;/Td&gt;,
        &lt;Td key=&quot;8&quot; column=&quot;action&quot;&gt;{&quot;--&quot;}&lt;/Td&gt;,
      ]);
      let operation = state.isPolicySelected &amp;&amp; &lt;Tr className=&quot;special-row&quot;&gt;
              &lt;Th column=&quot;name&quot;&gt;
                &lt;strong className=&quot;name-header&quot;&gt;First Name, Last Name&lt;/strong&gt;
              &lt;/Th&gt;
              &lt;Th column=&quot;age&quot;&gt;
                &lt;em className=&quot;age-header&quot;&gt;Age, years&lt;/em&gt;
              &lt;/Th&gt;
            &lt;/Tr&gt;
      rows.push(operation)
      return rows;
    }
  
    render() {
      const {options , callbacks} = this.props;
      const {cPoliciesData, _vState} = options
      
      return (
        &lt;Row className=&quot;m-t-md&quot;&gt;
          {/* &lt;Col md={12}&gt; */}
          &lt;PanelBody&gt;
            &lt;Table data={cPoliciesData}
              tableAttr={{ className: &quot;table table-hover&quot; }}
              getHeaders={this.getHeaders}
              getRowData={this.getRows}
              pagination={true}
              pageChange={this.pageChange}
            &gt;
  
            &lt;/Table&gt;
  
          &lt;/PanelBody&gt;
          {/* &lt;/Col&gt; */}
        &lt;/Row&gt;
      )
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/yv63F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yv63F.png" alt="enter image description here" /></a></p>