Bug #22379
open
Refactor Virtualized lists
Description
The primary goal of this issue is to remove the MUI errors that appear in the browser console when viewing a virtualized list in Workbench. The problem is that the Autosizer and FixedSizeList elements each return a div wrapping the child elements, the last of which is a TableRow. MUI throws a validateDOMNesting warning because the only legal child of a TableBody is a TableRow, and the current implementation adds two divs between them.
A possible solution is to bump MUI to 6^ to take advantage of the virtualized table support:
https://mui.com/material-ui/migration/upgrade-to-v6/
https://mui.com/material-ui/react-table/#virtualized-table
It is also possible that the warning could be eliminated by manipulating the innerElement/outerElement props on those two components, but I tried and could not come up with a solution that both removed the warning and rendered the table properly.
Updated by