Prevent React table from scrolling to top on update

Question

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

Answer 1

For anyone who runs into this issue in the future, I solved by moving the table into new component and putting it in the div

const myTable = () => {
   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 (
       <Table className="table table-striped">
                <Thead>
                  <Tr>
                    <Th>TH1</Th>...
                    <Th>TH2</Th>
                  </Tr>
                </Thead>
                {<Tbody>{tableContent}</Tbody>}
              </Table>}
)

}


const pageContent = () = {
    return (
      <Div className="round-card page-content-table table-responsive padding-20">
            <myTable></myTable>
       </Div>)
    )

}