@krowdy-ui/views/esm/TableWindow/TableWindow.js

React components that implement Google's Material Design.

import React from 'react'; // import { TableHead, TableRow, TableBody, TableCell } from '@krowdy-ui/core'
// import { FixedSizeList as List } from 'react-window'
// import InfiniteLoader from 'react-window-infinite-loader'

import ListWindow from '../ListWindow';

function TableWindow(props) {
  var rows = props.rows,
      _props$itemHeight = props.itemHeight,
      itemHeight = _props$itemHeight === void 0 ? 50 : _props$itemHeight,
      _props$listHeight = props.listHeight,
      listHeight = _props$listHeight === void 0 ? 400 : _props$listHeight,
      pagination = props.pagination; // const isItemLoaded = index => Boolean(rows[index])

  var loadMoreItems = function loadMoreItems(startIndex, stopIndex) {
    console.log('Grover: loadMoreItems -> stopIndex', stopIndex);
    console.log('Grover: loadMoreItems -> startIndex', startIndex);
    console.log('Grover: loadMoreItems -> pagination', pagination); // pagination.page + 1
    // pagination.page
    // console.log('Grover: loadMoreItems -> args', args)
  };

  var sortOrder = 'asc';
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, rows.length ? /*#__PURE__*/React.createElement(ListWindow, {
    ItemComponent: function ItemComponent(_ref) {
      var index = _ref.index,
          style = _ref.style;
      return /*#__PURE__*/React.createElement("div", {
        style: style
      }, rows[index] ? rows[index].name : 'Loading....');
    },
    itemHeight: itemHeight,
    listHeight: listHeight,
    loadMoreItems: loadMoreItems,
    pagination: pagination,
    rows: rows,
    sortOrder: sortOrder
  }) : null))));
}

export default TableWindow;