react-tbl/dist/tableMaker.js

A lightweight & easy to use react table implementation.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useState, useContext } from 'react';
import TableHead from './tableHead';
import TableBody from './tableBody';
import { ReactTblContext, TblWrapper, Loading, EmptyData } from './common';
import { Pagination } from './pagination';

var TableMaker = function TableMaker(_ref) {
  var columns = _ref.columns,
      data = _ref.data;

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      currentDataPage = _useState2[0],
      setCurrentDataPage = _useState2[1];

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      page = _useState4[0],
      setPage = _useState4[1];

  var _useContext = useContext(ReactTblContext),
      isVisible = _useContext.pagination.isVisible,
      backgroundColor = _useContext.tableHeader.backgroundColor,
      table = _useContext.table,
      isLoading = _useContext.isLoading,
      defaultPageSize = _useContext.defaultPageSize,
      _useContext$body = _useContext.body,
      overflowY = _useContext$body.overflowY,
      minHeight = _useContext$body.minHeight,
      bodyOverFlowX = _useContext$body.overflowX;

  useEffect(function () {
    handlePages();
  }, [page, data.length, defaultPageSize]);

  var handlePages = function handlePages() {
    if (data && Array.isArray(data) && data.length > 0) {
      if (page === 0) {
        var pageData = data === null || data === void 0 ? void 0 : data.slice(0, defaultPageSize);
        setCurrentDataPage(pageData);
      } else {
        var startChunk = page * defaultPageSize;
        var endChunk = startChunk + defaultPageSize;

        var _pageData = data === null || data === void 0 ? void 0 : data.slice(startChunk, endChunk);

        for (var i = _pageData.length; i < defaultPageSize; i++) {
          _pageData.push({
            empty: true
          });
        }

        setCurrentDataPage(_pageData);
      }
    } else {
      setCurrentDataPage([]);
    }
  };

  var sortDataArray = function sortDataArray(columnType) {
    var high = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

    var sortedData = _toConsumableArray(currentDataPage).sort(function (a, b) {
      if (a[columnType] < b[columnType]) {
        return high ? -1 : 1;
      }

      if (a[columnType] > b[columnType]) {
        return high ? 1 : -1;
      }

      return 0;
    });

    setCurrentDataPage(sortedData);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TblWrapper, {
    className: "scroller",
    tableMaxHeight: table === null || table === void 0 ? void 0 : table.maxHeight,
    backgroundColor: backgroundColor,
    minHeight: minHeight,
    overflowY: overflowY,
    fontFamily: table === null || table === void 0 ? void 0 : table.fontFamily,
    maxWidth: table === null || table === void 0 ? void 0 : table.maxWidth,
    overflowX: table === null || table === void 0 ? void 0 : table.overflowX,
    bodyOverFlowX: bodyOverFlowX
  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(TableHead, {
    columns: columns,
    sortArray: sortDataArray
  }), isLoading ? /*#__PURE__*/React.createElement(Loading, {
    minHeight: minHeight
  }) : ((currentDataPage === null || currentDataPage === void 0 ? void 0 : currentDataPage.length) !== 0 && (columns === null || columns === void 0 ? void 0 : columns.length)) !== 0 ? /*#__PURE__*/React.createElement(TableBody, {
    currentDataPage: currentDataPage,
    columns: columns,
    setCurrentDataPage: setCurrentDataPage
  }) : /*#__PURE__*/React.createElement(EmptyData, {
    minHeight: minHeight
  }))), isVisible && /*#__PURE__*/React.createElement(Pagination, {
    setPage: setPage,
    page: page,
    totalDataLength: data.length
  }));
};

export default TableMaker;