@arim-aisdc/public-components 2.3.49 → 2.3.51

package/dist/components/TableMax/contexts/VirtualScroll/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/TableMax/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './VirtualScroll';

package/dist/components/TableMax/contexts/index.js

@@ -0,0 +1 @@
+export * from "./VirtualScroll";

package/dist/components/TableMax/hooks/useColumnWidth copy.js

@@ -72,7 +72,8 @@ export var useColumnWidth = function useColumnWidth(_ref) {
       if (prevState.tableContainerWidth > 0 && newWidth > prevState.tableContainerWidth) {
         if (totalVisibleWidth < newWidth) {
           // 计算剩余宽度
-          var remainWidth = newWidth - totalVisibleWidth - 10;
+          // const remainWidth = newWidth - totalVisibleWidth - 10;
+          var remainWidth = newWidth - totalVisibleWidth;
           var unselectedCount = visibleColumns.length;
 
           // 如果有未排除的列，均匀分配剩余宽度
@@ -91,7 +92,8 @@ export var useColumnWidth = function useColumnWidth(_ref) {
         }
       } else if (prevState.tableContainerWidth > 0 && newWidth < prevState.tableContainerWidth && JSON.stringify(prevState.initColumnsSizeMap) !== '{}') {
         // 容器变小时，重新计算
-        var reducedWidth = newWidth - totalVisibleWidth - 10;
+        // const reducedWidth =  newWidth - totalVisibleWidth -10;
+        var reducedWidth = newWidth - totalVisibleWidth;
         var _unselectedCount = visibleColumns.length;
         if (_unselectedCount > 0) {
           var _averageWidth = reducedWidth / _unselectedCount;
@@ -152,7 +154,10 @@ export var useColumnWidth = function useColumnWidth(_ref) {
         //列宽减少
         var newVisibleColumnsSizing = prevState.columnSizing;
         delete newVisibleColumnsSizing[key];
-        var containerWidth = getTableWidth() - 10 || 0;
+
+        // const containerWidth = getTableWidth() - 10 || 0;
+        var containerWidth = getTableWidth() || 0;
+
         // 计算当前总宽度
         var totalWidth = Object.values(newVisibleColumnsSizing).reduce(function (sum, width) {
           return Number(sum || 0) + Number(width || 0);
@@ -197,7 +202,8 @@ export var useColumnWidth = function useColumnWidth(_ref) {
     var allColumnWidth = Object.values(columnsSizeMap).reduce(function (sum, width) {
       return sum + Number(width || 0);
     }, 0);
-    var remainTableContainerWidth = currentWidth - allColumnWidth - 10;
+    // let remainTableContainerWidth = currentWidth - allColumnWidth - 10;
+    var remainTableContainerWidth = currentWidth - allColumnWidth;
     var newColumnSizeMap = _objectSpread({}, columnsSizeMap);
 
     // 处理未设置宽度的列
@@ -211,7 +217,8 @@ export var useColumnWidth = function useColumnWidth(_ref) {
       allColumnWidth = Object.values(newColumnSizeMap).reduce(function (sum, width) {
         return sum + Number(width || 0);
       }, 0);
-      remainTableContainerWidth = currentWidth - allColumnWidth - 10;
+      // remainTableContainerWidth = currentWidth - allColumnWidth - 10;
+      remainTableContainerWidth = currentWidth - allColumnWidth;
     }
 
     // 分配剩余宽度
@@ -315,7 +322,9 @@ export var useColumnWidth = function useColumnWidth(_ref) {
       var totalWidth = Object.values(newVisibleColumnsSizing).reduce(function (sum, width) {
         return Number(sum || 0) + Number(width || 0);
       }, 0);
-      var containerWidth = getTableWidth() - 10 || 0;
+
+      // const containerWidth = getTableWidth() - 10 || 0;
+      var containerWidth = getTableWidth() || 0;
 
       // 处理列宽变大
       if (widthDiff > 0) {

package/dist/components/TableMax/hooks/useDragDrop.d.ts

@@ -0,0 +1,27 @@
+import { DropSide, IMenuOptionsType } from "../type";
+export declare const useDragDrop: (tableId: string, table: any, reorderRow?: any, getContextMenu?: (params: {
+    row: any;
+    column: any;
+}) => IMenuOptionsType) => {
+    dragDropState: {
+        hoverRowIndex: number;
+        dropSide: DropSide;
+        contextMenuData: {
+            visible: boolean;
+            clientX: number;
+            clientY: number;
+            row: {};
+            column: {};
+            options: any[];
+        };
+    };
+    clearHoverRowIndex: () => void;
+    changeHoverRow: ({ target, origin }: {
+        target: any;
+        origin: any;
+    }) => void;
+    handleCellContextMenu: (e: React.MouseEvent, cell: any) => void;
+    closeContextMenu: () => void;
+    dropEmptyRef: import("react-dnd").ConnectDropTarget;
+    dropTableEmptyRef: import("react-dnd").ConnectDropTarget;
+};

package/dist/components/TableMax/hooks/useDragDrop.js

@@ -0,0 +1,167 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+// hooks/useDragDrop.ts
+import { useState, useCallback } from 'react';
+import { useDrop } from 'react-dnd';
+import { events, useEventBus } from "../../..";
+import { DropSide } from "../type";
+export var useDragDrop = function useDragDrop(tableId, table, reorderRow, getContextMenu) {
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverRowIndex = _useState2[0],
+    setHoverRowIndex = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dropSide = _useState4[0],
+    setDropSide = _useState4[1];
+  var _useState5 = useState({
+      visible: false,
+      clientX: 0,
+      clientY: 0,
+      row: {},
+      column: {},
+      options: []
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    contextMenuData = _useState6[0],
+    setContextMenuData = _useState6[1];
+
+  // 清除hover行信息
+  var clearHoverRowIndex = useCallback(function () {
+    setHoverRowIndex(undefined);
+  }, []);
+
+  // 当前table在hover时进行广播
+  var publishCurTableHoveringEvent = function publishCurTableHoveringEvent() {
+    events.emit('TABLE_HOVERING', tableId);
+  };
+
+  // 接收广播:其他table在hover时，取消当前table的hover
+  var receiveCurTableHoveringEvent = useCallback(function (hoveringTableId) {
+    if (hoveringTableId !== tableId) {
+      clearHoverRowIndex();
+    }
+  }, [tableId, clearHoverRowIndex]);
+  useEventBus('TABLE_HOVERING', receiveCurTableHoveringEvent);
+
+  // 拖动时，即时修改hover信息
+  var changeHoverRow = useCallback(function (_ref) {
+    var _origin$draggedRow, _origin$draggedRows;
+    var target = _ref.target,
+      origin = _ref.origin;
+    publishCurTableHoveringEvent();
+    var targetRowIndex = target === null || target === void 0 ? void 0 : target.index;
+    var originRowIndex = origin === null || origin === void 0 || (_origin$draggedRow = origin.draggedRow) === null || _origin$draggedRow === void 0 ? void 0 : _origin$draggedRow.index;
+    var originRowIndexList = (origin === null || origin === void 0 || (_origin$draggedRows = origin.draggedRows) === null || _origin$draggedRows === void 0 ? void 0 : _origin$draggedRows.map(function (row) {
+      return row.index;
+    })) || [];
+    if (tableId === origin.sourceTableId && originRowIndexList.includes(targetRowIndex)) {
+      clearHoverRowIndex();
+    } else if (targetRowIndex !== hoverRowIndex) {
+      setHoverRowIndex(targetRowIndex);
+      if (tableId !== origin.sourceTableId) {
+        setDropSide(DropSide.Top);
+      } else {
+        setDropSide(targetRowIndex > originRowIndex ? DropSide.Bottom : DropSide.Top);
+      }
+    }
+  }, [hoverRowIndex, tableId, clearHoverRowIndex]);
+
+  // 拖动到最后一行下面的空白处，在最后一行数据上展示预览位置
+  var addToLast = useCallback(function () {
+    publishCurTableHoveringEvent();
+    var lastIndex = table.getRowModel().rows.length - 1;
+    if (lastIndex !== hoverRowIndex || lastIndex === hoverRowIndex && dropSide !== DropSide.Bottom) {
+      setHoverRowIndex(lastIndex);
+      setDropSide(DropSide.Bottom);
+    }
+  }, [hoverRowIndex, dropSide, table]);
+
+  // cell右键菜单
+  var handleCellContextMenu = useCallback(function (e, cell) {
+    if (getContextMenu) {
+      var options = getContextMenu({
+        row: cell.row.original,
+        column: cell.column.columnDef
+      });
+      setContextMenuData({
+        visible: options.length > 0,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        row: cell.row.original,
+        column: cell.column.columnDef,
+        options: options
+      });
+      e.preventDefault();
+    }
+  }, [getContextMenu]);
+
+  // 关闭菜单
+  var closeContextMenu = useCallback(function () {
+    setContextMenuData(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        visible: false
+      });
+    });
+  }, []);
+
+  // Drop hooks
+  var _useDrop = useDrop({
+      accept: 'TABLE_ROW',
+      drop: function drop(formDatas) {
+        return reorderRow === null || reorderRow === void 0 ? void 0 : reorderRow(formDatas, {
+          hoverRow: {
+            index: 0
+          },
+          targetTableId: tableId
+        });
+      }
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    dropEmptyRef = _useDrop2[1];
+  var _useDrop3 = useDrop({
+      accept: 'TABLE_ROW',
+      drop: function drop(formDatas, monitor) {
+        if (monitor.didDrop()) {
+          return undefined;
+        }
+        clearHoverRowIndex();
+        return reorderRow === null || reorderRow === void 0 ? void 0 : reorderRow(formDatas, {
+          hoverRow: undefined,
+          targetTableId: tableId
+        });
+      },
+      hover: function hover(item, monitor) {
+        if (monitor.isOver({
+          shallow: true
+        }) && monitor.canDrop()) {
+          addToLast();
+        }
+      }
+    }),
+    _useDrop4 = _slicedToArray(_useDrop3, 2),
+    dropTableEmptyRef = _useDrop4[1];
+  return {
+    dragDropState: {
+      hoverRowIndex: hoverRowIndex,
+      dropSide: dropSide,
+      contextMenuData: contextMenuData
+    },
+    clearHoverRowIndex: clearHoverRowIndex,
+    changeHoverRow: changeHoverRow,
+    handleCellContextMenu: handleCellContextMenu,
+    closeContextMenu: closeContextMenu,
+    dropEmptyRef: dropEmptyRef,
+    dropTableEmptyRef: dropTableEmptyRef
+  };
+};

package/dist/components/TableMax/hooks/useTableComponents.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface TableComponents {
+    TableHeader: React.ComponentType<any>;
+    TableBody: React.ComponentType<any>;
+}
+export declare const useTableComponents: () => TableComponents;

package/dist/components/TableMax/hooks/useTableComponents.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { OriginalTableHeader, VirtualTableHeader } from "../TableHeader";
+import { OriginalTableBody, VirtualTableBody } from "../TableBody";
+import { useIsVirtualEnabled } from "./useVirtualScroll";
+export var useTableComponents = function useTableComponents() {
+  var isVirtualEnabled = useIsVirtualEnabled();
+  return useMemo(function () {
+    if (isVirtualEnabled) {
+      return {
+        TableHeader: VirtualTableHeader,
+        TableBody: VirtualTableBody
+      };
+    }
+    return {
+      TableHeader: OriginalTableHeader,
+      TableBody: OriginalTableBody
+    };
+  }, [isVirtualEnabled]);
+};

package/dist/components/TableMax/hooks/useVirtualCalculations.d.ts

@@ -0,0 +1,25 @@
+import { VirtualScrollConfig } from '../contexts';
+export declare const useVirtualCalculations: (table: any, config: VirtualScrollConfig, tableHeaderRef: React.RefObject<HTMLDivElement>, tableBodyRef: React.RefObject<HTMLDivElement>) => {
+    state: {
+        columnVirtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+        virtualColumns: import("@tanstack/virtual-core").VirtualItem[];
+        virtualPaddingLeft: any;
+        virtualPaddingRight: number;
+        rowVirtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+        virtualRows: import("@tanstack/virtual-core").VirtualItem[];
+        leftPinnedColumns: any;
+        rightPinnedColumns: any;
+        scrollableColumns: any;
+    };
+    isVirtualEnabled: boolean;
+};
+export declare const separateColumns: (table: any, openVirtualColumns: boolean) => {
+    leftPinnedColumns: any;
+    rightPinnedColumns: any;
+    scrollableColumns: any;
+};
+export declare const calculateVirtualPadding: (virtualColumns: any[], totalSize: number) => {
+    left: any;
+    right: number;
+};
+export declare const shouldEnableVirtualization: (config: VirtualScrollConfig) => boolean;

package/dist/components/TableMax/hooks/useVirtualCalculations.js

@@ -0,0 +1,106 @@
+// hooks/useVirtualCalculations.ts
+import { useEffect, useMemo } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+export var useVirtualCalculations = function useVirtualCalculations(table, config, tableHeaderRef, tableBodyRef) {
+  var isVirtualEnabled = shouldEnableVirtualization(config);
+  var visibleColumns = table.getVisibleLeafColumns();
+
+  // 列分类
+  var _useMemo = useMemo(function () {
+      return separateColumns(table, !!config.openVirtualColumns);
+    }, [visibleColumns, config.openVirtualColumns, table.getState().columnPinning]),
+    leftPinnedColumns = _useMemo.leftPinnedColumns,
+    rightPinnedColumns = _useMemo.rightPinnedColumns,
+    scrollableColumns = _useMemo.scrollableColumns;
+
+  // 列虚拟化配置
+  var columnVirtualizerConfig = useMemo(function () {
+    if (!config.openVirtualColumns) return null;
+    console.log('columnVirtualizerConfig');
+    return {
+      count: scrollableColumns.length,
+      estimateSize: function estimateSize(index) {
+        return scrollableColumns[index].getSize();
+      },
+      getScrollElement: function getScrollElement() {
+        return tableHeaderRef.current;
+      },
+      horizontal: true,
+      overscan: config.columnOverscan || 3
+    };
+  }, [config.openVirtualColumns, scrollableColumns.length, config.columnOverscan, tableHeaderRef.current]);
+  var columnVirtualizer = columnVirtualizerConfig ? useVirtualizer(columnVirtualizerConfig) : null;
+  var virtualColumns = config.openVirtualColumns ? (columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.getVirtualItems()) || [] : [];
+  var _useMemo2 = useMemo(function () {
+      return calculateVirtualPadding(virtualColumns, (columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.getTotalSize()) || 0);
+    }, [virtualColumns, columnVirtualizer]),
+    virtualPaddingLeft = _useMemo2.left,
+    virtualPaddingRight = _useMemo2.right;
+
+  // 行虚拟化配置 - 包含 rowHeight 依赖
+  var rows = table.getRowModel().rows;
+  var rowVirtualizerConfig = useMemo(function () {
+    if (!config.openVirtualRows) return null;
+    return {
+      count: rows.length,
+      estimateSize: function estimateSize() {
+        return config.rowHeight || 50;
+      },
+      // 使用 config.rowHeight
+      getScrollElement: function getScrollElement() {
+        return tableBodyRef.current;
+      },
+      overscan: config.rowOverscan || 10
+    };
+  }, [config.openVirtualRows, rows.length, config.rowHeight,
+  // 关键：包含 rowHeight 依赖
+  config.rowOverscan, tableBodyRef.current]);
+  var rowVirtualizer = rowVirtualizerConfig ? useVirtualizer(rowVirtualizerConfig) : null;
+
+  // 响应 rowHeight 变化
+  useEffect(function () {
+    if (rowVirtualizer && config.openVirtualRows) {
+      // 当 rowHeight 变化时，重新测量所有行
+      rowVirtualizer.measure();
+    }
+  }, [config.rowHeight, rowVirtualizer, config.openVirtualRows]);
+  var virtualRows = config.openVirtualRows ? (rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getVirtualItems()) || [] : [];
+  var state = useMemo(function () {
+    return {
+      columnVirtualizer: columnVirtualizer,
+      virtualColumns: virtualColumns,
+      virtualPaddingLeft: virtualPaddingLeft,
+      virtualPaddingRight: virtualPaddingRight,
+      rowVirtualizer: rowVirtualizer,
+      virtualRows: virtualRows,
+      leftPinnedColumns: leftPinnedColumns,
+      rightPinnedColumns: rightPinnedColumns,
+      scrollableColumns: scrollableColumns
+    };
+  }, [columnVirtualizer, virtualColumns, virtualPaddingLeft, virtualPaddingRight, rowVirtualizer, virtualRows, leftPinnedColumns, rightPinnedColumns, scrollableColumns]);
+  return {
+    state: state,
+    isVirtualEnabled: isVirtualEnabled
+  };
+};
+export var separateColumns = function separateColumns(table, openVirtualColumns) {
+  return {
+    leftPinnedColumns: table.getLeftVisibleLeafColumns(),
+    rightPinnedColumns: table.getRightVisibleLeafColumns(),
+    scrollableColumns: table.getCenterVisibleLeafColumns()
+  };
+};
+export var calculateVirtualPadding = function calculateVirtualPadding(virtualColumns, totalSize) {
+  var _virtualColumns$0$sta, _virtualColumns$, _virtualColumns$end, _virtualColumns;
+  if (!virtualColumns.length) return {
+    left: 0,
+    right: 0
+  };
+  return {
+    left: (_virtualColumns$0$sta = (_virtualColumns$ = virtualColumns[0]) === null || _virtualColumns$ === void 0 ? void 0 : _virtualColumns$.start) !== null && _virtualColumns$0$sta !== void 0 ? _virtualColumns$0$sta : 0,
+    right: totalSize - ((_virtualColumns$end = (_virtualColumns = virtualColumns[virtualColumns.length - 1]) === null || _virtualColumns === void 0 ? void 0 : _virtualColumns.end) !== null && _virtualColumns$end !== void 0 ? _virtualColumns$end : 0)
+  };
+};
+export var shouldEnableVirtualization = function shouldEnableVirtualization(config) {
+  return !!(config.openVirtualColumns || config.openVirtualRows);
+};

package/dist/components/TableMax/hooks/useVirtualScroll.d.ts

@@ -0,0 +1,4 @@
+export declare const useVirtualScroll: () => import("../contexts").VirtualScrollContextType;
+export declare const useVirtualConfig: () => import("../contexts").VirtualScrollConfig;
+export declare const useVirtualState: () => import("../contexts").VirtualScrollState;
+export declare const useIsVirtualEnabled: () => boolean;

package/dist/components/TableMax/hooks/useVirtualScroll.js

@@ -0,0 +1,30 @@
+import { useContext, useMemo } from 'react';
+import { VirtualScrollContext } from "../contexts";
+export var useVirtualScroll = function useVirtualScroll() {
+  var context = useContext(VirtualScrollContext);
+  if (!context) {
+    throw new Error('useVirtualScroll must be used within VirtualScrollProvider');
+  }
+  return context;
+};
+export var useVirtualConfig = function useVirtualConfig() {
+  var _useVirtualScroll = useVirtualScroll(),
+    config = _useVirtualScroll.config;
+  return useMemo(function () {
+    return config;
+  }, [config]);
+};
+export var useVirtualState = function useVirtualState() {
+  var _useVirtualScroll2 = useVirtualScroll(),
+    state = _useVirtualScroll2.state;
+  return useMemo(function () {
+    return state;
+  }, [state]);
+};
+export var useIsVirtualEnabled = function useIsVirtualEnabled() {
+  var _useVirtualScroll3 = useVirtualScroll(),
+    isVirtualEnabled = _useVirtualScroll3.isVirtualEnabled;
+  return useMemo(function () {
+    return isVirtualEnabled;
+  }, [isVirtualEnabled]);
+};

package/dist/components/TableMax/tableMax.less

@@ -134,13 +134,30 @@
           overflow: hidden;
           box-sizing: border-box;
           height: fit-content;
-          width: calc(100% - 10px);
+          // width: calc(100% - 10px);
           margin: 0;
           // flex: 1;
           justify-content: space-between;
+          overflow-y: scroll;
           .cell-wapper {
             line-height: @global-table-max-header-cell-wapper-line-height;
           }
+
+          &::-webkit-scrollbar {
+          width: 10px;
+          height: 10px;
+        }
+        
+        &::-webkit-scrollbar-track, &::-webkit-scrollbar-corner {
+          background: @global-table-max-scrollbar-track !important;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 20px;
+          border: 6px solid transparent !important;
+          background: @scrollThumb !important;
+          background-clip: padding-box !important;
+        }
         }
 
         .table-header-scroll {
@@ -263,18 +280,18 @@
 .table-max-content-compact {
   // 紧凑模式
   .cell-wapper {
-    line-height: 16px !important;
+    line-height: 22px !important;
     padding: 4px 2px !important;
     height: 24px !important;
   }
 
   .tbody-tr-td, .table-thead-tr {
-    height: 24px !important;
-    line-height: 24px !important;
+    height:30px !important;
+    line-height: 30px !important;
 
     .table-max-cell-wrapper {
       padding: 1px 2px;
-      line-height: 22px;
+      line-height: 28px;
     }
   }
 }

package/dist/components/TableMax/type.d.ts

@@ -331,6 +331,8 @@ export type TableMaxProps = {
         opera: any;
     }, field: string, value: any) => Promise<any>;
     exportConfig?: ExportOptions;
+    openVirtualColumns?: boolean;
+    openVirtualRows?: boolean;
 };
 export interface TableMaxColumnType {
     /**每一列的id是唯一的 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "2.3.49",
+  "version": "2.3.51",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",
@@ -50,6 +50,7 @@
     "@ant-design/pro-components": "^2.7.10",
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/react-table": "^8.9.1",
+    "@tanstack/react-virtual": "^3.13.12",
     "ahooks": "^3.7.8",
     "classnames": "^2.5.1",
     "css-vars-ponyfill": "^2.4.8",