@hi-ui/table 4.3.0 → 4.3.1

package/lib/cjs/packages/hooks/use-merge-refs/lib/esm/index.js

@@ -0,0 +1,76 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var React = require('react');
+/** @LICENSE
+ * @hi-ui/use-merge-refs
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-merge-refs#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A hook to merge multiple refs into a single function ref.
+ *
+ * @param refs
+ */
+
+
+var useMergeRefs = function useMergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return React.useMemo(function () {
+    return mergeRefs.apply(void 0, refs);
+  }, refs);
+};
+/**
+ * Merges multiple refs into a single function ref.
+ *
+ * @param refs
+ * @returns
+ */
+
+
+function mergeRefs() {
+  for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    refs[_key2] = arguments[_key2];
+  } // Empty check
+
+
+  if (refs.some(function (ref) {
+    return ref;
+  }) === false) return null;
+  return function (value) {
+    refs.forEach(function (ref) {
+      setRef(ref, value);
+    });
+  };
+}
+
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+exports.mergeRefs = mergeRefs;
+exports.useMergeRefs = useMergeRefs;

package/lib/cjs/packages/ui/scrollbar/lib/esm/Scrollbar.js

@@ -0,0 +1,185 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var tslib = require('tslib');
+
+var React = require('react');
+
+var classname = require('@hi-ui/classname');
+
+var env = require('@hi-ui/env');
+
+var index$1 = require('../../../../hooks/use-merge-refs/lib/esm/index.js');
+
+var perfectScrollbar_esm = require('../../../../../node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js');
+
+var index = require('./utils/index.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+/** @LICENSE
+ * @hi-ui/scrollbar
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/scrollbar#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+var SCROLLBAR_PREFIX = classname.getPrefixCls('scrollbar');
+var Scrollbar = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _cx;
+
+  var _a$prefixCls = _a.prefixCls,
+      prefixCls = _a$prefixCls === void 0 ? SCROLLBAR_PREFIX : _a$prefixCls,
+      _a$role = _a.role,
+      role = _a$role === void 0 ? 'scrollbar' : _a$role,
+      _a$position = _a.position,
+      position = _a$position === void 0 ? 'relative' : _a$position,
+      _a$axes = _a.axes,
+      axes = _a$axes === void 0 ? 'both' : _a$axes,
+      _a$keepVisible = _a.keepVisible,
+      keepVisible = _a$keepVisible === void 0 ? false : _a$keepVisible,
+      _a$onlyScrollVisible = _a.onlyScrollVisible,
+      onlyScrollVisible = _a$onlyScrollVisible === void 0 ? false : _a$onlyScrollVisible,
+      className = _a.className,
+      children = _a.children,
+      style = _a.style,
+      innerRef = _a.innerRef,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "position", "axes", "keepVisible", "onlyScrollVisible", "className", "children", "style", "innerRef"]);
+
+  var cls = classname.cx(prefixCls, className, 'priority', (_cx = {}, _cx[prefixCls + "--keep-visible"] = keepVisible, _cx[prefixCls + "--only-scroll-visible"] = !keepVisible && onlyScrollVisible, _cx));
+
+  var _useState = React.useState(undefined),
+      ps = _useState[0],
+      setPs = _useState[1];
+
+  var _useState2 = React.useState(null),
+      containerElement = _useState2[0],
+      setContainer = _useState2[1];
+
+  var _useState3 = React.useState(null),
+      wrapperElement = _useState3[0],
+      setWrapperElement = _useState3[1];
+
+  var eventPropsRef = React.useRef({});
+  React.useEffect(function () {
+    if (containerElement) {
+      setPs(new perfectScrollbar_esm["default"](containerElement));
+    }
+  }, [containerElement]); // 轴定制
+
+  React.useEffect(function () {
+    if (ps) {
+      ps.settings.suppressScrollX = true;
+      ps.settings.suppressScrollY = true;
+
+      if (axes === 'both' || axes === 'x') {
+        ps.settings.suppressScrollX = false;
+      }
+
+      if (axes === 'both' || axes === 'y') {
+        ps.settings.suppressScrollY = false;
+      }
+
+      ps.update();
+    }
+  }, [ps, axes]); // 监听容器以及内容尺寸
+
+  React.useEffect(function () {
+    if (ps && wrapperElement && containerElement) {
+      var observer = new ResizeObserver(function (entries) {
+        ps.update();
+      });
+      observer.observe(containerElement);
+      observer.observe(wrapperElement);
+      return function () {
+        observer.disconnect();
+      };
+    }
+  }, [ps, wrapperElement, containerElement]);
+  React.useImperativeHandle(innerRef, function () {
+    return {
+      instance: ps,
+      containerElement: containerElement || undefined
+    };
+  }, [ps, containerElement]);
+
+  var _useMemo = React.useMemo(function () {
+    var eventProps = {};
+    var injectProps = {};
+    var eventNames = Object.keys(index.ScrollbarEventToPsMap);
+
+    for (var _i = 0, _Object$keys = Object.keys(rest); _i < _Object$keys.length; _i++) {
+      var propsName = _Object$keys[_i];
+
+      if (eventNames.includes(propsName)) {
+        eventProps[propsName] = rest[propsName];
+      } else {
+        injectProps[propsName] = rest[propsName];
+      }
+    }
+
+    return {
+      eventProps: eventProps,
+      injectProps: injectProps
+    };
+  }, [rest]),
+      eventProps = _useMemo.eventProps,
+      injectProps = _useMemo.injectProps; // 更新event props引用
+
+
+  React.useEffect(function () {
+    eventPropsRef.current = eventProps;
+  }, [eventProps]); // 注册监听事件
+
+  React.useEffect(function () {
+    if (containerElement) {
+      Object.keys(index.ScrollbarEventToPsMap).forEach(function (event) {
+        containerElement.addEventListener(index.ScrollbarEventToPsMap[event], function (e) {
+          var _a, _b;
+
+          (_b = (_a = eventPropsRef.current)[event]) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        });
+      });
+    }
+  }, [containerElement]);
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: index$1.useMergeRefs(setContainer, ref),
+    role: role,
+    className: cls,
+    style: Object.assign(Object.assign({}, style), {
+      position: position
+    })
+  }, injectProps), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__wrapper",
+    ref: setWrapperElement
+  }, children));
+});
+
+if (env.__DEV__) {
+  Scrollbar.displayName = 'Scrollbar';
+}
+
+exports.Scrollbar = Scrollbar;

