@sheinx/base 3.0.0-alpha.1

package/esm/table/table.js

@@ -0,0 +1,469 @@
+"use strict";
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _react = _interopRequireWildcard(require("react"));
+var _scroll = _interopRequireDefault(require("../virtual-scroll/scroll"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _spin = _interopRequireDefault(require("../spin"));
+var _pagination = _interopRequireDefault(require("../pagination"));
+var _empty = _interopRequireDefault(require("../empty"));
+var _hooks = require("@sheinx/hooks");
+var _useTableSelect = _interopRequireDefault(require("./use-table-select"));
+var _colgroup = _interopRequireDefault(require("./colgroup"));
+var _thead = _interopRequireDefault(require("./thead"));
+var _tbody = _interopRequireDefault(require("./tbody"));
+var _tfoot = _interopRequireDefault(require("./tfoot"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["data"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var emptyArr = [];
+var virtualScrollerStyle = {
+  flex: 1,
+  minWidth: 0,
+  minHeight: 0,
+  overflow: 'auto',
+  width: '100%'
+};
+var scrollWrapperStyle = {
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  display: 'flex'
+};
+var _default = function _default(props) {
+  var _props$jssStyle, _props$jssStyle$table, _props$data, _columns$find;
+  var tableClasses = props === null || props === void 0 ? void 0 : (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : (_props$jssStyle$table = _props$jssStyle.table) === null || _props$jssStyle$table === void 0 ? void 0 : _props$jssStyle$table.call(_props$jssStyle);
+  var tbodyRef = (0, _react.useRef)(null);
+  var theadRef = (0, _react.useRef)(null);
+  var tfootRef = (0, _react.useRef)(null);
+  var scrollRef = (0, _react.useRef)(null);
+  var virtual = ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) && (!!props.virtual || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
+  var _props$verticalAlign = props.verticalAlign,
+    verticalAlign = _props$verticalAlign === void 0 ? 'top' : _props$verticalAlign,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'default' : _props$size,
+    _props$pagination = props.pagination,
+    pagination = _props$pagination === void 0 ? {} : _props$pagination;
+  var selection = (0, _useTableSelect.default)({
+    cellSelectable: props.cellSelectable
+  });
+  var inputableData = (0, _hooks.useInputAble)({
+    value: props.value,
+    defaultValue: undefined,
+    onChange: props.onRowSelect,
+    control: 'value' in props,
+    beforeChange: undefined
+  });
+  var getSelectData = function getSelectData() {
+    var checkboxColumn = (props.columns || emptyArr).find(function (item) {
+      return item.type === 'checkbox';
+    });
+    var selectData = props.data || emptyArr;
+    if (checkboxColumn) {
+      if (typeof checkboxColumn.filterAll === 'function') {
+        selectData = checkboxColumn.filterAll(selectData);
+      } else if (typeof checkboxColumn.rowSpan === 'function') {
+        selectData = selectData.filter(function (item, index) {
+          if (index > 0) {
+            var before = selectData[index - 1];
+            return !checkboxColumn.rowSpan(before, item);
+          }
+          return true;
+        });
+      }
+    }
+    return selectData;
+  };
+  var datum = (0, _hooks.useListSelect)({
+    data: getSelectData(),
+    value: inputableData.value,
+    multiple: !props.radio,
+    prediction: props.prediction,
+    format: props.format,
+    onChange: inputableData.onChange,
+    disabled: props.disabled
+  });
+  var _useTableColumns = (0, _hooks.useTableColumns)({
+      columns: props.columns,
+      showCheckbox: typeof props.onRowSelect === 'function'
+    }),
+    columns = _useTableColumns.columns,
+    expandHideCol = _useTableColumns.expandHideCol;
+  var _useTableLayout = (0, _hooks.useTableLayout)({
+      theadRef: theadRef,
+      tbodyRef: tbodyRef,
+      scrollRef: scrollRef,
+      columns: columns,
+      data: props.data,
+      dataChangeResize: !!props.dataChangeResize,
+      columnResizable: props.columnResizable,
+      onColumnResize: props.onColumnResize,
+      width: props.width
+    }),
+    layoutFunc = _useTableLayout.func,
+    colgroup = _useTableLayout.colgroup,
+    isScrollY = _useTableLayout.isScrollY,
+    isScrollX = _useTableLayout.isScrollX,
+    floatLeft = _useTableLayout.floatLeft,
+    floatRight = _useTableLayout.floatRight,
+    width = _useTableLayout.width,
+    shouldLastColAuto = _useTableLayout.shouldLastColAuto,
+    maxScrollLeft = _useTableLayout.maxScrollLeft,
+    scrollBarWidth = _useTableLayout.scrollBarWidth;
+  var _useTableSort = (0, _hooks.useTableSort)({
+      data: props.data,
+      sorter: props.sorter,
+      onSortCancel: props.onSortCancel,
+      columns: columns
+    }),
+    sortedData = _useTableSort.sortedData,
+    sortInfo = _useTableSort.sortInfo,
+    onSorterChange = _useTableSort.onSorterChange;
+  var _usePaginationList = (0, _hooks.usePaginationList)({
+      data: sortedData,
+      shouldPage: !!props.pagination,
+      current: pagination.current,
+      defaultCurrent: pagination.defaultCurrent,
+      pageSize: pagination.pageSize,
+      onChange: pagination.onChange,
+      loading: !!props.loading
+    }),
+    pagedData = _usePaginationList.data,
+    paginationInfo = (0, _objectWithoutProperties2.default)(_usePaginationList, _excluded);
+  var treeColumnsName = (_columns$find = columns.find(function (item) {
+    return item.treeColumnsName;
+  })) === null || _columns$find === void 0 ? void 0 : _columns$find.treeColumnsName;
+  var _useTableTree = (0, _hooks.useTableTree)({
+      data: pagedData,
+      treeColumnsName: treeColumnsName,
+      treeExpandKeys: props.treeExpandKeys,
+      defaultTreeExpandKeys: props.defaultTreeExpandKeys,
+      keygen: props.keygen,
+      onTreeExpand: props.onTreeExpand,
+      treeCheckAll: props.treeCheckAll
+    }),
+    treeFunc = _useTableTree.func,
+    treeData = _useTableTree.data,
+    isEmptyTree = _useTableTree.isEmptyTree,
+    treeExpandLevel = _useTableTree.treeExpandLevel;
+  var virtualInfo = (0, _hooks.useTableVirtual)({
+    data: virtual ? treeData : emptyArr,
+    rowsInView: props.rowsInView || 20,
+    rowHeight: props.rowHeight || 40,
+    scrollRef: scrollRef,
+    innerRef: tbodyRef,
+    scrollLeft: props.scrollLeft
+  });
+
+  // simple table sync left to head and foot
+  var setLeft = (0, _hooks.usePersistFn)(function (left) {
+    var thead = theadRef === null || theadRef === void 0 ? void 0 : theadRef.current;
+    var tfoot = tfootRef === null || tfootRef === void 0 ? void 0 : tfootRef.current;
+    [thead, tfoot].forEach(function (el) {
+      if (el) {
+        if (virtual) {
+          el.style.transform = "translate3d(-".concat(left, "px, 0, 0)");
+        } else {
+          el.parentElement.scrollLeft = left;
+        }
+      }
+    });
+    layoutFunc.checkFloat();
+  });
+
+  // handle head and  foot scroll
+  var handleHeaderWheel = (0, _hooks.usePersistFn)(function (e) {
+    e.preventDefault();
+    var scrollEl = scrollRef.current;
+    if (!scrollEl) return;
+    var max = scrollEl.scrollWidth - scrollEl.clientWidth;
+    var scrollLeft = scrollEl.scrollLeft + e.deltaX;
+    if (scrollLeft === scrollEl.scrollLeft) return;
+    scrollEl.scrollLeft = Math.min(Math.max(scrollLeft, 0), max);
+  });
+  var handleBodyScroll = (0, _hooks.usePersistFn)(function (e) {
+    var target = e.currentTarget;
+    if (!target) return;
+    setLeft(target.scrollLeft);
+    if (props.onScroll && typeof props.onScroll === 'function') {
+      var maxWidth = target.scrollWidth - target.clientWidth;
+      var maxHeight = target.scrollHeight - target.clientHeight;
+      var x = Math.min(target.scrollLeft / maxWidth, 1);
+      var y = Math.min(target.scrollTop / maxHeight, 1);
+      props.onScroll(x, y, target.scrollLeft);
+    }
+  });
+  var handleVirtualScroll = (0, _hooks.usePersistFn)(function (info) {
+    virtualInfo.handleScroll(info);
+    layoutFunc.checkFloat();
+    if (props.onScroll && typeof props.onScroll === 'function') {
+      props.onScroll(info.x, info.y, info.scrollLeft);
+    }
+  });
+  var renderEmpty = function renderEmpty() {
+    var _props$data2;
+    if ((_props$data2 = props.data) !== null && _props$data2 !== void 0 && _props$data2.length) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyWrapper,
+      children: props.empty || /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.default, {
+        jssStyle: props.jssStyle
+      })
+    });
+  };
+  var renderTable = function renderTable() {
+    var _props$data3;
+    var Group = /*#__PURE__*/(0, _jsxRuntime.jsx)(_colgroup.default, {
+      colgroup: colgroup,
+      columns: columns,
+      shouldLastColAuto: !!shouldLastColAuto
+    });
+    var bodyCommonProps = {
+      hover: props.hover,
+      disabled: props.disabled,
+      rowClickAttr: props.rowClickAttr,
+      jssStyle: props.jssStyle,
+      columns: columns,
+      data: treeData,
+      treeExpandLevel: treeExpandLevel,
+      treeFunc: treeFunc,
+      colgroup: colgroup,
+      isScrollX: isScrollX,
+      expandHideCol: expandHideCol,
+      keygen: props.keygen,
+      rowClassName: props.rowClassName,
+      expandKeys: props.expandKeys,
+      datum: datum,
+      treeEmptyExpand: props.treeEmptyExpand,
+      isEmptyTree: isEmptyTree,
+      treeColumnsName: treeColumnsName,
+      striped: props.striped,
+      radio: props.radio,
+      onRowClick: props.onRowClick,
+      rowEvents: props.rowEvents
+    };
+    var headCommonProps = {
+      disabled: props.disabled,
+      jssStyle: props.jssStyle,
+      columns: columns,
+      data: pagedData,
+      colgroup: colgroup,
+      sortInfo: sortInfo,
+      onSorterChange: onSorterChange,
+      dragCol: layoutFunc.dragCol,
+      resizeCol: layoutFunc.resizeCol,
+      onColumnResize: props.onColumnResize,
+      columnResizable: props.columnResizable,
+      showSelectAll: props.showSelectAll,
+      datum: datum,
+      renderSorter: props.renderSorter,
+      radio: props.radio,
+      treeColumnsName: treeColumnsName
+    };
+    var footCommonProps = {
+      summary: props.summary,
+      columns: columns,
+      jssStyle: props.jssStyle,
+      colgroup: colgroup
+    };
+    var headWrapperClass = (0, _classnames.default)(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper, isScrollY && scrollBarWidth && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.scrollY));
+    var footWrapperClass = (0, _classnames.default)(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.footWrapper, isScrollY && scrollBarWidth && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.scrollY));
+    if (virtual) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [!props.hideHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: headWrapperClass,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+            style: {
+              width: width,
+              transform: "translate3d(-".concat(virtualInfo.innerLeft, "px, 0, 0)")
+            },
+            ref: theadRef,
+            children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_thead.default, _objectSpread(_objectSpread({}, headCommonProps), {}, {
+              fixLeftNum: virtualInfo.innerLeft,
+              fixRightNum: maxScrollLeft - virtualInfo.innerLeft
+            }))]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_scroll.default, {
+          style: scrollWrapperStyle,
+          scrollerStyle: virtualScrollerStyle,
+          wrapperRef: scrollRef,
+          scrollWidth: width || 1,
+          scrollHeight: virtualInfo.scrollHeight,
+          onScroll: handleVirtualScroll,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+            style: {
+              width: width,
+              transform: virtualInfo.getTranslate()
+            },
+            ref: tbodyRef,
+            children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tbody.default, _objectSpread(_objectSpread({}, bodyCommonProps), {}, {
+              currentIndex: virtualInfo.startIndex,
+              data: virtualInfo.data,
+              setRowHeight: virtualInfo.setRowHeight,
+              fixLeftNum: virtualInfo.innerLeft,
+              fixRightNum: maxScrollLeft - virtualInfo.innerLeft
+            }))]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: footWrapperClass,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+            style: {
+              width: width,
+              transform: "translate3d(-".concat(virtualInfo.innerLeft, "px, 0, 0)")
+            },
+            ref: tfootRef,
+            children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tfoot.default, _objectSpread(_objectSpread({}, footCommonProps), {}, {
+              fixLeftNum: virtualInfo.innerLeft,
+              fixRightNum: maxScrollLeft - virtualInfo.innerLeft
+            }))]
+          })
+        })]
+      });
+    }
+    if (!isScrollY && !props.sticky && (_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: scrollRef,
+      className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.bodyWrapper,
+      onScroll: handleBodyScroll,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+        style: {
+          width: width
+        },
+        ref: tbodyRef,
+        children: [Group, !props.hideHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(_thead.default, _objectSpread({}, headCommonProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tbody.default, _objectSpread({}, bodyCommonProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tfoot.default, _objectSpread({}, footCommonProps))]
+      })
+    });
+    var sticky = props.sticky === true ? {
+      top: 0
+    } : props.sticky || {
+      top: undefined
+    };
+    var top = sticky.top;
+    var stickyStyle = top !== undefined ? {
+      top: top,
+      position: 'sticky'
+    } : undefined;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!props.hideHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: headWrapperClass,
+        style: stickyStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+          style: {
+            width: width
+          },
+          ref: theadRef,
+          children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_thead.default, _objectSpread({}, headCommonProps))]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: scrollRef,
+        className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.bodyWrapper,
+        onScroll: handleBodyScroll,
+        style: {
+          height: '100%'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+          style: {
+            width: width
+          },
+          ref: tbodyRef,
+          children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tbody.default, _objectSpread({}, bodyCommonProps))]
+        }), renderEmpty()]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: footWrapperClass,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+          style: {
+            width: width
+          },
+          ref: tfootRef,
+          children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tfoot.default, _objectSpread({}, footCommonProps))]
+        })
+      })]
+    });
+  };
+  var renderLoading = function renderLoading() {
+    if (!props.loading) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.loading),
+      children: props.loading === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_spin.default, {
+        jssStyle: props.jssStyle,
+        size: 24,
+        name: "ring"
+      }) : null
+    });
+  };
+  var renderPagination = function renderPagination() {
+    if (!props.pagination) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagination.default, _objectSpread(_objectSpread({
+      className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.pagination,
+      jssStyle: props.jssStyle,
+      align: "right"
+    }, paginationInfo), pagination));
+  };
+  (0, _react.useEffect)(function () {
+    // 绑定 wheel 事件
+    if (theadRef.current && theadRef.current.parentElement) {
+      theadRef.current.parentElement.addEventListener('wheel', handleHeaderWheel, {
+        passive: false
+      });
+    }
+    if (tfootRef.current && tfootRef.current.parentElement) {
+      tfootRef.current.parentElement.addEventListener('wheel', handleHeaderWheel, {
+        passive: false
+      });
+    }
+    return function () {
+      if (theadRef.current && theadRef.current.parentElement) {
+        theadRef.current.parentElement.removeEventListener('wheel', handleHeaderWheel);
+      }
+      if (tfootRef.current && tfootRef.current.parentElement) {
+        tfootRef.current.parentElement.removeEventListener('wheel', handleHeaderWheel);
+      }
+    };
+  }, [theadRef.current, isScrollY]);
+  var tableFunc = (0, _hooks.useLatestObj)({
+    scrollToIndex: virtualInfo.scrollToIndex
+  });
+  (0, _react.useEffect)(function () {
+    if (props.tableRef) {
+      props.tableRef(tableFunc);
+    }
+  }, []);
+  var tableWrapperClass = (0, _classnames.default)(props.className, tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.wrapper, props.bordered && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.bordered), verticalAlign === 'top' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.verticalAlignTop), verticalAlign === 'middle' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.verticalAlignMiddle), size === 'small' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.small), size === 'large' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.large), size === 'default' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.default));
+  if (!props.columns || columns.length === 0) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(tableWrapperClass, tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.simple, props.striped && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.striped)),
+    style: _objectSpread({
+      height: props.height
+    }, props.style),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+      style: {
+        width: width
+      },
+      children: props.children
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+      className: (0, _classnames.default)(tableWrapperClass, floatLeft && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.floatLeft), floatRight && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.floatRight), props.sticky && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.sticky)),
+      style: _objectSpread({
+        height: props.height
+      }, props.style)
+    }, selection.getTableProps()), {}, {
+      children: [renderTable(), renderLoading(), props.children]
+    })), renderPagination()]
+  });
+};
+exports.default = _default;