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;
Leave a Comment