package/lib/cjs/packages/ui/scrollbar/lib/esm/styles/index.scss.js

@@ -0,0 +1,42 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var __styleInject__ = require('style-inject');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var __styleInject____default = /*#__PURE__*/_interopDefaultLegacy(__styleInject__);
+/** @LICENSE
+ * @hi-ui/scrollbar
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/scrollbar#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+var css_248z = "/** Container style*/.ps {overflow: hidden !important;overflow-anchor: none;-ms-overflow-style: none;touch-action: auto;-ms-touch-action: auto;}/** Scrollbar rail styles*/.ps__rail-x {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;height: 15px;/* there must be 'bottom' or 'top' for ps__rail-x */bottom: 0px;/* please don't change 'position' */position: absolute;}.ps__rail-y {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;width: 15px;/* there must be 'right' or 'left' for ps__rail-y */right: 0;/* please don't change 'position' */position: absolute;}.ps--active-x > .ps__rail-x,.ps--active-y > .ps__rail-y {display: block;background-color: transparent;}.ps:hover > .ps__rail-x,.ps:hover > .ps__rail-y,.ps--focus > .ps__rail-x,.ps--focus > .ps__rail-y,.ps--scrolling-x > .ps__rail-x,.ps--scrolling-y > .ps__rail-y {opacity: 0.6;}.ps .ps__rail-x:hover,.ps .ps__rail-y:hover,.ps .ps__rail-x:focus,.ps .ps__rail-y:focus,.ps .ps__rail-x.ps--clicking,.ps .ps__rail-y.ps--clicking {background-color: #eee;opacity: 0.9;}/** Scrollbar thumb styles*/.ps__thumb-x {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, height 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;height: 6px;/* there must be 'bottom' for ps__thumb-x */bottom: 2px;/* please don't change 'position' */position: absolute;}.ps__thumb-y {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, width 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;width: 6px;/* there must be 'right' for ps__thumb-y */right: 2px;/* please don't change 'position' */position: absolute;}.ps__rail-x:hover > .ps__thumb-x,.ps__rail-x:focus > .ps__thumb-x,.ps__rail-x.ps--clicking .ps__thumb-x {background-color: #999;height: 11px;}.ps__rail-y:hover > .ps__thumb-y,.ps__rail-y:focus > .ps__thumb-y,.ps__rail-y.ps--clicking .ps__thumb-y {background-color: #999;width: 11px;}/* MS supports */@supports (-ms-overflow-style: none) {.ps {overflow: auto !important;}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.ps {overflow: auto !important;}}.hi-v4-scrollbar {overflow: hidden;width: 100%;height: 100%;}.hi-v4-scrollbar__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;min-width: 100%;min-height: 100%;}.hi-v4-scrollbar--keep-visible.priority > .ps__rail-y, .hi-v4-scrollbar--keep-visible.priority > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar--keep-visible.priority .ps__thumb-y,.hi-v4-scrollbar--keep-visible.priority .ps__thumb-x {background-color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-scrollbar.priority:hover > .ps__rail-y, .hi-v4-scrollbar.priority:hover > .ps__rail-x, .hi-v4-scrollbar.priority:focus > .ps__rail-y, .hi-v4-scrollbar.priority:focus > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y,.hi-v4-scrollbar.priority .ps__thumb-y {width: 8px;border-radius: 4px;right: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-y:hover, .hi-v4-scrollbar.priority > .ps__rail-y:focus, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking {width: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y:hover .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y:focus .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking .ps__thumb-y {width: 8px;right: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar.priority > .ps__rail-x,.hi-v4-scrollbar.priority .ps__thumb-x {height: 8px;border-radius: 4px;bottom: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-x:hover, .hi-v4-scrollbar.priority > .ps__rail-x:focus, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking {height: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-x:hover .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x:focus .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking .ps__thumb-x {height: 8px;bottom: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-y) > .ps__rail-y:not(:hover):not(:focus), .hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-x) > .ps__rail-x:not(:hover):not(:focus) {opacity: 0;}";
+
+__styleInject____default["default"](css_248z);
+
+exports["default"] = css_248z;

package/lib/cjs/packages/ui/scrollbar/lib/esm/utils/index.js

@@ -0,0 +1,81 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+/** @LICENSE
+ * @hi-ui/scrollbar
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/scrollbar#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ScrollbarPsToEventMatch = {
+  /**
+   * This event fires when the y-axis is scrolled in either direction
+   */
+  'ps-scroll-y': 'onScrollY',
+
+  /**
+   * This event fires when the x-axis is scrolled in either direction.
+   */
+  'ps-scroll-x': 'onScrollX',
+
+  /**
+   * This event fires when scrolling upwards.
+   */
+  'ps-scroll-up': 'onScrollUp',
+
+  /**
+   * This event fires when scrolling downwards.
+   */
+  'ps-scroll-down': 'onScrollDown',
+
+  /**
+   * This event fires when scrolling to the left.
+   */
+  'ps-scroll-left': 'onScrollLeft',
+
+  /**
+   * This event fires when scrolling to the right.
+   */
+  'ps-scroll-right': 'onScrollRight',
+
+  /**
+   * This event fires when scrolling reaches the start of the y-axis.
+   */
+  'ps-y-reach-start': 'onYReachStart',
+
+  /**
+   * This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll).
+   */
+  'ps-y-reach-end': 'onYReachEnd',
+
+  /**
+   * This event fires when scrolling reaches the start of the x-axis.
+   */
+  'ps-x-reach-start': 'onXReachStart',
+
+  /**
+   * This event fires when scrolling reaches the end of the x-axis.
+   */
+  'ps-x-reach-end': 'onXReachEnd'
+};
+var ScrollbarEventToPsMap = Object.keys(ScrollbarPsToEventMatch).reduce(function (acc, key) {
+  var value = ScrollbarPsToEventMatch[key];
+  acc[value] = key;
+  return acc;
+}, {});
+exports.ScrollbarEventToPsMap = ScrollbarEventToPsMap;

