I have a react table that contains information in my Electron application. However, whenever data in the table is updated or a button is clicked, the table scrolls to the top, frustrating users.

Example code is as follows:

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>)

How can I avoid these scroll jumps in the element during updates?

Update:

I was able to get the scroll position to save however, when the table updates, the scroll is stuck to the previous point, making it impossible for users to scroll when the table is updating. Any way to avoid this?

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]);