@teamix/pro 1.5.17 → 1.5.18-beta.1

package/es/table/index.js

@@ -1,5 +1,6 @@
-var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestConfig", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps", "bindUrlProps", "bindUrl"],
+var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestConfig", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "autoWidth", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps", "bindUrlProps", "bindUrl"],
   _excluded2 = ["onChange"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -33,12 +34,14 @@ import { EmptyContent } from '@teamix/pro-field';
 import { ProActionGroup } from '../actions';
 import classNames from 'classnames';
 import ProPageContainer from '../page-container';
+import { genAutoWidthColumns, shadowContainer, shadowActionColumnContainer } from './utils/genAutoWidthColumns';
 import debounce from 'lodash.debounce';
 import CardView from './components/CardView';
 import { useUrlState } from '@teamix/hooks';
 import { getUrlStateFilter } from './utils/util';
 export * from './typing';
 var cls = usePrefixCls('teamix-pro-table');
+
 /**
  * 处理原生传入的 columns 以便于 选择列 方便处理
  * @param columns 原生传入的 columns
@@ -73,6 +76,7 @@ var processColumns = function processColumns(columns, initialColumns) {
   }
   return filterColumns;
 };
+
 /** 默认请求翻页参数 */
 var globalPageKey = 'currentPage';
 var globalPageSizeKey = 'pageSize';
@@ -146,6 +150,8 @@ var ProTable = function ProTable(props) {
     propsSize = _props$size === void 0 ? 'medium' : _props$size,
     disableSelectAll = props.disableSelectAll,
     context = props.context,
+    _props$autoWidth = props.autoWidth,
+    autoWidth = _props$autoWidth === void 0 ? true : _props$autoWidth,
     _props$fixedTableBody = props.fixedTableBody,
     fixedTableBody = _props$fixedTableBody === void 0 ? false : _props$fixedTableBody,
     isTree = props.isTree,
@@ -206,6 +212,11 @@ var ProTable = function ProTable(props) {
     _useState16 = _slicedToArray(_useState15, 2),
     filteredColumns = _useState16[0],
     setFilteredColumns = _useState16[1];
+  // 判断是否有操作列，有的话则渲染一个 shadow dom
+  var hasActionColumn = filteredColumns.some(function (column) {
+    var _column$actionSchema, _column$actionSchema$;
+    return (column === null || column === void 0 ? void 0 : column.actionSchema) && ((_column$actionSchema = column.actionSchema) === null || _column$actionSchema === void 0 ? void 0 : (_column$actionSchema$ = _column$actionSchema.actions) === null || _column$actionSchema$ === void 0 ? void 0 : _column$actionSchema$.length) > 0;
+  });
   var _useState17 = useState(propsSize),
     _useState18 = _slicedToArray(_useState17, 2),
     size = _useState18[0],
@@ -214,6 +225,14 @@ var ProTable = function ProTable(props) {
     _useState20 = _slicedToArray(_useState19, 2),
     showLoading = _useState20[0],
     setShowLoading = _useState20[1];
+
+  // 自动计算列宽需要的一些hook
+  var _useState21 = useState(true),
+    _useState22 = _slicedToArray(_useState21, 2),
+    showShadowContainer = _useState22[0],
+    setShowShadowContainer = _useState22[1];
+  var shadowContainerRef = useRef(null);
+  var shadowActionColumnContainerRef = useRef(null);
   // 表格内部用作存储的 Ref，标识 Table 组件是否被第一次渲染。用作 useUrlState filter 第一次渲染时使用 state 数据请求
   var dataRef = useRef({
     flag: true
@@ -232,31 +251,37 @@ var ProTable = function ProTable(props) {
       }
     }
   }, [currentPage, pageSize, urlState]);
+
   // 存储能够被 on 监听到的 ProTable 状态
   // 因为只做存储用。不需要更新视图以及需要同步更改。所以不使用 setState 更新
-  var _useState21 = useState({
+  var _useState23 = useState({
       fullScreenState: false,
       filterRules: {},
       filterColumns: []
     }),
-    _useState22 = _slicedToArray(_useState21, 1),
-    actionRefState = _useState22[0];
+    _useState24 = _slicedToArray(_useState23, 1),
+    actionRefState = _useState24[0];
+
   // 存储 on 监听事件
-  var _useState23 = useState({
+  var _useState25 = useState({
       fullScreenState: {}
     }),
-    _useState24 = _slicedToArray(_useState23, 1),
-    actionRefCallback = _useState24[0];
+    _useState26 = _slicedToArray(_useState25, 1),
+    actionRefCallback = _useState26[0];
+
   // 存储定时器 id
   var autoRefreshTimerRef = useRef();
   var onResize = null;
+
   // useEffect(() => {
   //   setShowSkeleton(propsShowSkeleton);
   // }, [propsShowSkeleton]);
+
   // useEffect(() => {
   //   console.log('传入的props变化', propsLoading);
   //   setShowLoading(propsLoading ?? false);
   // }, [propsLoading]);
+
   useEffect(function () {
     var _propsDataFilter$sche, _propsDataFilter$sche2;
     getHeaderHeight(fullscreenState);
@@ -283,6 +308,7 @@ var ProTable = function ProTable(props) {
         }
       }, 500);
     }
+
     // 如果不传 dataFilter，则在这里初始化请求
     var hasDataFilter = (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche = propsDataFilter.schema) === null || _propsDataFilter$sche === void 0 ? void 0 : _propsDataFilter$sche.length) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche2 = propsDataFilter.schema) === null || _propsDataFilter$sche2 === void 0 ? void 0 : _propsDataFilter$sche2.length) > 0;
     if (requestWhenMount && !hasDataFilter) {
@@ -301,6 +327,7 @@ var ProTable = function ProTable(props) {
       actionRef.current = undefined;
     };
   }, []);
+
   // 获取header高度，用作全屏吸底吸底高度计算以及固定body高度计算（滚动条在底部）
   var getHeaderHeight = function getHeaderHeight(isFullscreen, offset) {
     var _tableDom$getElements, _tableDom$getElements2, _document$querySelect, _document$querySelect2, _document$querySelect3;
@@ -331,6 +358,7 @@ var ProTable = function ProTable(props) {
         // 16px 为 padding
         var pageHeaderHeight = ((_pageContainerDom$off = pageContainerDom === null || pageContainerDom === void 0 ? void 0 : pageContainerDom.offsetHeight) !== null && _pageContainerDom$off !== void 0 ? _pageContainerDom$off : 0) + 16;
         var teamixNavHeight = (_teamixNavDom$offsetH = teamixNavDom === null || teamixNavDom === void 0 ? void 0 : teamixNavDom.offsetHeight) !== null && _teamixNavDom$offsetH !== void 0 ? _teamixNavDom$offsetH : 0;
+
         // 1 为预留值，js无法取出精确高度，会被四舍五入
         var offsetHeaderHeight = headerHeight + tableHeaderHeight + pageHeaderHeight + teamixNavHeight + footerRowSelectionHeight + 16 + (offset !== null && offset !== void 0 ? offset : 0) + 1;
         if (switchViewState === 'card') {
@@ -341,12 +369,15 @@ var ProTable = function ProTable(props) {
         } else {
           setFooterSuctionState(false);
         }
+
         // 如果有切换区tab，那么重新计算
         if (headerFixedTopSectionDom.clientHeight) {
           var _headerFixedTopSectio;
           var headerFixedTopSectionHeight = (_headerFixedTopSectio = headerFixedTopSectionDom.clientHeight) !== null && _headerFixedTopSectio !== void 0 ? _headerFixedTopSectio : 0;
+
           // const clientTableBodyHeight =
           //   document.body.clientHeight - offsetHeaderHeight;
+
           setHeaderHeight(headerFixedTopSectionHeight + teamixNavHeight + footerRowSelectionHeight + tableHeaderHeight + 1);
           return;
         }
@@ -357,39 +388,45 @@ var ProTable = function ProTable(props) {
       }
     }, 50);
   };
+
   // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
-  var _useState25 = useState(0),
-    _useState26 = _slicedToArray(_useState25, 2),
-    headerHeight = _useState26[0],
-    setHeaderHeight = _useState26[1];
-  // 全屏显示 className
-  var _useState27 = useState(false),
+  var _useState27 = useState(0),
     _useState28 = _slicedToArray(_useState27, 2),
-    fullscreenState = _useState28[0],
-    setFullscreenState = _useState28[1];
-  // 切换视角
-  var _useState29 = useState(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+    headerHeight = _useState28[0],
+    setHeaderHeight = _useState28[1];
+
+  // 全屏显示 className
+  var _useState29 = useState(false),
     _useState30 = _slicedToArray(_useState29, 2),
-    switchViewState = _useState30[0],
-    setSwitchViewState = _useState30[1];
+    fullscreenState = _useState30[0],
+    setFullscreenState = _useState30[1];
+  // 切换视角
+  var _useState31 = useState(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+    _useState32 = _slicedToArray(_useState31, 2),
+    switchViewState = _useState32[0],
+    setSwitchViewState = _useState32[1];
   // 切换全屏搜索开关
   var filterEnableRef = useRef({
     fullscreen: false,
     normal: true
   });
+
   // 非全屏状态下的
   var normalDataFilterFormRef = useRef();
   var fullscreenDataFilterFormRef = useRef();
   var normalDataFilterForm = normalDataFilterFormRef.current;
   var fullscreenDataFilterForm = fullscreenDataFilterFormRef.current;
+
   // 传给 QueryFilter 的 formRef
   var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef;
   // let dataFilterForm = dataFilterFormRef.current;
+
   // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
-  var _useState31 = useState(false),
-    _useState32 = _slicedToArray(_useState31, 2),
-    footerSuctionState = _useState32[0],
-    setFooterSuctionState = _useState32[1];
+  var _useState33 = useState(false),
+    _useState34 = _slicedToArray(_useState33, 2),
+    footerSuctionState = _useState34[0],
+    setFooterSuctionState = _useState34[1];
+
   // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
   var getFooterSuctionState = function getFooterSuctionState() {
     if (!footerSuction) {
@@ -411,6 +448,7 @@ var ProTable = function ProTable(props) {
       }
     }
   };
+
   // rowSelection 相关
   var rowSelectionHook = useTableSelection(_objectSpread(_objectSpread({}, propsRowSelection), {}, {
     // 当初始出现骨架屏的时候，不可选择
@@ -441,15 +479,17 @@ var ProTable = function ProTable(props) {
   useEffect(function () {
     getRowSelection && getRowSelection(rowSelectionHook);
   }, [rowSelectionHook]);
+
   // 获取 table 左下角 checkbox 属性
   function getCheckAllProps() {
-    var _rowSelection$onChang = rowSelection.onChange,
-      _onChange = _rowSelection$onChang === void 0 ? function () {} : _rowSelection$onChang,
-      _rowSelection$onSelec = rowSelection.onSelectAll,
-      onSelectAll = _rowSelection$onSelec === void 0 ? function () {} : _rowSelection$onSelec,
-      _rowSelection$selecte2 = rowSelection.selectedRowKeys,
-      selectedRowKeys = _rowSelection$selecte2 === void 0 ? [] : _rowSelection$selecte2,
-      getProps = rowSelection.getProps;
+    var _ref3 = rowSelection,
+      _ref3$onChange = _ref3.onChange,
+      _onChange = _ref3$onChange === void 0 ? function () {} : _ref3$onChange,
+      _ref3$onSelectAll = _ref3.onSelectAll,
+      onSelectAll = _ref3$onSelectAll === void 0 ? function () {} : _ref3$onSelectAll,
+      _ref3$selectedRowKeys = _ref3.selectedRowKeys,
+      selectedRowKeys = _ref3$selectedRowKeys === void 0 ? [] : _ref3$selectedRowKeys,
+      getProps = _ref3.getProps;
     var dataSource = data;
     var allRowKeys = dataSource.filter(function (d, i) {
       var _getProps;
@@ -493,12 +533,14 @@ var ProTable = function ProTable(props) {
     setFilteredColumns(columns);
     (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setState) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, 'filterColumns', columns);
   }, [propsColumns]);
+
   // dataSource 受控
   useEffect(function () {
     if (propsDataSource) {
       _setData(propsDataSource);
     }
   }, [propsDataSource]);
+
   // 初始化 ActionRef。
   initActionRef(actionRef, {
     getState: function getState() {
@@ -518,19 +560,20 @@ var ProTable = function ProTable(props) {
       actionRefCallback[state][name] = fun;
     },
     off: function off(name) {
-      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-          k = _ref4[0],
-          v = _ref4[1];
-        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref5) {
-          var _ref6 = _slicedToArray(_ref5, 1),
-            k = _ref6[0];
+      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2),
+          k = _ref5[0],
+          v = _ref5[1];
+        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref6) {
+          var _ref7 = _slicedToArray(_ref6, 1),
+            k = _ref7[0];
           return k !== name;
         }));
         return [k, filterV];
       }));
     }
   });
+
   // 绑定 Actions
   useActionType(actionRef, {
     fullScreen: function fullScreen() {
@@ -540,6 +583,7 @@ var ProTable = function ProTable(props) {
       setFullscreenState(state);
       getHeaderHeight(state);
       actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$s = _actionRef$current2.setState) === null || _actionRef$current2$s === void 0 ? void 0 : _actionRef$current2$s.call(_actionRef$current2, 'fullScreenState', state);
+      reGenFilteredColumnsByAutoWidth();
       return state;
     },
     setColumn: function setColumn(newColumns) {
@@ -551,10 +595,12 @@ var ProTable = function ProTable(props) {
       if (update) {
         emit('refreshFilterState', newColumns);
       }
+      reGenFilteredColumnsByAutoWidth();
     },
     size: size,
     setSize: function setSize(mode) {
       _setSize(mode);
+      reGenFilteredColumnsByAutoWidth();
     },
     refresh: function refresh(params) {
       // card视角的刷新等于重新请求
@@ -660,10 +706,27 @@ var ProTable = function ProTable(props) {
       autoRefreshTimerRef.current = null;
     }
   });
+
   // 将 Actions 绑定到传入的 propsActionRef 中
   if (propsActionRef) {
     propsActionRef.current = actionRef.current;
   }
+  function reGenFilteredColumnsByAutoWidth() {
+    if (!autoWidth) {
+      return;
+    }
+    console.time('calc width');
+    setShowShadowContainer(true);
+    var authWidthedColumns = genAutoWidthColumns(filteredColumns, shadowContainerRef, data, size, useRowSelection, shadowActionColumnContainerRef);
+    setFilteredColumns(authWidthedColumns);
+    // 移除 shadow dom
+    // setTimeout(() => {
+    //   if (document.querySelector('.teamix-pro-table-shadow-container')) {
+    //     document.querySelector('.teamix-pro-table-shadow-container')?.remove();
+    //   }
+    // }, 0);
+    console.timeEnd('calc width');
+  }
   function onFormatResult(next) {
     props.onFormatResult && props.onFormatResult(next);
     var time = 0;
@@ -692,7 +755,9 @@ var ProTable = function ProTable(props) {
       setTotal(total + (next.total || ((_next$data2 = next.data) === null || _next$data2 === void 0 ? void 0 : _next$data2.length)));
     }
     setShowSkeleton(false);
+    reGenFilteredColumnsByAutoWidth();
   }
+
   // 请求表格数据工具函数
   var getData = useRequest(function (params) {
     return _defineProperty({
@@ -757,6 +822,7 @@ var ProTable = function ProTable(props) {
       }
     }
   });
+
   // 请求函数
   function _request(params, noLoading, filterParams, isReset) {
     var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current6, _actionRef$current6$g, _objectSpread3;
@@ -765,6 +831,7 @@ var ProTable = function ProTable(props) {
       getUrlStateFilter(urlState !== null && urlState !== void 0 ? urlState : {}, actionRef);
       dataRef.current.flag = false;
     }
+
     // 如果没有传 url 且没有 customRequest，直接返回
     if (!url && !customRequest) {
       return;
@@ -778,6 +845,7 @@ var ProTable = function ProTable(props) {
     var dataFilterParams = filterParams !== null && filterParams !== void 0 ? filterParams : (_dataFilterFormRef$cu2 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu2 === void 0 ? void 0 : _dataFilterFormRef$cu2.values;
     // 列过滤请求参数
     var columnsFilterParams = (_actionRef$current$ge = (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$g = _actionRef$current6.getFilterRules) === null || _actionRef$current6$g === void 0 ? void 0 : _actionRef$current6$g.call(_actionRef$current6)) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : {};
+
     // 格式化后的请求参数
     var requestData = {};
     var preParams = _objectSpread(_objectSpread({}, !showPagination ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, dataFilterParams), propsParams), sortParams), columnsFilterParams) : _objectSpread(_objectSpread(_objectSpread(_objectSpread((_objectSpread3 = {}, _defineProperty(_objectSpread3, targetPageKey, currentPage), _defineProperty(_objectSpread3, targetPageSizeKey, pageSize), _objectSpread3), dataFilterParams), propsParams), sortParams), columnsFilterParams)), params);
@@ -828,9 +896,11 @@ var ProTable = function ProTable(props) {
               _setData([].concat(_toConsumableArray(data), _toConsumableArray(dataRes || [])));
               setTotal(total + (totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length)));
             }
+            reGenFilteredColumnsByAutoWidth();
             setShowSkeleton(false);
             setCustomTableLoading(false);
           }
+
           // 重新计算是否需要吸底
           if (footerSuction) {
             getFooterSuctionState();
@@ -838,6 +908,7 @@ var ProTable = function ProTable(props) {
           if (fixedTableBody) {
             getHeaderHeight(fullscreenState);
           }
+
           // customRequest 中支持 autoRefresh
           var time = 0;
           if (autoRefresh) {
@@ -866,6 +937,7 @@ var ProTable = function ProTable(props) {
     setSort(nextSort);
     _request(targetFormatSort(nextSort));
   }
+
   // 处理 dataFilter 中的 onFilter、onReset
   var dataFilter = _objectSpread(_objectSpread({
     mode: 'inline',
@@ -940,7 +1012,7 @@ var ProTable = function ProTable(props) {
         autoRefreshProps: autoRefreshProps,
         bindUrlProps: bindUrlProps,
         bindUrl: bindUrl
-      }), switchViewState === 'table' && /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
+      }), switchViewState === 'table' && /*#__PURE__*/React.createElement(Table.StickyLock, _extends({
         hasBorder: false,
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
         columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps),
@@ -955,10 +1027,11 @@ var ProTable = function ProTable(props) {
         sort: sort,
         primaryKey: primaryKey,
         rowSelection: rowSelection,
-        emptyContent: /*#__PURE__*/React.createElement(EmptyContent, _objectSpread({}, emptyProps)),
+        emptyContent: /*#__PURE__*/React.createElement(EmptyContent, emptyProps),
         sortIcons: getTableSortIcons(),
         fixedHeader: fullscreenState || fixedTableBody,
         maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
+        // 过滤出可以传到 Table 的 Props
       }, pickProps(getTableProps(), otherProps))), switchViewState === 'card' && /*#__PURE__*/React.createElement(CardView, {
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
         showSkeleton: showSkeleton,
@@ -968,18 +1041,20 @@ var ProTable = function ProTable(props) {
         scrollHeight: fullscreenState || fixedTableBody ? "calc(100vh - ".concat(headerHeight, "px)") : undefined,
         actionRef: actionRef,
         context: context,
-        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context)
+        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context),
+        emptyProps: emptyProps,
+        emptyContent: otherProps === null || otherProps === void 0 ? void 0 : otherProps.emptyContent
       }));
     } else {
       // 不传 columns 直接返回原始 Table
-      return /*#__PURE__*/React.createElement(Table, _objectSpread({
+      return /*#__PURE__*/React.createElement(Table, _extends({
         className: cls()
       }, pickProps(getTableProps(), otherProps)));
     }
   };
   var renderFooterAction = function renderFooterAction() {
-    var _footerAction$actions;
-    if (_typeof(footerAction) === 'object' && (footerAction === null || footerAction === void 0 ? void 0 : (_footerAction$actions = footerAction.actions) === null || _footerAction$actions === void 0 ? void 0 : _footerAction$actions.length) >= 0) {
+    var _actions;
+    if (_typeof(footerAction) === 'object' && (footerAction === null || footerAction === void 0 ? void 0 : (_actions = footerAction.actions) === null || _actions === void 0 ? void 0 : _actions.length) >= 0) {
       // 默认 context
       var defaultContext = {
         action: actionRef.current,
@@ -996,7 +1071,7 @@ var ProTable = function ProTable(props) {
       });
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer-action')
-      }, /*#__PURE__*/React.createElement(ProActionGroup, _objectSpread(_objectSpread({}, targetFooterActions), {}, {
+      }, /*#__PURE__*/React.createElement(ProActionGroup, _extends({}, targetFooterActions, {
         context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context),
         "data-teamix-spm": dataTeamixSpm ? "".concat(dataTeamixSpm, "-footerAction") : undefined
       })));
@@ -1033,7 +1108,7 @@ var ProTable = function ProTable(props) {
         } else {
           return /*#__PURE__*/React.createElement("div", {
             className: cls('footer-left-wrapper')
-          }, /*#__PURE__*/React.createElement(React.Fragment, null, rowSelection.mode !== 'single' && /*#__PURE__*/React.createElement(Checkbox, _objectSpread({
+          }, /*#__PURE__*/React.createElement(React.Fragment, null, rowSelection.mode !== 'single' && /*#__PURE__*/React.createElement(Checkbox, _extends({
             className: cls("footer-checkbox-".concat(size))
           }, getCheckAllProps())), footerAction && renderFooterAction(), /*#__PURE__*/React.createElement("span", {
             className: cls('selected-msg')
@@ -1055,9 +1130,9 @@ var ProTable = function ProTable(props) {
     }
     if (showPagination && switchViewState === 'table' || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination) && switchViewState === 'card') {
       var _props$paginationProp3;
-      var _ref8 = (_props$paginationProp3 = props === null || props === void 0 ? void 0 : props.paginationProps) !== null && _props$paginationProp3 !== void 0 ? _props$paginationProp3 : {},
-        onPaginationPropsChange = _ref8.onChange,
-        othersPaginationProps = _objectWithoutProperties(_ref8, _excluded2);
+      var _ref9 = (_props$paginationProp3 = props === null || props === void 0 ? void 0 : props.paginationProps) !== null && _props$paginationProp3 !== void 0 ? _props$paginationProp3 : {},
+        onPaginationPropsChange = _ref9.onChange,
+        othersPaginationProps = _objectWithoutProperties(_ref9, _excluded2);
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer', {
           'footer-has-rowSelection': rowSelection,
@@ -1065,16 +1140,17 @@ var ProTable = function ProTable(props) {
         })
       }, renderRowSelection(), /*#__PURE__*/React.createElement("div", {
         className: cls('footer-right-wrapper')
-      }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : /*#__PURE__*/React.createElement(React.Fragment, null, data.length > 0 && /*#__PURE__*/React.createElement(Pagination, _objectSpread({
+      }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : /*#__PURE__*/React.createElement(React.Fragment, null, data.length > 0 && /*#__PURE__*/React.createElement(Pagination, _extends({
         className: cls('pagination'),
         onChange: function onChange(number, e) {
           onChangePagination(number);
           onPaginationPropsChange === null || onPaginationPropsChange === void 0 ? void 0 : onPaginationPropsChange(number, e);
         },
         total: total,
-        responsivePaginationType: responsivePaginationType,
+        responsivePaginationType: responsivePaginationType
         // shape="arrow-only"
         // pageSizePosition="end"
+        ,
         totalRender: function totalRender(total) {
           return getMessage('total', {
             total: new Intl.NumberFormat().format(total)
@@ -1099,6 +1175,7 @@ var ProTable = function ProTable(props) {
       }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : footer));
     }
   };
+
   // 判断是否需要吸底
   var fixFooterState = useMemo(function () {
     if (fullscreenState) {
@@ -1122,8 +1199,18 @@ var ProTable = function ProTable(props) {
         fullscreen: isFullScreen
         // 'footer-suction': footerSuctionState && footerSuction,
       }),
+
       ref: tableRef
-    }, renderTable(isFullScreen), fixFooterState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
+    }, showShadowContainer && shadowContainer({
+      columns: filteredColumns,
+      data: data,
+      shadowContainerRef: shadowContainerRef
+    }), hasActionColumn && shadowActionColumnContainer(filteredColumns, shadowActionColumnContainerRef), renderTable(isFullScreen), fixFooterState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
   });
 };
+
+// window.TeamixMaterial = {
+//   ...window.TeamixMaterial,
+//   ProTable
+// }
 export default ProTable;

package/es/table/index.scss

@@ -77,6 +77,32 @@ $fullscreenPadding: 24px;
       transition: all 0.1s;
     }
   }
+  &-shadow-container {
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  &-shadow-container-columns {
+    display: flex;
+    >* {
+      flex-shrink: 0;
+    }
+  }
+  &-action-column-shadow-container {
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+    display: flex;
+  }
+  
   // sort icon
   .next-table-sort.next-table-header-icon {
     line-height: 16px;