package/lib/cjs/use-table.js

@@ -17,15 +17,11 @@ Object.defineProperty(exports, '__esModule', {
 
 var tslib = require('tslib');
 
-var treeUtils = require('@hi-ui/tree-utils');
-
 var React = require('react');
 
-var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
-
-var useColWidth = require('./hooks/use-col-width.js');
+var treeUtils = require('@hi-ui/tree-utils');
 
-var index = require('./utils/index.js');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
 
 var typeAssertion = require('@hi-ui/type-assertion');
 
@@ -33,20 +29,24 @@ var useCheck = require('@hi-ui/use-check');
 
 var env = require('@hi-ui/env');
 
+var domUtils = require('@hi-ui/dom-utils');
+
+var useCache = require('@hi-ui/use-cache');
+
+var useLatest = require('@hi-ui/use-latest');
+
+var index = require('./utils/index.js');
+
 var useAsyncSwitch = require('./hooks/use-async-switch.js');
 
 var useExpand = require('./hooks/use-expand.js');
 
-var useColgroup = require('./hooks/use-colgroup.js');
-
-var domUtils = require('@hi-ui/dom-utils');
+var useColWidth = require('./hooks/use-col-width.js');
 
-var useCache = require('@hi-ui/use-cache');
+var useColgroup = require('./hooks/use-colgroup.js');
 
 var useDrag = require('./hooks/use-drag.js');
 
-var useLatest = require('@hi-ui/use-latest');
-
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -107,7 +107,8 @@ var useTable = function useTable(_a) {
       _a$fieldKey = _a.fieldKey,
       fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
       virtual = _a.virtual,
-      rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual"]);
+      scrollbar = _a.scrollbar,
+      rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar"]);
   /**
    * 获取 key 字段值
    */
@@ -640,7 +641,8 @@ var useTable = function useTable(_a) {
     footerRender: footerRender,
     showColMenu: showColMenu,
     onLoadChildren: onLoadChildren,
-    setHeaderTableElement: setHeaderTableElement
+    setHeaderTableElement: setHeaderTableElement,
+    scrollbar: scrollbar
   });
 };
 

package/lib/esm/TableBody.js

@@ -12,7 +12,9 @@ import List from './node_modules/rc-virtual-list/es/List.js';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useLatestCallback } from '@hi-ui/use-latest';
-import { isArrayNonEmpty } from '@hi-ui/type-assertion';
+import { isArrayNonEmpty, isObject } from '@hi-ui/type-assertion';
+import './packages/ui/scrollbar/lib/esm/styles/index.scss.js';
+import { Scrollbar } from './packages/ui/scrollbar/lib/esm/Scrollbar.js';
 import { TableRow } from './TableRow.js';
 import { useTableContext } from './context.js';
 import { ColGroupContent } from './ColGroupContent.js';
