Custom GroupRow rendering (mbrn/MaterialTable) React - reactjs

Question

I am customizing groupRow of mbrn/material-table, But I don't find any documents for doing it.
https://material-table.com/#/docs/features/grouping
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.
I tried using MTableBody but the records are not showing up
<tr className="MuiTableRow-root">
<td
className="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-paddingNone MuiTableCell-body py-2"
colSpan={visiblecolumns + isGroupedAndHidden}
>
<button className="d-flex Card w-100">
<div className="ml-3 text-left">
<div className="text--bold text--muted text--xs">
{props.groups[0].title}
</div>
<div className="pt-1 pb-1">
{groupheader.title == 'Priority' ? (
<Priority value={groupData.value} />
) : groupheader.title == 'Time' ? (
<DateFormatter value={groupData.value} relative={true} />
) : (
groupData.value
)}
</div>
</div>
<div className="ListGroupHeader__meta d-flex align-items-center justify-content-end">
<span className="ListGroupHeader__count ml-3 mr-1">
{alerts.length}
</span>{' '}
alert{alerts.length > 1 ? 's' : ''}
<ChevronRight
className="text-muted"
style={{ fontSize: '30px' }}
/>
</div>
</button>
<MTableBody {...props} />
</td>
</tr>
This is how my code looks like. Am so confused I don't know what am missing to make it work
CodeSandBox: https://codesandbox.io/s/festive-bell-5d76e

Answer 1

Provided by your reference, the documentation say
You can override grouped row component with overriding components.GroupRow
That's exactly what you did, you overrated the entire component, but that component had a lot of functionality that you've missed like the Expanding and showing the content of the group.
This is the original component - https://github.com/mbrn/material-table/blob/master/src/components/m-table-group-row.js
So what you had do is copy and change or create your own component with the same functionality.
In the next example, I took the original component and changed it according to your structure (this is far from perfect, just showing you the way).
I copied MTableGroupRow and MTableCell (because Cell component is part of TableRow and had to change) and called them CustomGroupRow and CustomCell.
https://codesandbox.io/s/frosty-forest-su2dl