title: Custom GroupRow rendering (mbrn/MaterialTable) React
body: <p>I am customizing groupRow of mbrn/material-table, But I don't find any documents for doing it.</p>
  
  <p><a href="https://material-table.com/#/docs/features/grouping" rel="nofollow noreferrer">https://material-table.com/#/docs/features/grouping</a></p>
  
  <p><a href="https://i.stack.imgur.com/qdDDE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qdDDE.png" alt="enter image description here"></a></p>
  
  <p>So far I managed to make the groupRow and its working fine. But now I don't know how to render the table row on expanding the groupRow.</p>
  
  <p>I tried using <code>MTableBody</code> but the records are not showing up </p>
  
  <p><a href="https://i.stack.imgur.com/SKjuu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SKjuu.png" alt="enter image description here"></a></p>
  
  <pre><code> &lt;tr className="MuiTableRow-root"&gt;
      &lt;td
        className="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-paddingNone MuiTableCell-body py-2"
        colSpan={visiblecolumns + isGroupedAndHidden}
      &gt;
        &lt;button className="d-flex Card w-100"&gt;
          &lt;div className="ml-3 text-left"&gt;
            &lt;div className="text--bold text--muted text--xs"&gt;
              {props.groups[0].title}
            &lt;/div&gt;
            &lt;div className="pt-1 pb-1"&gt;
              {groupheader.title == 'Priority' ? (
                &lt;Priority value={groupData.value} /&gt;
              ) : groupheader.title == 'Time' ? (
                &lt;DateFormatter value={groupData.value} relative={true} /&gt;
              ) : (
                groupData.value
              )}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="ListGroupHeader__meta d-flex align-items-center justify-content-end"&gt;
            &lt;span className="ListGroupHeader__count ml-3 mr-1"&gt;
              {alerts.length}
            &lt;/span&gt;{' '}
            alert{alerts.length &gt; 1 ? 's' : ''}
            &lt;ChevronRight
              className="text-muted"
              style={{ fontSize: '30px' }}
            /&gt;
          &lt;/div&gt;
        &lt;/button&gt;
        &lt;MTableBody {...props} /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>This is how my code looks like. Am so confused I don't know what am missing to make it work</p>
  
  <p>CodeSandBox: <a href="https://codesandbox.io/s/festive-bell-5d76e" rel="nofollow noreferrer">https://codesandbox.io/s/festive-bell-5d76e</a></p>