@@ -41,7 +43,8 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       scrollWidth = _useTableContext.scrollWidth,
       colWidths = _useTableContext.colWidths,
       virtual = _useTableContext.virtual,
-      measureRowElementRef = _useTableContext.measureRowElementRef;
+      measureRowElementRef = _useTableContext.measureRowElementRef,
+      scrollbar = _useTableContext.scrollbar;
 
   var cls = cx(prefixCls + "-body");
   var getRequiredProps = useLatestCallback(function (id) {
@@ -134,24 +137,24 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, scrollBodyElementRef.current ? {
       scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
     } : {})));
-  } // 外层增加 div 作为滚动容器
+  }
 
-
-  return /*#__PURE__*/React__default.createElement("div", {
+  var bodyContent = /*#__PURE__*/React__default.createElement("table", {
+    ref: bodyTableRef,
+    style: {
+      width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TbodyContent, null));
+  var scrollBodyProps = {
     ref: scrollBodyElementRef,
     className: cls,
     onScroll: onTableBodyScroll,
     style: {
-      maxHeight: maxHeight !== undefined ? maxHeight : undefined,
-      // 表格宽度大于div宽度才出现横向滚动条
-      overflowX: canScroll ? 'scroll' : undefined
+      maxHeight: maxHeight
     }
-  }, /*#__PURE__*/React__default.createElement("table", {
-    ref: bodyTableRef,
-    style: {
-      width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TbodyContent, null)));
+  }; // 外层增加 div 作为滚动容器
+
+  return !scrollbar ? /*#__PURE__*/React__default.createElement("div", Object.assign({}, scrollBodyProps), bodyContent) : /*#__PURE__*/React__default.createElement(Scrollbar, Object.assign({}, scrollBodyProps, isObject(scrollbar) ? scrollbar : null), bodyContent);
 });
 
 if (__DEV__) {