@arim-aisdc/public-components 0.0.20 → 0.0.22

package/dist/components/TableMax/TableBody/Row.d.ts

@@ -2,7 +2,7 @@ import { OnSelectChangeType } from "../type";
 import { Table } from '@tanstack/react-table';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import './index.less';
-declare const Row: ({ table, tableId, row, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, reorderRow, tableContainerWidth, canRowDrag, rowClassName, cellClassName, rowStyle, getCellProps, editting, rowEditing, renderSubComponent, selectedRowDragging, setSelectedRowDragging, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, rowHeight, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, handleEditRowWhenDClick, canEditRowWhenDClick, theme, pinShadowVisible, dragBeforeStart, }: {
+declare const Row: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, reorderRow, canRowDrag, rowClassName, cellClassName, rowStyle, getCellProps, editting, rowEditing, renderSubComponent, selectedRowDragging, setSelectedRowDragging, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, rowHeight, disableDragRowIds, selectRowWhenClick, handleEditRowWhenDClick, canEditRowWhenDClick, theme, pinShadowVisible, dragBeforeStart, }: {
     table: Table<any>;
     tableId: string;
     row: any;
@@ -10,7 +10,7 @@ declare const Row: ({ table, tableId, row, rowSelectedId, setRowSelectedId, sele
     setRowSelectedId?: Dispatch<SetStateAction<string | undefined>>;
     selectedRowChange?: (row: any) => void;
     onSelectChange?: OnSelectChangeType;
-    tableContainerWidth?: number;
+    tableBodyRef: any;
     canSelection?: boolean;
     selectionWithoutChecked?: boolean;
     reorderRow?: (targetRowIndex: any, draggedRowIndex: any) => void;
@@ -31,7 +31,7 @@ declare const Row: ({ table, tableId, row, rowSelectedId, setRowSelectedId, sele
     onRowMouseClick?: (row: any) => void;
     onRowMouseDoubleClick?: (row: any) => void;
     rowHeight: number;
-    disableDragRowIds: any[];
+    disableDragRowIds?: any[];
     selectRowWhenClick: boolean;
     hasVerticalScrollBar: boolean;
     handleEditRowWhenDClick: (row: any) => void;

package/dist/components/TableMax/TableBody/Row.js

@@ -23,8 +23,9 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var initselectedIndex;
 var Row = function Row(_ref) {
-  var _row, _row2;
-  var table = _ref.table,
+  var _row, _row2, _tableBodyRef$current, _tableBodyRef$current2;
+  var tableBodyRef = _ref.tableBodyRef,
+    table = _ref.table,
     tableId = _ref.tableId,
     row = _ref.row,
     rowSelectedId = _ref.rowSelectedId,
@@ -34,7 +35,6 @@ var Row = function Row(_ref) {
     canSelection = _ref.canSelection,
     selectionWithoutChecked = _ref.selectionWithoutChecked,
     reorderRow = _ref.reorderRow,
-    tableContainerWidth = _ref.tableContainerWidth,
     canRowDrag = _ref.canRowDrag,
     rowClassName = _ref.rowClassName,
     cellClassName = _ref.cellClassName,
@@ -52,7 +52,6 @@ var Row = function Row(_ref) {
     rowHeight = _ref.rowHeight,
     disableDragRowIds = _ref.disableDragRowIds,
     selectRowWhenClick = _ref.selectRowWhenClick,
-    hasVerticalScrollBar = _ref.hasVerticalScrollBar,
     handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
     canEditRowWhenDClick = _ref.canEditRowWhenDClick,
     theme = _ref.theme,
@@ -239,11 +238,11 @@ var Row = function Row(_ref) {
       id: rowEditing ? "".concat(tableId, "-tbody-tr-editing") : undefined,
       ref: function ref(node) {
         dropRef(node && !editting ? node : null);
-        dragRef(node && canRowDrag && !editting && !disableDragRowIds.includes(row.id) ? node : null);
+        dragRef(node && canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? node : null);
       },
       style: _objectSpread({
         opacity: isDragging || selectedRowDragging && row.getIsSelected() ? 0.5 : 1,
-        cursor: canRowDrag && !editting && !disableDragRowIds.includes(row.id) ? 'move' : 'auto'
+        cursor: canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? 'move' : 'auto'
       }, rowStyle),
       onClick: rowClickOrDoubleClick,
       onMouseEnter: rowMouseEnter,
@@ -287,13 +286,13 @@ var Row = function Row(_ref) {
         style: {
           padding: 0
         },
-        children: !!tableContainerWidth && /*#__PURE__*/_jsx("div", {
+        children: !!(tableBodyRef !== null && tableBodyRef !== void 0 && (_tableBodyRef$current = tableBodyRef.current) !== null && _tableBodyRef$current !== void 0 && _tableBodyRef$current.clientWidth) && /*#__PURE__*/_jsx("div", {
           id: "".concat(tableId, "_expand-table"),
           className: "subRowWrapper"
           // 减去10，避免被父表滚动条覆盖
           ,
           style: {
-            width: "".concat(tableContainerWidth - (hasVerticalScrollBar ? 10 : 0), "px")
+            width: "".concat(tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.clientWidth, "px")
           },
           children: renderSubComponent && renderSubComponent({
             row: row

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

@@ -1,8 +1,10 @@
 import { Table } from '@tanstack/react-table';
 import { OnSelectChangeType } from "../type";
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import './index.less';
 type TableBodyPropsType = {
+    tableBodyRef: MutableRefObject<HTMLDivElement> | null;
+    tableContentRef: MutableRefObject<HTMLDivElement> | null;
     table: Table<any>;
     tableId: string;
     theme: string;
@@ -14,9 +16,6 @@ type TableBodyPropsType = {
     canFilter: boolean;
     canSelection: boolean;
     selectionWithoutChecked?: boolean;
-    tableBodyHeight: number;
-    bodyContentHeight: number;
-    tableContainerWidth: number;
     selectedRowDragging: boolean;
     setSelectedRowDragging: Dispatch<SetStateAction<boolean>>;
     canRowDrag: boolean;
@@ -53,5 +52,5 @@ type TableBodyPropsType = {
     };
     dragBeforeStart: (datas: any) => boolean;
 };
-declare const TableBody: ({ table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableBodyHeight, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas, emptyDataHeight, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, pinShadowVisible, dragBeforeStart, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
+declare const TableBody: ({ tableContentRef, tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas, emptyDataHeight, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, pinShadowVisible, dragBeforeStart, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

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

@@ -12,16 +12,18 @@ import { useDrop } from 'react-dnd';
 import { CustomDragLayer } from "../components/CustomDragerLayer";
 // import RowContent from "../components/RowContent";
 
-import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { ColumnType } from "../TableMax";
 import Row from "./Row";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var TableBody = function TableBody(_ref) {
-  var _headerGroups;
-  var table = _ref.table,
+  var _tableContentRef$curr, _headerGroups;
+  var tableContentRef = _ref.tableContentRef,
+    tableBodyRef = _ref.tableBodyRef,
+    table = _ref.table,
     tableId = _ref.tableId,
     theme = _ref.theme,
     reorderRow = _ref.reorderRow,
@@ -31,8 +33,6 @@ var TableBody = function TableBody(_ref) {
     onSelectChange = _ref.onSelectChange,
     canSelection = _ref.canSelection,
     selectionWithoutChecked = _ref.selectionWithoutChecked,
-    tableBodyHeight = _ref.tableBodyHeight,
-    tableContainerWidth = _ref.tableContainerWidth,
     selectedRowDragging = _ref.selectedRowDragging,
     setSelectedRowDragging = _ref.setSelectedRowDragging,
     canRowDrag = _ref.canRowDrag,
@@ -58,12 +58,8 @@ var TableBody = function TableBody(_ref) {
     handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
     pinShadowVisible = _ref.pinShadowVisible,
     dragBeforeStart = _ref.dragBeforeStart;
-  // const tbodyRef = useRef<any>(null);
-  // const theadRef = useRef<any>(null);
   var headerGroups = table.getHeaderGroups();
 
-  // const { rows } = table.getRowModel();
-
   // useEffect(() => {
   //   if (tbodyRef.current) {
   //     console.log('tbodyRef.current.scrollHeight', tbodyRef.current.scrollHeight)
@@ -164,6 +160,7 @@ var TableBody = function TableBody(_ref) {
     _useDrop2 = _slicedToArray(_useDrop, 2),
     dropRef = _useDrop2[1];
   var EmptyContent = function EmptyContent() {
+    var _tableBodyRef$current;
     return /*#__PURE__*/_jsx("tr", {
       className: "empty-container",
       style: {
@@ -172,7 +169,7 @@ var TableBody = function TableBody(_ref) {
       children: /*#__PURE__*/_jsx("td", {
         className: "empty-wapper",
         style: {
-          width: "".concat(tableContainerWidth - (hasVerticalScrollBar ? 10 : 0), "px"),
+          width: "".concat(tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 ? void 0 : _tableBodyRef$current.clientWidth, "px"),
           height: emptyDataHeight
         },
         children: loading ? /*#__PURE__*/_jsx(_Spin, {}) : /*#__PURE__*/_jsxs("span", {
@@ -195,9 +192,9 @@ var TableBody = function TableBody(_ref) {
       // 当前行是否编辑中
       var rowEditing = row.id === editingRowId;
       return /*#__PURE__*/_jsx(Row, {
+        tableBodyRef: tableBodyRef,
         table: table,
         tableId: tableId,
-        tableContainerWidth: tableContainerWidth,
         row: row,
         rowKey: rowKey,
         theme: theme,
@@ -234,14 +231,12 @@ var TableBody = function TableBody(_ref) {
     });
   };
   var tbodyRender = function tbodyRender() {
-    if (!loading && datas.length !== 0) {
+    var _table$getRowModel$ro;
+    if (!loading && datas.length !== 0 && ((_table$getRowModel$ro = table.getRowModel().rows) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.length) !== 0) {
       return TBodyContent();
     }
     return EmptyContent();
   };
-  useEffect(function () {
-    console.log(tableBodyHeight, 'tableBodyHeight*******************');
-  }, [tableBodyHeight]);
   return (
     /*#__PURE__*/
     // 修复筛选数据为空时，滚动条丢失
@@ -256,11 +251,14 @@ var TableBody = function TableBody(_ref) {
         table: table,
         tableId: tableId
       }), document.body), /*#__PURE__*/_jsxs("table", {
+        style: {
+          width: "".concat(((_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientWidth) - (hasVerticalScrollBar ? 10 : 0), "px")
+        },
         children: [/*#__PURE__*/_jsx("colgroup", {
           children: headerGroups === null || headerGroups === void 0 || (_headerGroups = headerGroups[headerGroups.length - 1]) === null || _headerGroups === void 0 || (_headerGroups = _headerGroups.headers) === null || _headerGroups === void 0 ? void 0 : _headerGroups.map(function (header) {
-            var _header$column;
+            var _header$column, _header$column2;
             return /*#__PURE__*/_jsx("col", {
-              width: (header === null || header === void 0 || (_header$column = header.column) === null || _header$column === void 0 ? void 0 : _header$column.getSize()) || 80
+              width: header.id !== ColumnType.PlaceHolder ? (header === null || header === void 0 || (_header$column = header.column) === null || _header$column === void 0 ? void 0 : _header$column.getSize()) || 80 : header === null || header === void 0 || (_header$column2 = header.column) === null || _header$column2 === void 0 ? void 0 : _header$column2.columnDef.size
             }, header.id);
           })
         }), /*#__PURE__*/_jsx("tbody", {

package/dist/components/TableMax/TableHeader/Cell.d.ts

@@ -1,7 +1,9 @@
 import { TableMaxColumnType } from "../type";
 import { ColumnResizeMode, Header, Table } from '@tanstack/react-table';
+import { MutableRefObject } from 'react';
 import './index.less';
 type ICellType = {
+    tableContentRef: MutableRefObject<HTMLDivElement> | null;
     header: Header<TableMaxColumnType, unknown>;
     table: Table<TableMaxColumnType>;
     hasGroup?: boolean;
@@ -9,5 +11,5 @@ type ICellType = {
     getHeaderCellProps?: (columns: TableMaxColumnType[]) => object;
     columnResizeMode: ColumnResizeMode;
 };
-declare const Cell: ({ header, table, hasGroup, canSorting, getHeaderCellProps, columnResizeMode }: ICellType) => import("react/jsx-runtime").JSX.Element;
+declare const Cell: ({ tableContentRef, header, table, hasGroup, canSorting, getHeaderCellProps }: ICellType) => import("react/jsx-runtime").JSX.Element;
 export default Cell;

package/dist/components/TableMax/TableHeader/Cell.js

@@ -18,8 +18,9 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 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; }
 import { flexRender } from '@tanstack/react-table';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
+import { createPortal } from 'react-dom';
 import { ColumnType } from "../TableMax";
 import Sort from "../components/ColumnSort";
 import "./index.less";
@@ -30,12 +31,13 @@ var reorderColumn = function reorderColumn(draggedColumnId, targetColumnId, colu
   return _toConsumableArray(columnOrder);
 };
 var Cell = function Cell(_ref) {
-  var header = _ref.header,
+  var _tableContentRef$curr;
+  var tableContentRef = _ref.tableContentRef,
+    header = _ref.header,
     table = _ref.table,
     hasGroup = _ref.hasGroup,
     canSorting = _ref.canSorting,
-    getHeaderCellProps = _ref.getHeaderCellProps,
-    columnResizeMode = _ref.columnResizeMode;
+    getHeaderCellProps = _ref.getHeaderCellProps;
   var cannotDragColumn = [ColumnType.Darg, ColumnType.Selection, ColumnType.Expander, ColumnType.PlaceHolder];
   var getState = table.getState,
     setColumnOrder = table.setColumnOrder;
@@ -72,14 +74,30 @@ var Cell = function Cell(_ref) {
   var columns = useMemo(function () {
     return columnDef.columns;
   }, [header]);
-  return /*#__PURE__*/_jsx("div", {
+  var _useState = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    initPosition = _useState2[0],
+    setInitPosition = _useState2[1];
+  return /*#__PURE__*/_jsxs("div", {
     ref: dropRef,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
       className: "cell-wapper ".concat(columns ? 'wapper-top-parent' : '', " table-max-header-cell-wrapper"),
       ref: previewRef,
       style: _objectSpread({
         transform: header.column.parent || columns || !hasGroup ? 'translateY(0px)' : 'translateY(-20px)'
       }, getHeaderCellProps === null || getHeaderCellProps === void 0 ? void 0 : getHeaderCellProps(columns)),
+      onMouseDown: function onMouseDown(e) {
+        var elem = tableContentRef === null || tableContentRef === void 0 ? void 0 : tableContentRef.current;
+        var clientRect = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect();
+        var y = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top;
+        setInitPosition({
+          x: e.clientX,
+          y: y
+        });
+      },
       children: [/*#__PURE__*/_jsxs("div", {
         className: "cell-left",
         onClick: header.column.getToggleSortingHandler(),
@@ -113,12 +131,17 @@ var Cell = function Cell(_ref) {
       }), /*#__PURE__*/_jsx("div", {
         className: "cell-resize-handler ".concat(header.column.getIsResizing() ? 'column-is-resizing' : ''),
         onMouseDown: header.getResizeHandler(),
-        onTouchStart: header.getResizeHandler(),
-        style: {
-          transform: columnResizeMode === 'onEnd' && header.column.getIsResizing() ? "translateX(".concat(table.getState().columnSizingInfo.deltaOffset, "px)") : ''
-        }
+        onTouchStart: header.getResizeHandler()
       })]
-    })
+    }), header.column.getIsResizing() ? /*#__PURE__*/createPortal( /*#__PURE__*/_jsx("div", {
+      className: 'column-resizing-divide-line',
+      style: {
+        left: initPosition.x,
+        top: initPosition.y,
+        height: (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientHeight,
+        transform: "translateX(".concat(table.getState().columnSizingInfo.deltaOffset || 0, "px)")
+      }
+    }), document.body) : null]
   });
 };
 export default Cell;

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

@@ -1,14 +1,15 @@
 import { ColumnResizeMode } from '@tanstack/react-table';
+import { MutableRefObject } from 'react';
 import { TableMaxColumnType } from '../type';
 import './index.less';
 type TableHeaderProps = {
     table: any;
+    tableContentRef: MutableRefObject<HTMLDivElement> | null;
     canFilter?: boolean;
     enableFilters?: boolean;
     canSorting?: boolean;
     rowHeight?: number;
     hasGroup?: boolean;
-    headerGroups?: any[];
     hasVerticalScrollBar: boolean;
     getHeaderCellProps?: (columns: TableMaxColumnType[]) => object;
     columnResizeMode: ColumnResizeMode;
@@ -17,5 +18,5 @@ type TableHeaderProps = {
         right: boolean;
     };
 };
-declare const TableHeader: ({ table, headerGroups, canFilter, enableFilters, canSorting, hasGroup, hasVerticalScrollBar, getHeaderCellProps, columnResizeMode, pinShadowVisible, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeader: ({ tableContentRef, table, canFilter, enableFilters, canSorting, hasGroup, hasVerticalScrollBar, getHeaderCellProps, columnResizeMode, pinShadowVisible, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default TableHeader;

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

@@ -8,6 +8,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 // import { useDrag, useDrop } from 'ahooks';
 
 import { useMemo } from 'react';
+import { ColumnType } from "../TableMax";
 import { Filter } from "../components/ColumnFilter";
 import { getShadowInfo } from "../utils";
 import Cell from "./Cell";
@@ -17,8 +18,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var TableHeader = function TableHeader(_ref) {
   var _headerGroups, _headerGroups2;
-  var table = _ref.table,
-    headerGroups = _ref.headerGroups,
+  var tableContentRef = _ref.tableContentRef,
+    table = _ref.table,
     canFilter = _ref.canFilter,
     enableFilters = _ref.enableFilters,
     canSorting = _ref.canSorting,
@@ -31,37 +32,13 @@ var TableHeader = function TableHeader(_ref) {
     var columnPinning = table.getState().columnPinning;
     return JSON.stringify(columnPinning.left) !== '[]' || JSON.stringify(columnPinning.right) !== '[]' ? true : false;
   }, [table.getState().columnPinning]);
-
-  // useEffect(() => {
-  //   console.log(hasVerticalScrollBar, '********************hasVerticalScrollBar====================');
-  // }, [hasVerticalScrollBar]);
-
-  // const [headerGroups, setHeaderGroups] = useState([])
-
-  // useEffect(() => {
-  //   console.log(7777)
-  //   setHeaderGroups([
-  //     ...(table.getCenterHeaderGroups() || []),
-  //     ...(table.getRightHeaderGroups() || [])]
-  //   )
-  // }, [table.getLeftHeaderGroups(), table.getCenterHeaderGroups(), table.getRightHeaderGroups()])
-
-  // console.log(666, table.getLeftHeaderGroups(), table.getCenterHeaderGroups(), table.getRightHeaderGroups())
-
-  // console.log(
-  //   'header',
-  //   table.getLeftHeaderGroups(),
-  //   table.getCenterHeaderGroups(),
-  //   table.getRightHeaderGroups(),
-  //   table.getHeaderGroups(),
-  // );
-
+  var headerGroups = table.getHeaderGroups();
   return /*#__PURE__*/_jsxs("table", {
     children: [/*#__PURE__*/_jsxs("colgroup", {
       children: [headerGroups === null || headerGroups === void 0 || (_headerGroups = headerGroups[headerGroups.length - 1]) === null || _headerGroups === void 0 || (_headerGroups = _headerGroups.headers) === null || _headerGroups === void 0 ? void 0 : _headerGroups.map(function (header) {
-        var _header$column;
+        var _header$column, _header$column2;
         return /*#__PURE__*/_jsx("col", {
-          width: (header === null || header === void 0 || (_header$column = header.column) === null || _header$column === void 0 ? void 0 : _header$column.getSize()) || 80
+          width: header.id !== ColumnType.PlaceHolder ? (header === null || header === void 0 || (_header$column = header.column) === null || _header$column === void 0 ? void 0 : _header$column.getSize()) || 80 : header === null || header === void 0 || (_header$column2 = header.column) === null || _header$column2 === void 0 ? void 0 : _header$column2.columnDef.size
         }, header.id);
       }), hasVerticalScrollBar ? /*#__PURE__*/_jsx("col", {
         width: 10
@@ -84,6 +61,7 @@ var TableHeader = function TableHeader(_ref) {
               style: _objectSpread({}, getPinningStyle(header, table, hasVerticalScrollBar)),
               className: "".concat(isLeftLast && pinShadowVisible.left ? 'thead-tr-th-cell-fix-left-last' : '', " ").concat(isRightFirst && pinShadowVisible.right ? 'thead-tr-th-cell-fix-right-first' : ''),
               children: header.isPlaceholder || header.id === 'placeholder-column' ? null : /*#__PURE__*/_jsx(Cell, {
+                tableContentRef: tableContentRef,
                 header: header,
                 table: table,
                 hasGroup: hasGroup,

package/dist/components/TableMax/TableHeader/index.less

@@ -10,6 +10,7 @@ table {
     padding: 0;
     border: 0;
     background: @globalColor_14;
+    z-index: 1;
   }
 
   .th-scroll {
@@ -26,7 +27,7 @@ table {
   font-weight: 400;
   padding: 0 8px;
   text-align: left;
-  border-bottom: 1px solid @tableColor2;
+  // border-bottom: 1px solid @tableColor2;
 
   .cell-left {
     flex: 1;
@@ -73,11 +74,13 @@ table {
     cursor: ew-resize;
     user-select: none;
     touch-action: none;
+    z-index: 99999;
 
     &:hover {
-      border-right: 2px solid @globalColor_15;
-      top: 20%;
-      height: 60%;
+      border-right: 5px solid @globalColor_15;
+      top: 0%;
+      height: 100%;
+      z-index: 99999;
     }
   }
 
@@ -185,3 +188,12 @@ table {
     }
   }
 }
+
+.column-resizing-divide-line {
+  height: 300px;
+  width: 2px;
+  position: fixed;
+  z-index: 99999;
+  background-color: #000;
+}
+

package/dist/components/TableMax/TableMax.js

@@ -29,9 +29,10 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
 import { getCoreRowModel, getExpandedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { produce } from 'immer';
 import { cloneDeep } from 'lodash';
 import moment from 'moment';
-import React, { createContext, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import TableBody from "./TableBody";
@@ -54,7 +55,7 @@ export var ColumnType = /*#__PURE__*/function (ColumnType) {
 }({});
 export var TableContext = /*#__PURE__*/createContext({});
 var TableMax = function TableMax(_ref) {
-  var _JSON$parse, _tableHeaderRef$curre2, _tableContentRef$curr3;
+  var _JSON$parse, _tableBodyRef$current3, _tableBodyRef$current4, _tableContentRef$curr2, _tableContentRef$curr3;
   var tableId = _ref.tableId,
     originColumns = _ref.columns,
     _ref$datas = _ref.datas,
@@ -84,7 +85,7 @@ var TableMax = function TableMax(_ref) {
     _ref$defaultScrollY = _ref.defaultScrollY,
     defaultScrollY = _ref$defaultScrollY === void 0 ? 600 : _ref$defaultScrollY,
     _ref$columnResizeMode = _ref.columnResizeMode,
-    columnResizeMode = _ref$columnResizeMode === void 0 ? 'onChange' : _ref$columnResizeMode,
+    columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
     rowKey = _ref.rowKey,
     refreshFun = _ref.refreshFun,
     deleteFun = _ref.deleteFun,
@@ -156,8 +157,7 @@ var TableMax = function TableMax(_ref) {
     _ref$enableVirtualLis = _ref.enableVirtualList,
     enableVirtualList = _ref$enableVirtualLis === void 0 ? false : _ref$enableVirtualLis,
     onRowCheckboxClick = _ref.onRowCheckboxClick,
-    _ref$disableDragRowId = _ref.disableDragRowIds,
-    disableDragRowIds = _ref$disableDragRowId === void 0 ? [] : _ref$disableDragRowId,
+    disableDragRowIds = _ref.disableDragRowIds,
     _ref$selectRowWhenCli = _ref.selectRowWhenClick,
     selectRowWhenClick = _ref$selectRowWhenCli === void 0 ? true : _ref$selectRowWhenCli,
     _ref$autoHeight = _ref.autoHeight,
@@ -194,57 +194,61 @@ var TableMax = function TableMax(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     tableColumns = _useState4[0],
     setTableColumns = _useState4[1];
-  var _useState5 = useState(_toConsumableArray(columns)),
-    _useState6 = _slicedToArray(_useState5, 2),
-    initTableSizeColumns = _useState6[0],
-    setInitTableSizeColumns = _useState6[1];
+  // const [initTableSizeColumns, setInitTableSizeColumns] = useState([...columns]);
   /**列显隐 */
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    columnVisibility = _useState6[0],
+    setColumnVisibility = _useState6[1];
+  /**列拖动顺序 */
   var _useState7 = useState(),
     _useState8 = _slicedToArray(_useState7, 2),
-    columnVisibility = _useState8[0],
-    setColumnVisibility = _useState8[1];
-  /**列拖动顺序 */
-  var _useState9 = useState(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    columnOrder = _useState10[0],
-    setColumnOrder = _useState10[1];
+    columnOrder = _useState8[0],
+    setColumnOrder = _useState8[1];
   /**列排序 */
-  var _useState11 = useState([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    sorting = _useState12[0],
-    setSorting = _useState12[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    sorting = _useState10[0],
+    setSorting = _useState10[1];
   /**行选中 */
-  var _useState13 = useState(defaultSelectedRowId),
-    _useState14 = _slicedToArray(_useState13, 2),
-    rowSelectedId = _useState14[0],
-    setRowSelectedId = _useState14[1];
+  var _useState11 = useState(defaultSelectedRowId),
+    _useState12 = _slicedToArray(_useState11, 2),
+    rowSelectedId = _useState12[0],
+    setRowSelectedId = _useState12[1];
   /**行勾选 */
-  var _useState15 = useState(defaultSelectedRowIds.reduce(function (accumulator, currentValue) {
+  var _useState13 = useState(defaultSelectedRowIds.reduce(function (accumulator, currentValue) {
       accumulator[currentValue] = true;
       return accumulator;
     }, {})),
-    _useState16 = _slicedToArray(_useState15, 2),
-    rowSelection = _useState16[0],
-    setRowSelection = _useState16[1];
+    _useState14 = _slicedToArray(_useState13, 2),
+    rowSelection = _useState14[0],
+    setRowSelection = _useState14[1];
   /**列固定 */
-  var _useState17 = useState(columnPinningConfig),
-    _useState18 = _slicedToArray(_useState17, 2),
-    columnPinning = _useState18[0],
-    setColumnPinning = _useState18[1];
+  var _useState15 = useState(columnPinningConfig),
+    _useState16 = _slicedToArray(_useState15, 2),
+    columnPinning = _useState16[0],
+    setColumnPinning = _useState16[1];
   /**列宽 */
   // const [columnSizes, setColumnSizes] = useState();
-  // const [columnSizing, setColumnSizing] = useState<ColumnSizing>({});
+  var _useState17 = useState({}),
+    _useState18 = _slicedToArray(_useState17, 2),
+    columnSizing = _useState18[0],
+    setColumnSizing = _useState18[1];
+  var _useState19 = useState({}),
+    _useState20 = _slicedToArray(_useState19, 2),
+    initColumnsSizing = _useState20[0],
+    setInitColumnsSizing = _useState20[1];
 
   // const [visibleColumnSizes, setVisibleColumnSizes] = useState([]);
   /**列筛选 */
-  var _useState19 = useState(defaultColumnFilters),
-    _useState20 = _slicedToArray(_useState19, 2),
-    columnFilters = _useState20[0],
-    setColumnFilters = _useState20[1];
-  var _useState21 = useState(''),
+  var _useState21 = useState(defaultColumnFilters),
     _useState22 = _slicedToArray(_useState21, 2),
-    globalFilter = _useState22[0],
-    setGlobalFilter = _useState22[1];
+    columnFilters = _useState22[0],
+    setColumnFilters = _useState22[1];
+  var _useState23 = useState(''),
+    _useState24 = _slicedToArray(_useState23, 2),
+    globalFilter = _useState24[0],
+    setGlobalFilter = _useState24[1];
   /**分页 */
   var pagination = useMemo(function () {
     return typeof skipCount === 'number' && pageSize ? {
@@ -253,43 +257,43 @@ var TableMax = function TableMax(_ref) {
     } : undefined;
   }, [skipCount, pageSize]);
   /**是否有分组 */
-  var _useState23 = useState(false),
-    _useState24 = _slicedToArray(_useState23, 2),
-    hasGroup = _useState24[0],
-    setHasGroup = _useState24[1];
-
-  /**是否正在多行拖拽 */
   var _useState25 = useState(false),
     _useState26 = _slicedToArray(_useState25, 2),
-    selectedRowDragging = _useState26[0],
-    setSelectedRowDragging = _useState26[1];
+    hasGroup = _useState26[0],
+    setHasGroup = _useState26[1];
 
-  /**显示筛选开关状态 */
-  var _useState27 = useState(defaultEnableFilters),
+  /**是否正在多行拖拽 */
+  var _useState27 = useState(false),
     _useState28 = _slicedToArray(_useState27, 2),
-    enableFilters = _useState28[0],
-    setEnableFilters = _useState28[1];
+    selectedRowDragging = _useState28[0],
+    setSelectedRowDragging = _useState28[1];
+
+  /**显示筛选开关状态 */
+  var _useState29 = useState(defaultEnableFilters),
+    _useState30 = _slicedToArray(_useState29, 2),
+    enableFilters = _useState30[0],
+    setEnableFilters = _useState30[1];
   var _Form$useForm = _Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
   /**正在编辑的行id*/
-  var _useState29 = useState(''),
-    _useState30 = _slicedToArray(_useState29, 2),
-    editingRowId = _useState30[0],
-    setEditingRowId = _useState30[1];
+  var _useState31 = useState(''),
+    _useState32 = _slicedToArray(_useState31, 2),
+    editingRowId = _useState32[0],
+    setEditingRowId = _useState32[1];
   var _React$useState = React.useState({}),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     expanded = _React$useState2[0],
     setExpanded = _React$useState2[1];
 
   // 固定列是否显示阴影
-  var _useState31 = useState({
+  var _useState33 = useState({
       left: false,
       right: false
     }),
-    _useState32 = _slicedToArray(_useState31, 2),
-    pinShadowVisible = _useState32[0],
-    setPinShadowVisible = _useState32[1];
+    _useState34 = _slicedToArray(_useState33, 2),
+    pinShadowVisible = _useState34[0],
+    setPinShadowVisible = _useState34[1];
 
   // table
   var table = useReactTable({
@@ -313,10 +317,9 @@ var TableMax = function TableMax(_ref) {
       columnFilters: columnFilters,
       globalFilter: globalFilter,
       rowSelection: rowSelection,
-      expanded: expanded
-      // columnSizing,
+      expanded: expanded,
+      columnSizing: columnSizing
     },
-
     onColumnVisibilityChange: setColumnVisibility,
     onColumnOrderChange: setColumnOrder,
     onColumnPinningChange: setColumnPinning,
@@ -326,6 +329,7 @@ var TableMax = function TableMax(_ref) {
     getFacetedUniqueValues: getFacetedUniqueValues(),
     getFilteredRowModel: getFilteredRowModel(),
     onGlobalFilterChange: setGlobalFilter,
+    onColumnSizingChange: setColumnSizing,
     // setColumnSizing,
     manualPagination: true,
     manualSorting: manualSorting,
@@ -353,44 +357,14 @@ var TableMax = function TableMax(_ref) {
   var tableBodyRef = useRef(null);
 
   /**表格容器宽度 */
-  var _useState33 = useState(),
-    _useState34 = _slicedToArray(_useState33, 2),
-    tableContainerWidth = _useState34[0],
-    setTableContainerWidth = _useState34[1];
-  var _useState35 = useState(0),
+  var _useState35 = useState(),
     _useState36 = _slicedToArray(_useState35, 2),
-    tableHeadHeight = _useState36[0],
-    setTableHeadHeight = _useState36[1];
-  var _useState37 = useState(0),
+    tableContainerWidth = _useState36[0],
+    setTableContainerWidth = _useState36[1];
+  var _useState37 = useState(false),
     _useState38 = _slicedToArray(_useState37, 2),
-    tableBodyHeight = _useState38[0],
-    setTableBodyHeight = _useState38[1];
-
-  /**table-head高度 */
-  useEffect(function () {
-    var _tableHeaderRef$curre;
-    setTableHeadHeight(tableHeaderRef === null || tableHeaderRef === void 0 || (_tableHeaderRef$curre = tableHeaderRef.current) === null || _tableHeaderRef$curre === void 0 ? void 0 : _tableHeaderRef$curre.clientHeight);
-  }, [tableHeaderRef === null || tableHeaderRef === void 0 || (_tableHeaderRef$curre2 = tableHeaderRef.current) === null || _tableHeaderRef$curre2 === void 0 ? void 0 : _tableHeaderRef$curre2.clientHeight, enableFilters]);
-
-  /**table-body高度 */
-  useEffect(function () {
-    var _tableContentRef$curr, _tableContentRef$curr2;
-    var horizontalScrollHeight = table.getTotalSize() > (tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.offsetWidth) ? 10 : 0;
-    setTableBodyHeight(autoHeight ? (tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr2 = tableContentRef.current) === null || _tableContentRef$curr2 === void 0 ? void 0 : _tableContentRef$curr2.clientHeight) - tableHeadHeight - horizontalScrollHeight : defaultScrollY - tableHeadHeight - horizontalScrollHeight);
-  }, [table.getTotalSize(), defaultScrollY, autoHeight, tableContentRef === null || tableContentRef === void 0 ? void 0 : tableContentRef.current, tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr3 = tableContentRef.current) === null || _tableContentRef$curr3 === void 0 ? void 0 : _tableContentRef$curr3.clientHeight, tableHeadHeight]);
-
-  /**table-body-content 高度 */
-  var bodyContentHeight = useMemo(function () {
-    return datas.length * Number(rowHeight);
-  }, [datas.length, rowHeight]);
-  var hasVerticalScrollBar = useMemo(function () {
-    return tableBodyHeight - bodyContentHeight + 10 < 0;
-  }, [tableBodyHeight, bodyContentHeight]);
-
-  // const tableViewWidth = useMemo(
-  //   () => table.getTotalSize() + (hasVerticalScrollBar ? 10 : 0),
-  //   [table.getTotalSize(), hasVerticalScrollBar],
-  // );
+    hasVerticalScrollBar = _useState38[0],
+    setHasVerticalScrollBar = _useState38[1];
 
   // 暴露给外部的api
   useImperativeHandle(refInstance, function () {
@@ -435,16 +409,15 @@ var TableMax = function TableMax(_ref) {
       cacheColumnPinning = cache.columnPinning,
       cacheColumnFilters = cache.columnFilters,
       cacheColumnSorting = cache.columnSorting,
-      cacheEnableFilters = cache.enableFilters;
+      cacheEnableFilters = cache.enableFilters,
+      cacheColumnSizing = cache.columnSizing;
     // if (cacheColumnVisibility) {
     setColumnVisibility(_objectSpread(_objectSpread({}, columnVisibleConfig), cacheColumnVisibility));
     // }
 
-    // if (cacheColumnSizing) {
-    //   setColumnSizing({
-    //     ...cacheColumnSizing,
-    //   });
-    // }
+    if (cacheColumnSizing) {
+      setColumnSizing(_objectSpread({}, cacheColumnSizing));
+    }
 
     // 筛选项缓存&排序缓存
     var tableColumnIds = tableColumns === null || tableColumns === void 0 ? void 0 : tableColumns.map(function (column) {
@@ -482,6 +455,7 @@ var TableMax = function TableMax(_ref) {
     }
     setColumnOrder(arr);
   };
+
   // 初始化columns
   var columnSizeInfo = useMemo(function () {
     var _localStorage$getItem2, _table$getState;
@@ -550,109 +524,91 @@ var TableMax = function TableMax(_ref) {
     var cache = JSON.parse((_localStorage$getItem2 = localStorage.getItem(tableKey)) !== null && _localStorage$getItem2 !== void 0 ? _localStorage$getItem2 : '{}');
     var cacheColumnSizing = cache.columnSizing;
     var newColumnSizes = _objectSpread(_objectSpread({}, cacheColumnSizing), table === null || table === void 0 || (_table$getState = table.getState()) === null || _table$getState === void 0 ? void 0 : _table$getState.columnSizing);
-    var newColumns = setInitColumnsSize(columns, newColumnSizes);
+    var _setInitColumnsSize = setInitColumnsSize(columns, newColumnSizes),
+      columnsSizeMap = _setInitColumnsSize.columnsSizeMap,
+      newColumns = _setInitColumnsSize.tableColumns;
     setHasGroup(newColumns.findIndex(function (column) {
       var _column$columns;
       return (column === null || column === void 0 ? void 0 : column.columns) && ((_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.length) > 0;
     }) > -1);
-    setInitTableSizeColumns(_toConsumableArray(newColumns));
+    // setInitTableSizeColumns([...newColumns]);
     getCacheColumnInfo(newColumns);
+    setInitColumnsSizing(columnsSizeMap);
+    setColumnSizing(columnsSizeMap);
     setTableColumns(cloneDeep(newColumns));
     return getSizeInfo(newColumns);
   }, [columns]);
-
-  // 剩余宽度
-  var emptyColumnWidth = useMemo(function () {
-    var _document$getElementB;
-    var hasSizeAllWidth = columnSizeInfo.hasSizeAllWidth;
-    //表格宽度，offsetWidth?下面监听里用的clientWidth
-    var tableContainerWidth = ((_document$getElementB = document.getElementById("".concat(tableId, "-TableCore"))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.offsetWidth) || 1000;
-    // 滚动条宽度
-    var scrollBarWidth = hasVerticalScrollBar ? 10 : 0;
-    var remainWidth = tableContainerWidth - hasSizeAllWidth - scrollBarWidth - table.getLeftTotalSize() - (table === null || table === void 0 ? void 0 : table.getRightTotalSize());
-    return remainWidth;
-  }, [tableContainerWidth, hasVerticalScrollBar, Math.round(table.getLeftTotalSize()), Math.round(table === null || table === void 0 ? void 0 : table.getRightTotalSize())]);
   useEffect(function () {
+    var _tableBodyRef$current, _tableBodyRef$current2;
+    setHasVerticalScrollBar((tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 ? void 0 : _tableBodyRef$current.scrollHeight) - (tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.clientHeight) > 0);
+  }, [tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current3 = tableBodyRef.current) === null || _tableBodyRef$current3 === void 0 ? void 0 : _tableBodyRef$current3.clientHeight, tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current4 = tableBodyRef.current) === null || _tableBodyRef$current4 === void 0 ? void 0 : _tableBodyRef$current4.scrollHeight]);
+  useEffect(function () {
+    var _tableContentRef$curr;
     //默认宽度
+    var dom = document.getElementById("".concat(tableId, "-TableCore"));
+    if (!dom) return;
     var defaultSize = 60;
     var allCount = columnSizeInfo.allCount,
       hasSizeCount = columnSizeInfo.hasSizeCount,
-      columns = columnSizeInfo.columns;
+      columns = columnSizeInfo.columns,
+      hasSizeAllWidth = columnSizeInfo.hasSizeAllWidth;
     //表格宽度，offsetWidth?下面监听里用的clientWidth
     // 空白宽度
-    var remainWidth = emptyColumnWidth;
-
+    var remainWidth = (tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientWidth) - hasSizeAllWidth - 10 || 0;
     // 没有配置宽度size的列的数量
     var remainCount = allCount - hasSizeCount;
-    var newColumns = columns;
+    var aveSize;
     if (remainWidth > 0 && remainCount) {
-      var aveSize = Math.max(remainWidth / remainCount, defaultSize);
-      newColumns = setRemainColumnsWidth(newColumns, aveSize);
+      aveSize = Math.max(remainWidth / remainCount, defaultSize);
     } else {
-      newColumns = setRemainColumnsWidth(newColumns);
+      aveSize = undefined;
     }
-    setInitTableSizeColumns(cloneDeep(newColumns));
+    var _setRemainColumnsWidt = setRemainColumnsWidth(columns, aveSize),
+      newColumns = _setRemainColumnsWidt.columns,
+      columnsWidthMap = _setRemainColumnsWidt.columnsWidthMap;
+    // setInitTableSizeColumns(cloneDeep(newColumns));
     setTableColumns(cloneDeep(newColumns));
-  }, [columnSizeInfo, emptyColumnWidth]);
+    setInitColumnsSizing(columnsWidthMap);
+    setColumnSizing(columnsWidthMap);
+  }, [columnSizeInfo]);
 
-  // 添加空白列
-  useLayoutEffect(function () {
-    var centerTableSize = table.getTotalSize();
-    var containerWidth = tableContainerWidth;
-    var scrollBarWidth = tableBodyHeight < bodyContentHeight ? 10 : 0;
-    var centerTableContainerWidth = containerWidth - scrollBarWidth;
-    var centerTableRemainWidth = centerTableContainerWidth - centerTableSize;
+  // // 添加空白列
+  useEffect(function () {
+    if ((tableColumns === null || tableColumns === void 0 ? void 0 : tableColumns.length) <= 0 || !tableContainerWidth) return;
     var placeholderColumn = table.getAllColumns().some(function (item) {
       return item.id === ColumnType.PlaceHolder;
     }) ? table.getColumn(ColumnType.PlaceHolder) : null;
-    var newColumns = initTableSizeColumns;
-    //有剩余空间时
-    if (centerTableRemainWidth > 0) {
-      // 有剩余空间且有空白列
-      if (placeholderColumn) {
-        newColumns.some(function (item) {
-          if (item.id === ColumnType.PlaceHolder) {
-            item.size = centerTableRemainWidth + (placeholderColumn.columnDef.size || 0);
-            return true;
-          }
-          return false;
-        });
-        //有剩余空间且无空白列
-      } else {
-        newColumns.push({
+    // let newColumns = initTableSizeColumns;
+    var scrollBarWidth = hasVerticalScrollBar ? 10 : 0;
+    var tableColumnsWidthWithoutEmpty = table.getTotalSize() - ((placeholderColumn === null || placeholderColumn === void 0 ? void 0 : placeholderColumn.getSize()) || 0);
+    var newEmptyColumnsWidth = tableContainerWidth - tableColumnsWidthWithoutEmpty - scrollBarWidth;
+    setTableColumns(produce(function (draft) {
+      if (!placeholderColumn) {
+        if (newEmptyColumnsWidth <= 0) return;
+        draft.push({
           id: ColumnType.PlaceHolder,
-          size: centerTableRemainWidth,
-          accessorKey: '',
-          header: ''
-        });
-      }
-      //无剩余空间有空白列
-    } else if (placeholderColumn) {
-      var placeholderColumnSize = placeholderColumn.getSize();
-      // 有空白列
-      if (placeholderColumnSize + centerTableRemainWidth > 0) {
-        newColumns.some(function (item) {
-          if (item.id === ColumnType.PlaceHolder) {
-            item.size = centerTableRemainWidth + placeholderColumnSize;
-            return true;
+          size: newEmptyColumnsWidth,
+          accessorKey: null,
+          header: function header() {
+            return null;
           }
-          return false;
         });
-        // 删除空白列
       } else {
-        newColumns.some(function (item, index) {
+        if (newEmptyColumnsWidth === (placeholderColumn === null || placeholderColumn === void 0 ? void 0 : placeholderColumn.getSize())) return;
+        draft.some(function (item, index) {
           if (item.id === ColumnType.PlaceHolder) {
-            newColumns.splice(index, 1);
+            if (newEmptyColumnsWidth <= 0) {
+              draft.splice(index, 1);
+            } else {
+              item.size = newEmptyColumnsWidth;
+            }
             return true;
           }
           return false;
         });
       }
-    }
-    setTableColumns(cloneDeep(newColumns));
-  }, [table.getTotalSize(),
-  // emptyColumnWidth,
-  initTableSizeColumns]);
+    }));
+  }, [tableContainerWidth, hasVerticalScrollBar, table.getState().columnSizing]);
 
   // 多选数据变化回调
   useEffect(function () {
@@ -730,6 +686,12 @@ var TableMax = function TableMax(_ref) {
     var tableState = table.getState();
     var cache = JSON.parse((_localStorage$getItem3 = localStorage.getItem(tableKey)) !== null && _localStorage$getItem3 !== void 0 ? _localStorage$getItem3 : '{}');
     var cacheColumnSizing = cache.columnSizing;
+    var changedColumnsSizing = {};
+    Object.keys(initColumnsSizing).forEach(function (item) {
+      if (initColumnsSizing[item] !== tableState.columnSizing[item]) {
+        changedColumnsSizing[item] = tableState.columnSizing[item];
+      }
+    });
     localStorage.setItem(tableKey, JSON.stringify({
       columnVisibility: tableState.columnVisibility,
       columnPinning: tableState.columnPinning,
@@ -739,55 +701,13 @@ var TableMax = function TableMax(_ref) {
       enableFilters: enableFilters,
       // @ts-ignore
       // columnSizes: tableState.columnSizes,
-      columnSizing: _objectSpread(_objectSpread({}, cacheColumnSizing), tableState.columnSizing)
+      columnSizing: _objectSpread(_objectSpread({}, cacheColumnSizing), changedColumnsSizing)
     }));
   }, [table.getState().columnVisibility, table.getState().columnPinning, table.getState().columnOrder, table.getState().columnFilters, table.getState().sorting, enableFilters,
   // @ts-ignore
   // table.getState().columnSizes,
   table.getState().columnSizing]);
-
-  // const reorderRow = (dragFromRowIndex: number, targetRowIndex: number) => {
-  //   const draggedRows = table.getSelectedRowModel()?.rows || [];
-  //   const draggedRowNumber = draggedRows?.length || 0;
-  //   const draggedRowsIndexList = draggedRows?.map(row => row.index);
-  //   const draggedDatas: any[] = [];
-  //   let isDraggedToSourceRow = false,
-  //     aheadOfTargetRowNumber = 0;
-  //   let newTableDatas;
-  //   // 多选行拖动（如果有多选行，且拖拽行属于选中行，则所有选中行跟随拖拽一起移动）
-  //   if (draggedRowNumber > 1 && draggedRowsIndexList.includes(dragFromRowIndex)) {
-  //     draggedRows.forEach(item => {
-  //       //如果目标行等于拖拽行，则取消拖拽操作
-  //       if (targetRowIndex === item.index) {
-  //         isDraggedToSourceRow = true;
-  //       }
-  //       if (item.index < targetRowIndex) {
-  //         aheadOfTargetRowNumber++;
-  //       }
-  //       if (draggedRowsIndexList.includes(item.index)) {
-  //         draggedDatas.push(tableDatas[item.index]);
-  //       }
-  //     });
-  //     if (isDraggedToSourceRow) return;
-
-  //     console.log(dragFromRowIndex, draggedRowNumber, draggedRows, draggedDatas);
-  //     //统一删除选中行
-  //     newTableDatas = tableDatas.filter((data, idx) => {
-  //       return !draggedRowsIndexList.includes(idx);
-  //     });
-  //     newTableDatas.splice(targetRowIndex - aheadOfTargetRowNumber, 0, ...draggedDatas);
-  //     setTableDatas([...newTableDatas]);
-  //   } else {
-  //     // 单选行拖动
-  //     newTableDatas = [...tableDatas];
-  //     newTableDatas.splice(targetRowIndex, 0, newTableDatas.splice(dragFromRowIndex, 1)[0] as any);
-  //     setTableDatas(newTableDatas);
-  //   }
-
-  //   rowOrderChange?.(targetRowIndex, newTableDatas);
-  // };
-
-  var reorderRow = function reorderRow(fromDatas, toDatas) {
+  var reorderRow = useCallback(function (fromDatas, toDatas) {
     var draggedRow = fromDatas.draggedRow,
       isMultipleDrag = fromDatas.isMultipleDrag,
       draggedRows = fromDatas.draggedRows,
@@ -859,7 +779,7 @@ var TableMax = function TableMax(_ref) {
       draggedRows: draggedRows,
       updatedTableDatas: newTableDatas
     });
-  };
+  }, [tableDatas]);
 
   // 把row数据填充到表单
   var setFormData = function setFormData(rowOriginal) {
@@ -953,10 +873,10 @@ var TableMax = function TableMax(_ref) {
   }, [editingRowId]);
 
   // 双击行时，进入行编辑态
-  var handleEditRowWhenDClick = function handleEditRowWhenDClick(row) {
+  var handleEditRowWhenDClick = useCallback(function (row) {
     setFormData(row.original || {});
     setEditingRowId(row.id);
-  };
+  }, []);
 
   // 点击删除按钮
   var handleClickDelete = function handleClickDelete() {
@@ -977,6 +897,8 @@ var TableMax = function TableMax(_ref) {
     }
   };
   var tableBodyProps = {
+    tableContentRef: tableContentRef,
+    tableBodyRef: tableBodyRef,
     emptyDataHeight: emptyDataHeight,
     table: table,
     tableId: tableId,
@@ -988,13 +910,6 @@ var TableMax = function TableMax(_ref) {
     canFilter: canFilter,
     canSelection: canSelection,
     selectionWithoutChecked: selectionWithoutChecked,
-    // scroll,
-    // setScroll,
-    tableBodyHeight: tableBodyHeight,
-    // tableHeadHeight,
-    // setTableHeadHeight,
-    bodyContentHeight: bodyContentHeight,
-    // setBodyContentHeight,
     tableContainerWidth: tableContainerWidth,
     selectedRowDragging: selectedRowDragging,
     setSelectedRowDragging: setSelectedRowDragging,
@@ -1013,7 +928,6 @@ var TableMax = function TableMax(_ref) {
     editingRowId: editingRowId,
     handleEditRowWhenDClick: handleEditRowWhenDClick,
     renderSubComponent: renderSubComponent,
-    // isAllRowExpanded,
     onRowMouseEnter: onRowMouseEnter,
     onRowMouseLeave: onRowMouseLeave,
     onRowMouseClick: onRowMouseClick,
@@ -1029,10 +943,10 @@ var TableMax = function TableMax(_ref) {
     hasVerticalScrollBar: hasVerticalScrollBar
   };
   var getPinShadowInfo = useCallback(function () {
-    var _tableBodyRef$current = tableBodyRef.current,
-      scrollWidth = _tableBodyRef$current.scrollWidth,
-      clientWidth = _tableBodyRef$current.clientWidth,
-      scrollLeft = _tableBodyRef$current.scrollLeft;
+    var _tableBodyRef$current5 = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : tableBodyRef.current,
+      scrollWidth = _tableBodyRef$current5.scrollWidth,
+      clientWidth = _tableBodyRef$current5.clientWidth,
+      scrollLeft = _tableBodyRef$current5.scrollLeft;
     var newLeftShadowVisible, newRightShadowVisible;
     newLeftShadowVisible = scrollLeft > 0;
     newRightShadowVisible = scrollLeft < scrollWidth - clientWidth;
@@ -1043,22 +957,20 @@ var TableMax = function TableMax(_ref) {
       });
     }
   }, [pinShadowVisible]);
-
-  // useEffect(getPinShadowInfo, [tableContainerWidth]);
-
   var scrollHandler = useCallback(function (event) {
     if (!event.currentTarget) return;
-    tableHeaderRef.current.scrollLeft = event.currentTarget.scrollLeft / event.currentTarget.scrollWidth * tableHeaderRef.current.scrollWidth;
+    tableHeaderRef.current.scrollLeft = event.currentTarget.scrollLeft / event.currentTarget.scrollWidth * (tableHeaderRef === null || tableHeaderRef === void 0 ? void 0 : tableHeaderRef.current.scrollWidth);
     getPinShadowInfo();
   }, [getPinShadowInfo]);
   var tableHeaderProps = {
+    tableId: tableId,
+    tableContentRef: tableContentRef,
     table: table,
     canFilter: canFilter,
     enableFilters: enableFilters,
     canSorting: canSorting,
     rowHeight: rowHeight,
     hasGroup: hasGroup,
-    headerGroups: table.getHeaderGroups(),
     getHeaderCellProps: getHeaderCellProps,
     columnResizeMode: columnResizeMode,
     hasVerticalScrollBar: hasVerticalScrollBar,
@@ -1156,16 +1068,23 @@ var TableMax = function TableMax(_ref) {
             className: "table-center",
             ref: tableContentRef,
             style: {
-              height: !autoHeight ? defaultScrollY : ''
+              maxHeight: !autoHeight ? defaultScrollY : 'fit-content'
             },
             children: [/*#__PURE__*/_jsx("div", {
               ref: tableHeaderRef,
               className: "table-header",
+              style: {
+                width: "".concat(tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr2 = tableContentRef.current) === null || _tableContentRef$curr2 === void 0 ? void 0 : _tableContentRef$curr2.clientWidth, "px"),
+                height: 'fit-content'
+              },
               children: /*#__PURE__*/_jsx(TableHeader, _objectSpread({}, tableHeaderProps))
             }), /*#__PURE__*/_jsx("div", {
               ref: tableBodyRef,
               className: "table-body",
               onScroll: scrollHandler,
+              style: {
+                width: "".concat(tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr3 = tableContentRef.current) === null || _tableContentRef$curr3 === void 0 ? void 0 : _tableContentRef$curr3.clientWidth, "px")
+              },
               children: /*#__PURE__*/_jsx(TableBody, _objectSpread({}, tableBodyProps))
             })]
           })

package/dist/components/TableMax/tableMax.less

@@ -97,7 +97,7 @@
 
     .table-center {
       flex: 1;
-      overflow-x: auto;
+      overflow-x: hidden;
       overflow-y: hidden;
       display: flex;
       flex-direction: column;
@@ -172,7 +172,7 @@
   }
 
   .table-max-footer {
-    height: 24px;
+    // height: 24px;
     margin-top: 12px;
   }
 

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

@@ -6,8 +6,15 @@ export declare const getSizeInfo: (columns: TableMaxColumnType[]) => {
     columns: TableMaxColumnType[];
 };
 export declare function getTextWidth(text: string, fontSize: number): any;
-export declare const setRemainColumnsWidth: (initColumns: TableMaxColumnType[], defaultSize?: number) => any;
-export declare const setInitColumnsSize: (tableColumns: any, columnsMap: any) => any;
+export declare const setRemainColumnsWidth: (initColumns: TableMaxColumnType[], defaultSize?: number) => {
+    columns: any;
+    tableColumnsWidth: number;
+    columnsWidthMap: {};
+};
+export declare const setInitColumnsSize: (tableColumns: any, columnsMap: any) => {
+    columnsSizeMap: {};
+    tableColumns: any;
+};
 export declare const getShadowInfo: (column: any, table: any) => {
     isRightFirst: boolean;
     isLeftLast: boolean;

package/dist/components/TableMax/utils.js

@@ -37,6 +37,8 @@ export function getTextWidth(text, fontSize) {
 }
 export var setRemainColumnsWidth = function setRemainColumnsWidth(initColumns, defaultSize) {
   var columns = cloneDeep(initColumns);
+  var columnsWidthMap = {};
+  var tableColumnsWidth = 0;
   var fn = function fn(columns) {
     columns.forEach(function (column) {
       var _ref, _column$size;
@@ -44,27 +46,40 @@ export var setRemainColumnsWidth = function setRemainColumnsWidth(initColumns, d
       if (!column.columns) {
         var _ref2, _column$size2;
         column.size = (_ref2 = (_column$size2 = column.size) !== null && _column$size2 !== void 0 ? _column$size2 : defaultSize) !== null && _ref2 !== void 0 ? _ref2 : (column === null || column === void 0 ? void 0 : column.filterType) === FilterType.Date ? 160 : getTextWidth(column.header, 14) + 50;
+        tableColumnsWidth += column.size;
+        columnsWidthMap[column.id] = column.size;
       } else {
         fn(column.columns);
       }
     });
   };
   fn(columns);
-  return columns;
+  return {
+    columns: columns,
+    tableColumnsWidth: tableColumnsWidth,
+    columnsWidthMap: columnsWidthMap
+  };
 };
 export var setInitColumnsSize = function setInitColumnsSize(tableColumns, columnsMap) {
+  var columnsSizeMap = {};
   var fn = function fn(columns) {
     // eslint-disable-next-line array-callback-return
     columns.map(function (column) {
       var _columnsMap$column$id;
       column.size = (_columnsMap$column$id = columnsMap[column.id]) !== null && _columnsMap$column$id !== void 0 ? _columnsMap$column$id : column.size;
+      if (column.size) {
+        columnsSizeMap[column.id] = column.size;
+      }
       if (column.columns) {
         fn(column.columns);
       }
     });
   };
   fn(tableColumns);
-  return tableColumns;
+  return {
+    columnsSizeMap: columnsSizeMap,
+    tableColumns: tableColumns
+  };
 };
 export var getShadowInfo = function getShadowInfo(column, table) {
   var isLeftLast, isRightFirst;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",
@@ -50,6 +50,7 @@
     "ahooks": "^3.7.8",
     "css-vars-ponyfill": "^2.4.8",
     "fs": "^0.0.1-security",
+    "immer": "^10.0.3",
     "lodash": "^4.17.21",
     "path": "^0.12.7",
     "react-dnd": "^16.0.1",
@@ -91,4 +92,4 @@
   "authors": [
     "na.xu2278@foxmail.com"
   ]
-}
+}