How to get renderDetails Panel to work on Virtualized Table

[Calebvh]

Posting here since I'm not sure if this is a bug or not.

I am having issues with the renderDetailsPanel option on a virtualized table. This option works great if I move to a paginated tabled with options ("enablePagination" and removing "enableRowVirtualization") however if I am using virtualization the details panel is expanded over the rows below it and it's z-index is too low to go above the border lines of the row below it.

Below is what I'm seeing with a red background for the div in the panel and dark blue for the panel itself.

Opening multiple results in many of the rows no longer being visible

I was wondering if anyone had a similar issue or knows of how to resolve this?

To reproduce, you should be able to use any dataset you want but just with virtualization enabled. Below is my current configuration that is experiencing this issue.
`

<MaterialReactTable

        columns={columns}
        data={Object.values(statusList)}
        enableBottomToolbar={false}
        enableGlobalFilterModes
        enablePagination={false}
        enableDensityToggle={false}
        enableColumnFilters={false}
        enableRowVirtualization
        initialState={{columnVisibility: {storeId: false, pluCount: false,totalMemory: false,freeMemory: false }}}
        muiTableContainerProps={{ sx: { maxHeight: '800px' } }}
        onSortingChange={setSorting}
        state={{ isLoading, sorting }}
        renderDetailPanel={({row}) => (
            <div style={{ padding: '10px', backgroundColor: "rgba(255, 49, 64, 1)"}}>
                <h3>Details</h3>
                <p>Device IP: {row.original.ipAddress}</p>
                <p>Device Name: {row.original.hostname}</p>
                <p>Device Status: {row.original.statusMessage}</p>
                <p>Device Version: {row.original.applicationVersion}</p>
            </div>
        )}
        rowVirtualizerInstanceRef={rowVirtualizerInstanceRef} //optional
        rowVirtualizerProps={{ overscan: 8 }} //optionally customize the virtualizer
    />

`

[KevinVandy]

Yes that kind of is a limitation/bug with react-virtual right now. It can be fixed in the future, but will take a lot of fiddling with the row virtualizer to account for the extra rows.

In the meantime, adding

muiTableProps={{
  sx: {
    borderCollapse: 'collapse',
  }
}}

might get rid of those lines.

or maybe add position relative and a higher z-index to the detail panel component

[Calebvh]

Thanks for the quick response! I figured there was some weird limitation. I'll play around with it a bit more and see if I can find an acceptable workaround