@aloudata/aloudata-design 2.5.1 → 2.6.0

package/dist/Table/helper.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { ITableColumn, ITableProps } from './types';
-export declare function getTableColumns<TDataItem extends object>({ columns, columnSizing, totalWidth, onError, }: {
+export declare function getTableColumns<TDataItem extends object>({ columns, totalWidth, onError, }: {
     columns: ITableColumn<TDataItem>[];
-    columnSizing: boolean;
     totalWidth: number;
     onError: ITableProps<TDataItem>['onError'];
 }): {
@@ -12,13 +11,16 @@ export declare function getTableColumns<TDataItem extends object>({ columns, col
     size: number;
     meta: {
         onError: ((errorInfo: import("./types").ITableCellErrorInfo) => void) | undefined;
+        columnWidths: number[];
+        index: number;
         title: import("react").ReactNode;
         dataIndex?: string | undefined;
         width?: string | number | undefined;
         render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
         ellipsis?: boolean | undefined;
         noPadding?: boolean | undefined;
-        align?: "center" | "left" | "right" | undefined;
+        align?: "left" | "center" | "right" | undefined;
+        fixed?: "left" | "right" | undefined;
     };
 }[];
 /**
@@ -28,7 +30,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, col
  * @param totalWidth
  * @returns
  */
-export declare function getColumnWidths(columns: ITableColumn<unknown>[], columnSizing: boolean, totalWidth: number): number[];
+export declare function getColumnWidths(columns: ITableColumn<unknown>[], totalWidth: number): number[];
 export declare function getNumberFromPercentageStr(str: string): number;
 /**
  * 判断是否百分比字符串

package/dist/Table/helper.js

@@ -9,11 +9,24 @@ import Cell from "./components/Cell";
 import Header from "./components/Header";
 export function getTableColumns(_ref) {
   var columns = _ref.columns,
-    columnSizing = _ref.columnSizing,
     totalWidth = _ref.totalWidth,
     onError = _ref.onError;
-  var columnWidths = getColumnWidths(columns, columnSizing, totalWidth);
-  return _.map(columns, function (col, index) {
+  var columnWidths = getColumnWidths(columns, totalWidth);
+  // 根据固定列的位置重排列顺序，将 left 的列放到最前面，right 的列放到最后面
+  var leftColumns = [];
+  var rightColumns = [];
+  var unFixedColumns = [];
+  columns.forEach(function (col) {
+    if (col.fixed === 'left') {
+      leftColumns.push(col);
+    } else if (col.fixed === 'right') {
+      rightColumns.push(col);
+    } else {
+      unFixedColumns.push(col);
+    }
+  });
+  var sortedColumns = [].concat(leftColumns, unFixedColumns, rightColumns);
+  return _.map(sortedColumns, function (col, index) {
     return {
       // 这里还需要排除掉空字符串的情况，id 不能为 ''
       accessorKey: col.dataIndex || "column-".concat(index),
@@ -21,7 +34,9 @@ export function getTableColumns(_ref) {
       cell: Cell,
       size: columnWidths[index],
       meta: _objectSpread(_objectSpread({}, col), {}, {
-        onError: onError
+        onError: onError,
+        columnWidths: columnWidths,
+        index: index
       })
     };
   });
@@ -34,7 +49,7 @@ export function getTableColumns(_ref) {
  * @param totalWidth
  * @returns
  */
-export function getColumnWidths(columns, columnSizing, totalWidth) {
+export function getColumnWidths(columns, totalWidth) {
   // 可改变列宽情况，react-table 可拖动列宽要求列宽值必须是数字，因为将百分比列宽转换为数字
   var DEFAULT_WIDTH = 150;
   // 计算出每个列的具体宽度值

package/dist/Table/hooks/useFixed.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ColumnDef } from '@tanstack/react-table';
+export default function useFixed<TDataItem>({ tableColumns, y, scrollbarWidth, }: {
+    tableColumns: Array<ColumnDef<TDataItem, unknown>>;
+    y?: string | number;
+    scrollbarWidth: number;
+}): (index: number, isHeader?: boolean) => {
+    className: string;
+    style: import("react").CSSProperties;
+};

package/dist/Table/hooks/useFixed.js

@@ -0,0 +1,56 @@
+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."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import classnames from 'classnames';
+import { useCallback } from 'react';
+import { prefixCls } from "../helper";
+export default function useFixed(_ref) {
+  var tableColumns = _ref.tableColumns,
+    y = _ref.y,
+    scrollbarWidth = _ref.scrollbarWidth;
+  return useCallback(function (index) {
+    var _classnames;
+    var isHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var column = tableColumns[index];
+    var _ref2 = column.meta,
+      fixed = _ref2.fixed,
+      columnWidths = _ref2.columnWidths;
+    var style = {};
+    if (fixed === 'left') {
+      style.left = getFixedColumnOffset(columnWidths, index, true);
+    } else if (fixed === 'right') {
+      style.right = getFixedColumnOffset(columnWidths, index, false) + (isHeader && y !== undefined ? scrollbarWidth : 0);
+    }
+    return {
+      className: classnames((_classnames = {}, _defineProperty(_classnames, prefixCls('fixed-left'), fixed === 'left'), _defineProperty(_classnames, prefixCls('fixed-right'), fixed === 'right'), _classnames)),
+      style: style
+    };
+  }, [tableColumns, y, scrollbarWidth]);
+}
+
+/**
+ * 获取固定列相对边缘的偏移量
+ * @param columns 所有列
+ * @param index 当前列的索引
+ */
+function getFixedColumnOffset(columnWidths, index, isLeft) {
+  var offset = 0;
+  var relativeIndex = index;
+  var list = _toConsumableArray(columnWidths);
+  if (!isLeft) {
+    list.reverse();
+    relativeIndex = list.length - index - 1;
+  }
+  for (var i = 0; i < relativeIndex; i++) {
+    var colWidth = columnWidths[i];
+    offset += colWidth;
+  }
+  return offset;
+}

package/dist/Table/hooks/useScroll.d.ts

@@ -5,10 +5,14 @@ import { IScroll } from '../types';
  * @param props
  * @returns
  */
-export default function useScrollX(props: IProps): {
+export default function useScroll(props: IProps): {
     realWidth: number | undefined;
     headerRef: import("react").RefObject<HTMLDivElement>;
+    bodyRef: import("react").RefObject<HTMLDivElement>;
     onBodyScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+    isPingLeft: boolean;
+    isPingRight: boolean;
+    scrollbarWidth: any;
 };
 interface IProps {
     scroll: IScroll;

package/dist/Table/hooks/useScroll.js

@@ -1,41 +1,109 @@
-import { useCallback, useMemo, useRef } from 'react';
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { scrollbarWidth as getScrollbarWidth } from '@xobotyi/scrollbar-width';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getNumberFromPercentageStr } from "../helper";
+var scrollbarWidth = function () {
+  var barWidth = getScrollbarWidth();
+  if (typeof barWidth === 'undefined') {
+    return 0;
+  }
+  return barWidth;
+}();
+
 /**
  * 横向滚动条相关逻辑
  * @param props
  * @returns
  */
-export default function useScrollX(props) {
+export default function useScroll(props) {
   var scroll = props.scroll,
     totalSize = props.totalSize;
   var headerRef = useRef(null);
+  var bodyRef = useRef(null);
   var animationFrameId = useRef(null);
-  var x = scroll.x;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPingLeft = _useState2[0],
+    setIsPingLeft = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isPingRight = _useState4[0],
+    setIsPingRight = _useState4[1];
+  var x = scroll.x,
+    y = scroll.y;
   var realWidth = useMemo(function () {
     if (!totalSize) {
       return;
     }
-    return getRealWidth(x, totalSize.width);
-  }, [x, totalSize]);
-  var onBodyScroll = useCallback(function (e) {
-    // animationFrame 可以保证横向滚动时，header 和 body 不会出现不同步的情况
+    var width = getRealWidth(x, totalSize.width);
+    if (y !== undefined) {
+      return width - scrollbarWidth;
+    }
+    return width;
+  }, [x, y, totalSize]);
+  var changeIsPing = useCallback(function (elem) {
+    var scrollLeft = elem.scrollLeft;
+    if (scrollLeft <= 0) {
+      setIsPingLeft(false);
+    } else {
+      setIsPingLeft(true);
+    }
+    if (isScrolledToRight(elem, y !== undefined ? scrollbarWidth : 0)) {
+      setIsPingRight(false);
+    } else {
+      setIsPingRight(true);
+    }
+  }, [y]);
+  useEffect(function () {
+    if (realWidth && bodyRef.current) {
+      // 待表格渲染完成，宽度稳定后，初始化 ping 状态
+      changeIsPing(bodyRef.current);
+    }
+  }, [realWidth, changeIsPing]);
+  var requestAnimationFrame = useCallback(function (callback) {
+    // animationFrame 可以保证滚动时，header 和 body 不会出现不同步的情况
     if (animationFrameId.current !== null) {
       window.cancelAnimationFrame(animationFrameId.current);
     }
-    var scrollLeft = e.target.scrollLeft;
-    animationFrameId.current = window.requestAnimationFrame(function () {
+    animationFrameId.current = window.requestAnimationFrame(callback);
+  }, []);
+  var onBodyScroll = useCallback(function (e) {
+    var target = e.target;
+    var scrollLeft = target.scrollLeft;
+    requestAnimationFrame(function () {
       var _headerRef$current;
       (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.scrollTo({
         left: scrollLeft
       });
+      changeIsPing(target);
     });
-  }, []);
+  }, [requestAnimationFrame, changeIsPing]);
   return {
     realWidth: realWidth,
     headerRef: headerRef,
-    onBodyScroll: onBodyScroll
+    bodyRef: bodyRef,
+    onBodyScroll: onBodyScroll,
+    isPingLeft: isPingLeft,
+    isPingRight: isPingRight,
+    scrollbarWidth: scrollbarWidth
   };
 }
+function isScrolledToRight(element, offsetRight) {
+  // 计算最大可滚动值
+  var maxScrollLeft = element.scrollWidth - element.clientWidth - offsetRight;
+
+  // 允许一些误差，避免因为浮点数计算导致的问题
+  var DEVIATION = 2;
+
+  // 判断是否滚动到最右侧
+  return element.scrollLeft >= maxScrollLeft - DEVIATION;
+}
+
 /**
  * 获取可用实际宽度
  * @param scrollX 横向宽度值

package/dist/Table/index.js

@@ -1,4 +1,6 @@
 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 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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -12,15 +14,15 @@ import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-tabl
 import classnames from 'classnames';
 import _ from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Empty, ScrollArea, Spin } from '..';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { Empty, Spin } from '..';
 import Pagination from "./components/Pagination";
 import { getTableColumns, prefixCls } from "./helper";
-import useScrollX from "./hooks/useScroll";
-// 32 行高 + 1 底线高度
+import useFixed from "./hooks/useFixed";
+import useScroll from "./hooks/useScroll";
 var HEADER_HEIGHT = 41;
 function Table(props, ref) {
-  var _classnames;
+  var _classnames, _classnames5;
   var columns = props.columns,
     data = props.data,
     rowKey = props.rowKey,
@@ -41,21 +43,24 @@ function Table(props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     totalSize = _useState2[0],
     setTotalSize = _useState2[1];
-  var tableBodyRef = useRef(null);
   var y = scroll.y;
-  var _useScrollX = useScrollX({
+  var _useScroll = useScroll({
       totalSize: totalSize,
       scroll: scroll
     }),
-    realWidth = _useScrollX.realWidth,
-    onBodyScroll = _useScrollX.onBodyScroll,
-    headerRef = _useScrollX.headerRef;
+    realWidth = _useScroll.realWidth,
+    onBodyScroll = _useScroll.onBodyScroll,
+    headerRef = _useScroll.headerRef,
+    bodyRef = _useScroll.bodyRef,
+    isPingLeft = _useScroll.isPingLeft,
+    isPingRight = _useScroll.isPingRight,
+    scrollbarWidth = _useScroll.scrollbarWidth;
   var scrollToFirstRow = useCallback(function () {
-    if (!tableBodyRef.current) {
+    if (!bodyRef.current) {
       return;
     }
-    tableBodyRef.current.scrollTop = 0;
-  }, []);
+    bodyRef.current.scrollTop = 0;
+  }, [bodyRef]);
   useImperativeHandle(ref, function () {
     return {
       scrollToFirstRow: scrollToFirstRow
@@ -67,11 +72,15 @@ function Table(props, ref) {
     }
     return getTableColumns({
       columns: columns,
-      columnSizing: !!columnSizing,
       totalWidth: realWidth,
       onError: onError
     });
-  }, [columns, totalSize, columnSizing, realWidth, onError]);
+  }, [columns, totalSize, realWidth, onError]);
+  var getColumnFixedInfo = useFixed({
+    tableColumns: tableColumns,
+    y: y,
+    scrollbarWidth: scrollbarWidth
+  });
   var tableInstance = useReactTable({
     columns: tableColumns,
     data: data,
@@ -98,26 +107,37 @@ function Table(props, ref) {
     headerStyle.top = _.get(sticky, 'offsetHeader', 0);
   }
   var headerContent = /*#__PURE__*/React.createElement("div", {
-    className: classnames(prefixCls('header'), (_classnames = {}, _defineProperty(_classnames, prefixCls('sticky'), isStickyWork), _defineProperty(_classnames, prefixCls('overflow-x'), true), _classnames)),
+    className: classnames(prefixCls('header'), (_classnames = {}, _defineProperty(_classnames, prefixCls('overflow-x'), true), _defineProperty(_classnames, prefixCls('sticky'), isStickyWork), _classnames)),
     ref: headerRef,
     style: headerStyle
   }, _.map(headerGroups, function (headerGroup) {
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls('tr'),
-      key: headerGroup.id
-    }, _.map(headerGroup.headers, function (header) {
+      key: headerGroup.id,
+      style: {
+        width: realWidth
+      }
+    }, _.map(headerGroup.headers, function (header, index) {
       var _classnames2;
+      var _getColumnFixedInfo = getColumnFixedInfo(index, true),
+        fixedClassName = _getColumnFixedInfo.className,
+        fixedStyle = _getColumnFixedInfo.style;
       return /*#__PURE__*/React.createElement("div", {
-        className: prefixCls('th'),
-        style: {
+        className: classnames(prefixCls('th'), fixedClassName),
+        style: _objectSpread({
           width: header.getSize()
-        },
+        }, fixedStyle),
         key: header.id
       }, flexRender(header.column.columnDef.header, header.getContext()), columnSizing && /*#__PURE__*/React.createElement("div", {
         onMouseDown: header.getResizeHandler(),
         onTouchStart: header.getResizeHandler(),
         className: classnames(prefixCls('resizer'), (_classnames2 = {}, _defineProperty(_classnames2, prefixCls('self-resizing'), header.column.getIsResizing()), _defineProperty(_classnames2, prefixCls('resizing'), tableInstance.getState().columnSizingInfo.isResizingColumn), _classnames2))
       }));
+    }), y !== undefined && /*#__PURE__*/React.createElement("div", {
+      className: prefixCls('header-scroll-placeholder'),
+      style: {
+        flexBasis: scrollbarWidth
+      }
     }));
   }));
   var onClickRow = useCallback(function (rowData, rowIndex) {
@@ -138,7 +158,7 @@ function Table(props, ref) {
   var bodyContent = /*#__PURE__*/React.createElement("div", {
     className: prefixCls('body'),
     style: {
-      width: tableInstance.getTotalSize()
+      width: realWidth
     }
   }, rows.length === 0 && !loading ? emptyComponent || /*#__PURE__*/React.createElement("div", {
     className: prefixCls('empty')
@@ -149,45 +169,30 @@ function Table(props, ref) {
       key: row.id,
       className: classnames(prefixCls('tr'), _defineProperty({}, prefixCls('row-hover'), typeof onRowClick === 'function'), rowClassName(row.original, rowIndex)),
       onClick: onClickRow(row.original, rowIndex)
-    }, _.map(row.getVisibleCells(), function (cell) {
+    }, _.map(row.getVisibleCells(), function (cell, colIndex) {
+      var _getColumnFixedInfo2 = getColumnFixedInfo(colIndex),
+        fixedClassName = _getColumnFixedInfo2.className,
+        fixedStyle = _getColumnFixedInfo2.style;
       return /*#__PURE__*/React.createElement("div", {
-        className: prefixCls('td'),
+        className: classnames(prefixCls('td'), fixedClassName),
         key: cell.id,
-        style: {
+        style: _objectSpread({
           width: cell.column.getSize()
-        }
+        }, fixedStyle)
       }, flexRender(cell.column.columnDef.cell, cell.getContext()));
     }));
   }));
-  var tableContent = y && totalSize ? /*#__PURE__*/React.createElement(Spin, {
+  var tableContent = /*#__PURE__*/React.createElement(Spin, {
     spinning: !!loading
   }, /*#__PURE__*/React.createElement("div", {
     className: prefixCls('content')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('header'),
+  }, headerContent, /*#__PURE__*/React.createElement("div", {
     style: {
-      height: HEADER_HEIGHT
-    }
-  }, headerContent), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: totalSize.height - HEADER_HEIGHT
+      height: y && totalSize ? totalSize.height - HEADER_HEIGHT : 'auto'
     },
-    className: prefixCls('body-scroll')
-  }, /*#__PURE__*/React.createElement(ScrollArea, {
-    onViewportScroll: onBodyScroll,
-    ref: tableBodyRef
-  }, bodyContent)))) : /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('content')
-  }, !!loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('spin-mask')
-  }), /*#__PURE__*/React.createElement(Spin, null, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('spin'),
-    style: {
-      position: 'absolute'
-    }
-  }))), headerContent, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ScrollArea, {
-    onViewportScroll: onBodyScroll,
-    ref: tableBodyRef
+    className: classnames(prefixCls('body-scroll'), _defineProperty({}, prefixCls('scroll-y'), y !== undefined)),
+    ref: bodyRef,
+    onScroll: onBodyScroll
   }, bodyContent)));
   var tableStyle = {};
   if (y) {
@@ -206,7 +211,7 @@ function Table(props, ref) {
       });
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classnames(prefixCls('main'), _defineProperty({}, prefixCls('overflow-hidden'), !!y))
+    className: classnames(prefixCls('main'), (_classnames5 = {}, _defineProperty(_classnames5, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames5, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames5, prefixCls('ping-right'), isPingRight), _classnames5))
   }, tableContent)), /*#__PURE__*/React.createElement(Pagination, {
     pagination: pagination,
     scroll: scroll,

package/dist/Table/style/index.less

@@ -4,8 +4,9 @@
 @import '../../ScrollArea/style/index.less';
 @import '../../Empty/style/index.less';
 
+@header-height: 40px;
+
 .ald-table-container {
-  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -22,7 +23,6 @@
     display: flex;
     flex-direction: column;
     border-spacing: 0;
-    position: relative;
 
     .ald-table-spin {
       position: absolute;
@@ -86,6 +86,55 @@
     position: relative;
     border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
     flex: 0 0 auto;
+
+    &.ald-table-fixed-left,
+    &.ald-table-fixed-right {
+      position: sticky;
+      background-color: #fff;
+      z-index: 2;
+    }
+  }
+
+  .fixed-left-shadow {
+    &::after {
+      position: absolute;
+      right: 0;
+      transform: translateX(100%);
+      top: 0;
+      bottom: 0;
+      width: 30px;
+      transition: box-shadow 0.2s;
+      content: '';
+      pointer-events: none;
+      box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.06);
+    }
+  }
+
+  .fixed-right-shadow {
+    &::after {
+      position: absolute;
+      left: 0;
+      transform: translateX(-100%);
+      top: 0;
+      bottom: 0;
+      width: 30px;
+      transition: box-shadow 0.2s;
+      content: '';
+      pointer-events: none;
+      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.06);
+    }
+  }
+
+  &.ald-table-ping-left {
+    .ald-table-fixed-left {
+      .fixed-left-shadow();
+    }
+  }
+
+  &.ald-table-ping-right {
+    .ald-table-fixed-right {
+      .fixed-right-shadow();
+    }
   }
 
   .ald-table-th {
@@ -99,7 +148,7 @@
     padding-left: var(--alias-spacing-200, 16px);
     font-size: 12px;
     overflow: hidden;
-    height: 40px;
+    height: @header-height;
     display: flex;
     align-items: center;
   }
@@ -130,7 +179,6 @@
 
   .ald-table-body {
     min-height: 96px;
-    overflow: auto;
 
     .ald-table-tr {
       &.ald-table-row-hover:hover {
@@ -186,8 +234,26 @@
   height: 100%;
 }
 
+.ald-table-header {
+  background-color: #fff;
+}
+
+.ald-table-header-scroll-placeholder {
+  height: @header-height;
+  position: sticky;
+  right: 0;
+  background-color: #fff;
+  z-index: 2;
+  flex: 0 0 auto;
+}
+
 .ald-table-body-scroll {
   overflow: auto;
+  height: 100%;
+
+  &.ald-table-scroll-y {
+    overflow-y: scroll;
+  }
 }
 
 .ald-table-empty {

package/dist/Table/types.d.ts

@@ -39,4 +39,8 @@ export interface ITableColumn<TDataItem = unknown> {
     ellipsis?: boolean;
     noPadding?: boolean;
     align?: 'left' | 'center' | 'right';
+    fixed?: 'left' | 'right';
+}
+export interface IInnerTableColumn<TDataItem = unknown> extends ITableColumn<TDataItem> {
+    columnWidths: number[];
 }