components/ScrollTable.js

import React, { Component } from 'react';

/**
 * @module ScrollTable
 */
/**
 * @typedef {object} props
 * @property {boolean} isFetched
 * @property {Array<view>} children
 * @property {boolean} hasMenu
 * @property {boolean} hideScroll
 * @property {Function} loadMore
 */
export default class ScrollTable extends Component {
  /**
   * Create event listener for table scroll
   *
   * @returns {void}
   */
  componentDidMount() {
    // eslint-disable-next-line sonarjs/no-duplicate-string
    const tableView = document.getElementById('table-view');

    if (tableView) {
      tableView.addEventListener('scroll', this.scrollListerner);
    }
  }

  componentWillUnmount() {
    const tableView = document.getElementById('table-view');
    tableView.removeEventListener('scroll', this.scrollListerner);
  }

  scrollListerner = () => {
    const tableView = document.getElementById('table-view');
    const bottomPosition = tableView.scrollHeight - tableView.scrollTop - tableView.clientHeight;
    const bottomOffset = 40;

    if (this.props.isFetched && bottomPosition <= bottomOffset && !this.props.isLastRecord) {
      this.props.loadMore();
    }
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="table-wrapper mt-20">
        {this.props.hasMenu && <div className="scroll-fade" />}
        <div className={`table-responsive table-fix-10 ${this.props.hideScroll && 'overflow-hidden'}`} id="table-view">
          {this.props.children}
        </div>
      </div>
    );
  }
}