Busco ayuda para resolver el problema que encontré recientemente mientras trabajaba con React-Window y MUI Collapsible Table Rows.

En general, la fila de representación de la ventana de reacción para cada uno de mis elementos en la matriz, con parte del contenido oculto hasta que presionemos la flecha. Al pulsar, debajo de nuestra columna aparece una nueva con contenido oculto.

 function Row({ index, style }) { const [showList, toggleShowList] = useState(false); return ( <Fragment> <TableRow sx={style}> <TableCell>Visable Row:{index}</TableCell> <TableCell> <IconButton aria-label="expand row" size="small" onClick={() => toggleShowList(!showList)} > {showList ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} </IconButton> </TableCell> </TableRow> <TableRow sx={{ style, display: showList ? "table-row" : "none" }}> <TableCell>hidden row:{index}</TableCell> </TableRow> </Fragment> ); }

El ejemplo anterior se basa en la página del componente Tabla MUI . El problema surge cuando lo paso a React-Window porque muestra contenido oculto fuera de lugar.

Intento usar useRef() para calcular la altura de la fila, pero no tiene efecto en el elemento oculto .

Estoy abierto a sugerencias y soluciones. Creé un ejemplo en el código Sandbox con cómo funciona realmente y cómo (debería) quiero que funcione.