Tengo una tabla de reacción que contiene información en mi aplicación Electron. Sin embargo, cada vez que se actualizan los datos de la tabla o se hace clic en un botón, la tabla se desplaza hacia la parte superior, frustrando a los usuarios.

El código de ejemplo es el siguiente:

 const tableContent = listItem.map((item: any, index: number) => { return ( <Tr key={index.toString()} className="section"> <Td>{item.<item1>}</Td> <Td> <Icon onClick={() => exampleFunction()} /> </Td> </Tr> ); }); return ( <Div className="round-card page-content-table table-responsive padding-20"> {<Table className="table table-striped"> <Thead> <Tr> <Th>TH1</Th>... <Th>TH2</Th> </Tr> </Thead> {<Tbody>{tableContent}</Tbody>} </Table>} </Div>)

¿Cómo puedo evitar estos saltos de desplazamiento en el elemento durante las actualizaciones?

Actualizar:

Pude obtener la posición de desplazamiento para guardar, sin embargo, cuando la tabla se actualiza, el desplazamiento se atasca en el punto anterior, lo que hace imposible que los usuarios se desplacen cuando la tabla se está actualizando. ¿Alguna forma de evitar esto?

 const [scrollPostion, setScrollPosition] = useState( parseInt(localStorage.getItem('scrollPos')) || 0 ); const TableRef = useRef(null); const scrollEvent = (e) => { setScrollPosition(e.target.scrollTop); localStorage.setItem('scrollPos', scrollPostion.toString()); }; React.useEffect(() => { localStorage.setItem('scrollPos', scrollPostion.toString()); }, [scrollPostion]);