@aloudata/aloudata-design 0.3.1 → 0.3.4

package/es/Table/Table.js

@@ -1,10 +1,3 @@
-var _excluded = ["style"],
-    _excluded2 = ["style"];
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 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) { _defineProperty(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; }
@@ -25,22 +18,22 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 /* eslint-disable no-unneeded-ternary */
 /// <reference types ='./react-table-config' />
-import _ from 'lodash';
 import classnames from 'classnames';
-import Descending from '../Icon/icons/SortDescendingLine';
-import Ascending from '../Icon/icons/SortAscendingLine';
-import LoadingIcon from '../Icon/icons/Loading';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import usePrefixCls from '../_utils/hooks/usePrefixCls';
-import InfiniteScroll from 'react-infinite-scroll-component';
 import ResizeObserver from 'rc-resize-observer';
-import Empty from '../Empty';
-import { useTable, useBlockLayout, useRowSelect, useSortBy, useResizeColumns } from 'react-table'; // import './style/index';
-
-var ARRAY_FIRST_INDEX = 0;
-var DEFAULT_ROW_WIDTH = 0;
-var DEFAULT_BODY_HEIGHT = 0;
-var EMPTY_LENGTH = 0; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { useTable, useBlockLayout, useRowSelect, useSortBy, useResizeColumns } from 'react-table';
+import { getColumnsWidthMap, getValidScrollThreshold } from './utils';
+import './style/index';
+import message from '../message';
+import Loading from './components/Loading';
+import Empty from './components/Empty';
+import TableHead from './components/TableHead';
+import TableBodyRowList from './components/TableBodyRowList';
+import { useTimeoutLock } from './hooks/useFrame';
+var TABLE_HEAD_ROW_HEIGHT = 48;
+var SCROLLBAR_SIZE = 15;
+var ZERO = 0;
 
 function Table(props, ref) {
   var _classnames3;
@@ -59,79 +52,78 @@ function Table(props, ref) {
       allSortDirections = props.sortDirections,
       _props$onChange = props.onChange,
       onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
-      _props$innerScroll = props.innerScroll,
-      innerScroll = _props$innerScroll === void 0 ? false : _props$innerScroll,
       _props$scrollThreshol = props.scrollThreshold,
       scrollThreshold = _props$scrollThreshol === void 0 ? '150px' : _props$scrollThreshol,
       _props$rowClassName = props.rowClassName,
       rowClassName = _props$rowClassName === void 0 ? '' : _props$rowClassName,
       _props$ellipsis = props.ellipsis,
       ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
-      rowKey = props.rowKey;
+      rowKey = props.rowKey,
+      height = props.height;
 
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectedRowId = _React$useState2[0],
-      setSelectedRowId = _React$useState2[1];
-
-  var tableBodyListRef = useRef(null);
-  var tableRef = useRef(null);
-
-  var _useState = useState(DEFAULT_BODY_HEIGHT),
+  var _useState = useState(ZERO),
       _useState2 = _slicedToArray(_useState, 2),
       tableClientWidth = _useState2[0],
       setTableClientWidth = _useState2[1];
 
-  var RANDOM_ID = "INNER_SCROLL_ID_".concat(Math.random());
-
-  var _useState3 = useState(DEFAULT_ROW_WIDTH),
+  var _useState3 = useState(ZERO),
       _useState4 = _slicedToArray(_useState3, 2),
-      width = _useState4[0],
-      setWidth = _useState4[1]; // 如果页面整体宽度变化则重新计算
+      tableClientHeight = _useState4[0],
+      setTableClientHeight = _useState4[1];
+
+  var prefixCls = usePrefixCls('', 'ald-table');
+  var tableRef = useRef(null);
+  var tableHeadRef = useRef(null);
+  var tableBodyRef = useRef(null);
+  var columnsRef = useRef([]);
+  var columnsWidthMapRef = useRef();
+  var columnsTotalWidthRef = useRef(ZERO);
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      loadMoreLoading = _useState6[0],
+      setLoadMoreLoading = _useState6[1];
+
+  var lastOffsetLeftRef = useRef(ZERO);
+  var lastOffsetTopRef = useRef(ZERO);
+
+  var _useTimeoutLock = useTimeoutLock(),
+      _useTimeoutLock2 = _slicedToArray(_useTimeoutLock, 2),
+      setScrollTarget = _useTimeoutLock2[0],
+      getScrollTarget = _useTimeoutLock2[1]; // 记录初始columns, 后续更改不响应
+
+
+  if (columns && columnsRef.current.length === ZERO) {
+    columnsRef.current = columns;
+  } // 初始化进入时 渲染表格容器宽度
 
 
   useEffect(function () {
     if (tableRef.current) {
       setTableClientWidth(tableRef.current.clientWidth);
     }
-  }, [width]);
-  var initialColumnsWidthMap = useMemo(function () {
-    var map = new Map();
-
-    if (tableClientWidth !== DEFAULT_BODY_HEIGHT) {
-      var noGivenColumns = 0;
-      var givenColumnsTotalWidth = 0;
-      columns.forEach(function (column) {
-        if (column.width) {
-          map.set(column.dataIndex, column.width);
-          givenColumnsTotalWidth += column.width;
-        } else {
-          noGivenColumns += 1;
-        }
-      });
-      var averageWidth = (tableClientWidth - givenColumnsTotalWidth) / noGivenColumns;
-      return {
-        columnMap: map,
-        averageWidth: averageWidth
-      };
-    }
+  }, []); // 转换外部传入的columns
 
-    columns.forEach(function (column) {
-      if (column.width) {
-        map.set(column.dataIndex, column.width);
-      }
-    });
-    return {
-      columnMap: map,
-      averageWidth: DEFAULT_ROW_WIDTH
-    };
-  }, [columns, tableClientWidth]);
   var newColumns = useMemo(function () {
-    return columns.map(function (column) {
+    var _getColumnsWidthMap = getColumnsWidthMap(columnsRef.current, tableClientWidth, columnsWidthMapRef.current),
+        columnsWidthMap = _getColumnsWidthMap.columnsWidthMap,
+        totalColumnWidth = _getColumnsWidthMap.totalColumnWidth;
+
+    columnsWidthMapRef.current = columnsWidthMap;
+    columnsTotalWidthRef.current = totalColumnWidth;
+    return columnsRef.current.map(function (column, index) {
+      var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
+
+      var key = index.toString(); // 不设置dataIndex同时进行排序 则报错
+
+      if (!column.dataIndex === undefined && sortable) {
+        message.error('不支持未设置dataIndex时进行排序设置');
+      }
+
       return _objectSpread(_objectSpread({}, column), {}, {
-        width: initialColumnsWidthMap.columnMap.get(column.dataIndex) || initialColumnsWidthMap.averageWidth,
+        width: (_columnsWidthMapRef$c = columnsWidthMapRef.current) === null || _columnsWidthMapRef$c === void 0 ? void 0 : (_columnsWidthMapRef$c2 = _columnsWidthMapRef$c.get(key)) === null || _columnsWidthMapRef$c2 === void 0 ? void 0 : _columnsWidthMapRef$c2.width,
         Header: column.title ? column.title : function () {
-          return null;
+          return /*#__PURE__*/React.createElement("span", null, "\xA0");
         },
         disableSortBy: !sortable || typeof column.sorter === 'boolean',
         accessor: column.dataIndex,
@@ -142,51 +134,10 @@ function Table(props, ref) {
         }
       });
     });
-  }, [columns, sortable, initialColumnsWidthMap]); // 默认排序的对象
+  }, [sortable, tableClientWidth]); // 将rowId转为React Table支持的值
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  var defaultSortObject = {
-    id: newColumns[ARRAY_FIRST_INDEX].accessor,
-    desc: newColumns[ARRAY_FIRST_INDEX].sortOrder && newColumns[ARRAY_FIRST_INDEX].sortOrder === 'descend' ? true : false
-  }; // 如果支持排序 但是没有默认排序 则默认按第一列倒叙排序
-
-  var getInitialSortDirection = function getInitialSortDirection() {
-    if (defaultSort && defaultSort.id) {
-      return defaultSort;
-    }
-
-    if (sortable) {
-      return defaultSortObject;
-    }
-
-    return {
-      id: '',
-      desc: false
-    };
-  };
-
-  var _React$useState3 = React.useState(getInitialSortDirection()),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      sortDirection = _React$useState4[0],
-      setSortDirection = _React$useState4[1];
-
-  var getInitSortBy = function getInitSortBy() {
-    if (!(sortDirection === null || sortDirection === void 0 ? void 0 : sortDirection.id)) {
-      return [];
-    }
-
-    var sortColumn = newColumns.find(function (column) {
-      return column.accessor === sortDirection.id;
-    });
-
-    if (sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sorter) {
-      return [];
-    }
-
-    return [sortDirection];
-  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-  var getRowIdFn = function getRowIdFn(row, relativeIndex, parent) {
+  var transformRowId = function transformRowId(row, relativeIndex, parent) {
     if (rowKey && parent) {
       if (typeof rowKey === 'string') {
         return [rowKey, relativeIndex].join('.');
@@ -198,6 +149,24 @@ function Table(props, ref) {
     }
 
     return relativeIndex.toString();
+  }; // 计算初始传递给 React Table的排序字段
+
+
+  var getTableInitSort = function getTableInitSort() {
+    if (defaultSort && defaultSort.id) {
+      return [defaultSort];
+    }
+
+    var firstColumnSortData = {
+      id: newColumns[ZERO].accessor,
+      desc: !!(newColumns[ZERO].sortOrder && newColumns[ZERO].sortOrder === 'descend')
+    };
+
+    if (firstColumnSortData.id) {
+      return [firstColumnSortData];
+    }
+
+    return [];
   };
 
   var _useTable = useTable({
@@ -205,9 +174,9 @@ function Table(props, ref) {
     data: data,
     disableMultiSort: true,
     disableSortBy: !sortable,
-    getRowId: getRowIdFn,
+    getRowId: transformRowId,
     initialState: {
-      sortBy: getInitSortBy()
+      sortBy: getTableInitSort()
     }
   }, useBlockLayout, useSortBy, useRowSelect, useResizeColumns),
       getTableProps = _useTable.getTableProps,
@@ -215,259 +184,183 @@ function Table(props, ref) {
       headerGroups = _useTable.headerGroups,
       rows = _useTable.rows,
       prepareRow = _useTable.prepareRow,
-      setSortBy = _useTable.setSortBy,
-      totalColumnsWidth = _useTable.totalColumnsWidth;
+      setSortBy = _useTable.setSortBy;
 
-  var theadRowWidthRef = React.useRef(DEFAULT_ROW_WIDTH);
-  var prefixCls = usePrefixCls('', 'ald-table');
-  var onRowClick = useCallback(function (row) {
-    if (!onRowSelected) {
-      return;
+  var scrollToTop = function scrollToTop() {
+    var INITIAL_OFFSET_TOP = 0;
+
+    if (tableBodyRef && tableBodyRef.current) {
+      tableBodyRef.current.scrollTop = INITIAL_OFFSET_TOP;
     }
+  };
 
-    setSelectedRowId(row.id);
-    onRowSelected(row.original);
-  }, [onRowSelected]); // 排序的方向 倒叙{ id: 'xx', desc: true }、正序{ id: 'xx', desc: false }、无序 { id: '', desc: undefined }
-  // 获取排序方向以及排序的id
-
-  var getSortBy = function getSortBy(id) {
-    var sortDirections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['ascend', 'descend'];
-    var // 如果传了sortDirections，则使用传入的，否则使用默认的
-    sortOrder = arguments.length > 2 ? arguments[2] : undefined;
-    var res = {
-      id: id,
-      desc: undefined
+  React.useImperativeHandle(ref, function () {
+    return {
+      backToTop: function backToTop() {
+        scrollToTop();
+      }
     };
-    var isSameCol = sortDirection.id === id;
-    var descMap = new Map([['ascend', false], ['descend', true]]);
-    var directions = allSortDirections || sortDirections; // 如果不是同一列 则返回默认排序 或者排序顺序的第一个
-
-    if (!isSameCol) {
-      if (sortOrder === 'ascend' || sortOrder === 'descend') {
-        res.desc = descMap.get(sortOrder);
-      } else {
-        res.desc = sortOrder ? sortOrder : descMap.get(directions[ARRAY_FIRST_INDEX]);
+  });
+  var tableHeadNode = /*#__PURE__*/React.createElement(TableHead, {
+    canResizeColumn: resizeColumn,
+    headerGroups: headerGroups,
+    tableContentWidth: columnsTotalWidthRef.current,
+    defaultSort: defaultSort,
+    sortable: sortable,
+    columns: newColumns,
+    sortDirections: allSortDirections,
+    setSortBy: setSortBy,
+    onChange: onChange,
+    columnsWidthMapRef: columnsWidthMapRef,
+    columnsTotalWidthRef: columnsTotalWidthRef
+  });
+  var tableRowListNode = /*#__PURE__*/React.createElement(TableBodyRowList, {
+    data: data,
+    rows: rows,
+    prepareRow: prepareRow,
+    columnsTotalWidthRef: columnsTotalWidthRef,
+    rowClassName: rowClassName,
+    ellipsis: ellipsis,
+    onRowSelected: onRowSelected
+  }); // 渲染没有设置高度的表格
+
+  var renderTableWithoutHeight = function renderTableWithoutHeight() {
+    var renderNoHeightTableBody = function renderNoHeightTableBody() {
+      if (loading && !rows.length) {
+        return /*#__PURE__*/React.createElement(Loading, null);
       }
 
-      return res;
-    } // 如果是同一列
-    // 如果列给了默认的sortOrder则不在变化
+      if (!loading && !rows.length) {
+        return /*#__PURE__*/React.createElement(Empty, null);
+      }
 
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-list")
+      }, tableRowListNode);
+    };
 
-    if (sortOrder === 'ascend' || sortOrder === 'descend') {
-      res.desc = descMap.get(sortOrder);
-      return res;
-    } // 在所有方向上 往后取一个
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames("".concat(prefixCls, "-inner-wrap"))
+    }, tableHeadNode, /*#__PURE__*/React.createElement("div", Object.assign({}, getTableBodyProps(), {
+      className: classnames("".concat(prefixCls, "-tbody")),
+      style: {
+        width: columnsTotalWidthRef.current
+      }
+    }), renderNoHeightTableBody()));
+  };
 
+  var forceScroll = useCallback(function (scrollLeftNum, target) {
+    if (!target) {
+      return;
+    }
 
-    var lastSortDirection = sortDirection.desc ? 'descend' : 'ascend';
+    if (typeof target === 'function') {
+      target(scrollLeftNum);
+    } else if (target.scrollLeft !== scrollLeftNum) {
+      // eslint-disable-next-line no-param-reassign
+      target.scrollLeft = scrollLeftNum;
+    }
+  }, []); // 内部滚动时 纵向的滚动
 
-    var index = _.findIndex(directions, function (item) {
-      return item === lastSortDirection;
-    });
+  var onBodyVerticalScroll = useCallback(function (target) {
+    var scrollHeight = target.scrollHeight,
+        clientHeight = target.clientHeight,
+        scrollTop = target.scrollTop;
+    var currentPosToBottomGap = scrollHeight - clientHeight - scrollTop;
+    var scrollThresholdValue = getValidScrollThreshold(scrollThreshold, tableClientHeight);
 
-    var nextIndex = index + 1;
-    res.desc = descMap.get(directions[nextIndex]); // 如果没有排序方向，则返回默认排序对象
+    if (currentPosToBottomGap < scrollThresholdValue && hasNextPage && !loadMoreLoading) {
+      var _loadMore;
 
-    if (res.desc === undefined) {
-      res.id = '';
+      setLoadMoreLoading(true);
+      (_loadMore = loadMore()) === null || _loadMore === void 0 ? void 0 : _loadMore.then(function () {
+        setLoadMoreLoading(false);
+      });
     }
 
-    return res;
-  };
-
-  var getHeaderProps = function getHeaderProps(column) {
-    // @ts-ignore
-    var id = column.id,
-        canSort = column.canSort,
-        sorter = column.sorter,
-        sortOrder = column.sortOrder,
-        sortDirections = column.sortDirections;
-    var toggleProps = column.getSortByToggleProps(); // 仅在Table设置sortable时,所有列的canSort为true,此时为前端排序
-
-    if (canSort) {
-      // client sort
-      return _objectSpread(_objectSpread({}, column.getHeaderProps(_objectSpread({}, toggleProps))), {}, {
-        onClick: function onClick(e) {
-          e.stopPropagation();
-
-          if (typeof toggleProps.onClick === 'function') {
-            var sortBy = getSortBy(id, sortDirections, sortOrder);
-            setSortBy(sortBy.desc === undefined ? [defaultSortObject] : [sortBy]); // 客户端排序时 需要重新设置排序
-
-            setSortDirection(sortBy);
-            onChange(sortBy);
-          }
-        }
-      });
-    } // 当列设置sorter属性时，则为服务端排序
+    lastOffsetTopRef.current = scrollTop;
+  }, [hasNextPage, loadMore, loadMoreLoading, scrollThreshold, tableClientHeight]); // 内部滚动 对于滚动的处理
 
+  var onBodyScroll = useCallback(function (e) {
+    var currentTarget = e.target;
 
-    if (sorter) {
-      // server sort
-      return _objectSpread(_objectSpread({}, column.getHeaderProps({
-        style: {
-          cursor: 'pointer'
-        }
-      })), {}, {
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          var sortBy = getSortBy(id, sortDirections, sortOrder);
-          setSortDirection(sortBy);
-          onChange(sortBy);
-        }
-      });
+    if (!currentTarget) {
+      return;
     }
 
-    return column.getHeaderProps();
-  };
-
-  var SortIcons = function SortIcons(_ref2) {
-    var id = _ref2.id;
-    var currentSortId = sortDirection.id,
-        desc = sortDirection.desc;
+    var scrollLeftNum = currentTarget.scrollLeft;
+    var scrollTopNum = currentTarget.scrollTop; // 纵向滚动
 
-    if (id !== currentSortId || !sortable) {
-      return null;
+    if (scrollTopNum !== lastOffsetLeftRef.current) {
+      onBodyVerticalScroll(currentTarget);
     }
 
-    return desc ? /*#__PURE__*/React.createElement(Descending, {
-      className: "".concat(prefixCls, "-sortIcon"),
-      fill: "currentColor",
-      size: 12
-    }) : /*#__PURE__*/React.createElement(Ascending, {
-      className: "".concat(prefixCls, "-sortIcon"),
-      fill: "currentColor",
-      size: 12
-    });
-  };
+    if (scrollLeftNum === lastOffsetLeftRef.current) {
+      return;
+    }
 
-  var scrollToTop = function scrollToTop() {
-    var INITIAL_OFFSET_TOP = 0;
+    var compareTarget = currentTarget; // 横向滚动
 
-    if (tableBodyListRef && tableBodyListRef.current) {
-      tableBodyListRef.current.scrollTop = INITIAL_OFFSET_TOP;
+    if (!getScrollTarget() || getScrollTarget() === compareTarget) {
+      setScrollTarget(compareTarget);
+      forceScroll(scrollLeftNum, tableBodyRef.current);
+      forceScroll(scrollLeftNum, tableHeadRef.current);
+      lastOffsetLeftRef.current = scrollLeftNum;
     }
-  };
+  }, [forceScroll, getScrollTarget, onBodyVerticalScroll, setScrollTarget]);
+  useEffect(function () {
+    if (!hasNextPage) {
+      setLoadMoreLoading(false);
+    }
+  }, [hasNextPage]); // 渲染有设置高度的表格
 
-  React.useImperativeHandle(ref, function () {
-    return {
-      backToTop: function backToTop() {
-        scrollToTop();
+  var renderTableWithHeight = function renderTableWithHeight() {
+    var renderNoHeightTableBody = function renderNoHeightTableBody() {
+      if (loading && !rows.length) {
+        return /*#__PURE__*/React.createElement(Loading, null);
       }
-    };
-  });
-  var LoadingNode = /*#__PURE__*/React.createElement("div", {
-    className: classnames("".concat(prefixCls, "-loading"))
-  }, /*#__PURE__*/React.createElement(LoadingIcon, {
-    size: 16,
-    fill: "currentColor",
-    spin: true,
-    className: classnames("".concat(prefixCls, "-loading-icon"))
-  }), "Loading");
-
-  var renderTableBody = function renderTableBody() {
-    if (loading && !rows.length) {
-      return LoadingNode;
-    }
 
-    if (!loading && !rows.length) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames("".concat(prefixCls, "-empty-icon"))
-      }, /*#__PURE__*/React.createElement(Empty, {
-        title: "No Data",
-        size: "large",
-        image: Empty.PRESENTED_IMAGE_SIMPLE
-      }));
-    }
+      if (!loading && !rows.length) {
+        return /*#__PURE__*/React.createElement(Empty, null);
+      }
 
-    var renderRowList = function renderRowList() {
-      return data.map(function (item, index) {
-        var _classnames;
-
-        var row = rows[index];
-        prepareRow(row);
-
-        var _row$getRowProps = row.getRowProps(),
-            rowStyle = _row$getRowProps.style,
-            rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
-
-        return /*#__PURE__*/React.createElement("div", Object.assign({}, rowProps, {
-          style: _objectSpread({}, rowStyle),
-          className: classnames("".concat(prefixCls, "-row"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-row-selected"), row.id === selectedRowId), _defineProperty(_classnames, rowClassName, rowClassName), _defineProperty(_classnames, "".concat(prefixCls, "-row-ellipsis"), ellipsis), _classnames)),
-          onClick: function onClick() {
-            return onRowClick(row);
-          },
-          key: row.id
-        }), row.cells.map(function (cell) {
-          return /*#__PURE__*/React.createElement("div", Object.assign({}, cell.getCellProps(), {
-            className: classnames("".concat(prefixCls, "-cell"))
-          }), cell.render('Cell'));
-        }));
-      });
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          overflow: 'overlay',
+          overflowX: tableClientWidth + SCROLLBAR_SIZE > columnsTotalWidthRef.current ? 'hidden' : 'unset',
+          height: tableClientHeight - TABLE_HEAD_ROW_HEIGHT - SCROLLBAR_SIZE
+        },
+        ref: tableBodyRef,
+        onScroll: onBodyScroll
+      }, tableRowListNode, loadMoreLoading && /*#__PURE__*/React.createElement(Loading, null));
     };
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames("".concat(prefixCls, "-list"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), innerScroll)),
-      id: RANDOM_ID,
-      ref: tableBodyListRef
-    }, innerScroll ? /*#__PURE__*/React.createElement(InfiniteScroll, {
-      dataLength: rows.length,
-      next: loadMore,
-      hasMore: !!hasNextPage,
-      loader: LoadingNode,
-      scrollableTarget: RANDOM_ID,
-      scrollThreshold: scrollThreshold
-    }, renderRowList()) : renderRowList());
+      className: classnames("".concat(prefixCls, "-inner-wrap"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), height))
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: tableHeadRef,
+      className: "".concat(prefixCls, "-tableHeadScrollWrap")
+    }, tableHeadNode), /*#__PURE__*/React.createElement("div", Object.assign({}, getTableBodyProps(), {
+      className: classnames("".concat(prefixCls, "-tbody"), _defineProperty({}, "".concat(prefixCls, "-tbody-innerScroll"), height))
+    }), renderNoHeightTableBody()));
   };
 
   return /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: function onResize(_ref3) {
-      var domWidth = _ref3.width;
-      setWidth(domWidth);
+    onResize: function onResize(_ref2) {
+      var clientWidth = _ref2.width,
+          clientHeight = _ref2.height;
+      setTableClientWidth(clientWidth);
+      setTableClientHeight(clientHeight);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: prefixCls,
-    ref: tableRef
-  }, /*#__PURE__*/React.createElement("div", Object.assign({}, getTableProps(), {
-    className: classnames("".concat(prefixCls, "-table-wrap"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-column-resizable"), resizeColumn), _defineProperty(_classnames3, "".concat(prefixCls, "-init-loading"), data.length === EMPTY_LENGTH && loading), _defineProperty(_classnames3, "".concat(prefixCls, "-empty"), data.length === EMPTY_LENGTH && loading), _classnames3))
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-thead")
-  }, headerGroups.map(function (headerGroup) {
-    var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
-        style = _headerGroup$getHeade.style,
-        headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded2);
-
-    theadRowWidthRef.current = (style === null || style === void 0 ? void 0 : style.width) || DEFAULT_ROW_WIDTH;
-    return /*#__PURE__*/React.createElement("div", Object.assign({}, headerGroupProps, {
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        width: resizeColumn ? style === null || style === void 0 ? void 0 : style.width : '100%'
-      }),
-      className: "".concat(prefixCls, "-row")
-    }), headerGroup.headers.map(function (column) {
-      var barPorps = resizeColumn ? column.getResizerProps() : {};
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(_defineProperty({}, "".concat(prefixCls, "-cell-sorting"), column.id === sortDirection.id), "".concat(prefixCls, "-cell")),
-        style: getHeaderProps(column).style,
-        key: column.id
-      }, /*#__PURE__*/React.createElement("div", Object.assign({
-        className: "".concat(prefixCls, "-cell-content")
-      }, getHeaderProps(column), {
-        style: {
-          width: '100%'
-        }
-      }), column.render('Header'), /*#__PURE__*/React.createElement(SortIcons, {
-        id: column.id
-      })), /*#__PURE__*/React.createElement("div", Object.assign({}, barPorps, {
-        className: classnames(_defineProperty({}, "".concat(prefixCls, "-dragBar"), resizeColumn), "".concat(prefixCls, "-bar"))
-      })));
-    }));
-  })), /*#__PURE__*/React.createElement("div", Object.assign({}, getTableBodyProps(), {
-    className: classnames("".concat(prefixCls, "-tbody"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), innerScroll)),
+    ref: tableRef,
     style: {
-      width: totalColumnsWidth
+      height: !height ? 'unset' : height
     }
-  }), renderTableBody()))));
+  }, /*#__PURE__*/React.createElement("div", Object.assign({}, getTableProps(), {
+    className: classnames("".concat(prefixCls, "-table-wrap"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-init-loading"), data.length === ZERO && loading), _defineProperty(_classnames3, "".concat(prefixCls, "-empty"), data.length === ZERO && loading), _classnames3))
+  }), height ? renderTableWithHeight() : renderTableWithoutHeight())));
 }
 
 export default /*#__PURE__*/React.forwardRef(Table);

package/es/Table/components/Empty/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function LoadingNode(): JSX.Element;
+export default LoadingNode;