Expandable Details Panel

[itsma7]

material-react-table version

v1.14.0

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

I have a jsp project, and im integrating a react build, this build has only material react table. the problem im facing is when expanding the detail panel the table crashed and disappears with this error :
Uncaught Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at rs (react-dom.production.min.js:266:249) at tl (react-dom.production.min.js:180:154) at Object.onChange (index.tsx:31:7) at rv.notify (index.ts:356:18) at rv._measureElement (index.ts:671:12) at measureElement (index.ts:680:10) at ref (MRT_TableBodyCell.tsx:198:11) at iu (react-dom.production.min.js:244:482) at wu (react-dom.production.min.js:263:46) at xu (react-dom.production.min.js:260:446)


Console
What's new

Issues

Search

Highlights from the Chrome 121 update

Minimal, Reproducible Example - (Optional, but Recommended)

[12:55 PM] MAHMOUD ADNAN MOHAMED
<MaterialReactTable
columns={columns}
data={dataCulomns}
enableBottomToolbar={true}
muiTablePaginationProps={{
rowsPerPageOptions: [5, 10],
showFirstButton: true,
showLastButton: true,
}}
enableColumnResizing
enableColumnVirtualization
enableGlobalFilterModes
enablePagination={true}
enablePinning
enableRowActions={(userGroup || ncTeam) ? true : false}
enableExpanding={true}

                initialState={{ columnVisibility: { nodeStatus: false, cabEast: false, breakerFuseMain: false, totalPower: false, cabRUHeight: false, nrmNodeName: false, nrmId: false, ndCoordinates: false, cabNorth: false, cabinetName: false, manualUniqueIdentifier: false, nodeRUPosition: false, nodeRUHeight: false, cabType: false, gatewayIPAddress: false, IPAddress: false, heatDissipation: false, inputVoltage: false, fuserRatings: false, noOfFeeders: false, nodeServiceStatus: false, remarks: false, loadCurrentStandby: false, loadCurrentMain: false, breakerFuseStandby: false, pdbStandby: false, pdbMain: false, shelfNo: false, typeOfConnection: false, cabDepth: false, cabWidth: false, cabHeight: false, cabGrowthTowards: false, cabFrontTowards: false } }}

                muiTableContainerProps={{ sx: { maxHeight: '700px' } }}
                // muiTableProps={{
                //     sx: {
                //         tableLayout: 'fixed',
                //     },
                // }}
                onSortingChange={setSorting}
                state={{ sorting }}
                // rowVirtualizerInstanceRef={rowVirtualizerInstanceRef} //optional
                rowVirtualizerProps={{ overscan: 11 }} //optionally customize the row virtualizer
                columnVirtualizerProps={{ overscan: 11 }} //optionally customize the column virtualizer
                {...(dataCulomns) && {
                   renderDetailPanel: ({ row }) => (
                    <Box
                        sx={{
                            display: 'grid',
                            margin: 'auto',
                            gridTemplateColumns: '1fr ',
                            width: '100%',
                        }}
                    >
                        <Typography sx={{ fontWeight: "bold" }}>Node Status: {row.original.nodeStatus} </Typography>
                        --------
                        <Typography sx={{ fontWeight: "bold" }}>Cabinet Name: {row.original.cabinetName} </Typography>
                        --------
                        <Typography sx={{ fontWeight: "bold" }}>Nrm Id: {row.original.nrmId} </Typography>

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.