Untitled

import React, { useRef, useEffect } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const ReactTableScroll = ({ virtualizer, children, className, heightStyle }) => {
  const tbodyRef = useRef(null);

  // Handle scroll events and update virtualizer
  const handleScroll = () => {
    if (tbodyRef.current) {
      virtualizer.scrollToOffset(tbodyRef.current.getScrollTop());
    }
  };

  return (
    <Scrollbars
      ref={tbodyRef}
      onScroll={handleScroll}
      style={{ height: heightStyle }}
      className={classNames('tbodyScroll', className)}
    >
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.index}
            style={{
              position: 'absolute',
              top: `${virtualRow.start}px`,
              left: 0,
              width: '100%',
            }}
          >
            {children[virtualRow.index]}
          </div>
        ))}
      </div>
    </Scrollbars>
  );
};

ReactTableScroll.propTypes = {
  virtualizer: PropTypes.object.isRequired,
  children: PropTypes.array.isRequired,
  className: PropTypes.string,
  heightStyle: PropTypes.string,
};

export default ReactTableScroll;