linkmore-design 1.1.11 → 1.1.13-alpha.0

package/es/LmEditTable/EditTable.js

@@ -53,26 +53,29 @@ var __rest = this && this.__rest || function (s, e) {
 import { PlusCircleOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import { arrayMove } from '@dnd-kit/sortable';
-import { Button, Checkbox, IconFont, Input, InputNumber, Radio, Select, Table, Switch, DatePicker, Form } from 'linkmore-design';
-import { get, set, isFunction, omit } from 'lodash';
+import { Button, Checkbox, IconFont, Input, InputNumber, Radio, Select, Table, Switch, DatePicker, Form, Popover } from 'linkmore-design';
+import { get, set, isFunction, omit, isEqual, pick } from 'lodash';
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, memo, useCallback } from 'react';
 import { useControllableValue } from 'ahooks';
 import { produce } from 'immer';
-import DndContainer from './DndContainer';
-import SortableBox from './sortableBox';
+import DndContainer from './DndContainer'; // import SortableBox from './sortableBox';
+
 import SortableBoxCol from './sortableBoxCol';
 import SortableItem from './sortableItem';
 import ColSortableItem from './sortableItemCol';
 import DragHandle from './DragHandle';
 import UploadOss from '../UploadOss';
-import { isObjEmpty, deepDataSourcePreKeys, isExpandRow, checkRowKeyByDataSource } from './util';
-import cls from "classnames";
+import { isObjEmpty, deepDataSourcePreKeys, isExpandRow, checkRowKeyByDataSource, checkMemoShouldUploadSpecialFun } from './util';
+import { DraggableContainer } from './components';
+import cls from 'classnames';
+import { VirtualTable, VirtualWrapper, VirtualRow } from './virtual';
 var UploadBtn = UploadOss.UploadBtn;
 var EditableContext = /*#__PURE__*/React.createContext(null); // 表格行
 
 var EditableRow = function EditableRow(_a) {
   var index = _a.index,
-      props = __rest(_a, ["index"]);
+      virtual = _a.virtual,
+      props = __rest(_a, ["index", "virtual"]);
 
   var _Form$useForm = Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -83,7 +86,7 @@ var EditableRow = function EditableRow(_a) {
     component: false
   }, /*#__PURE__*/React.createElement(EditableContext.Provider, {
     value: form
-  }, /*#__PURE__*/React.createElement("tr", Object.assign({}, props))));
+  }, virtual ? /*#__PURE__*/React.createElement(VirtualRow, Object.assign({}, props)) : /*#__PURE__*/React.createElement("tr", Object.assign({}, props))));
 };
 
 var EditableSortRow = function EditableSortRow(_a) {
@@ -238,6 +241,15 @@ var Opetate = function Opetate(_ref) {
       options = _ref$options === void 0 ? ['add', 'delete'] : _ref$options,
       getLength = _ref.getLength,
       quickOpetateClearAll = _ref.quickOpetateClearAll;
+
+  var appendChildren = function appendChildren() {
+    handleAdd === null || handleAdd === void 0 ? void 0 : handleAdd(record, true);
+  };
+
+  var appendAdd = function appendAdd() {
+    handleAdd === null || handleAdd === void 0 ? void 0 : handleAdd(record);
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -258,7 +270,27 @@ var Opetate = function Opetate(_ref) {
     onClick: function onClick() {
       return handleDelete(record[rowKey]);
     }
-  }), options.includes('add') && /*#__PURE__*/React.createElement(Button, {
+  }), (options === null || options === void 0 ? void 0 : options.includes('add')) && (options === null || options === void 0 ? void 0 : options.includes('addInChildren')) ? /*#__PURE__*/React.createElement(Popover, {
+    placement: "bottom",
+    overlayClassName: "lm_table_append_add_popover",
+    open: open,
+    title: null,
+    content: /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+      onClick: appendAdd
+    }, "\u6DFB\u52A0\u5E73\u7EA7"), /*#__PURE__*/React.createElement("li", {
+      onClick: appendChildren
+    }, "\u6DFB\u52A0\u5B50\u7EA7")),
+    trigger: "hover"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    size: "small",
+    icon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "lmweb-plus-circle-fill",
+      style: {
+        fontSize: 16
+      }
+    })
+  })) : /*#__PURE__*/React.createElement(Button, {
     type: "link",
     size: "small",
     icon: /*#__PURE__*/React.createElement(IconFont, {
@@ -268,17 +300,10 @@ var Opetate = function Opetate(_ref) {
       }
     }),
     onClick: function onClick() {
-      return handleAdd(record);
+      return handleAdd(record, (options === null || options === void 0 ? void 0 : options.includes('addInChildren')) ? true : false);
     }
   }));
-}; // const isValidValue = (verifyValue) => {
-//   const toStringValue = JSON.stringify(verifyValue);
-//   if (verifyValue === undefined || verifyValue === null || verifyValue === '' || toStringValue === '[]' || toStringValue === '{}') {
-//     return false;
-//   }
-//   return true;
-// }
-
+};
 /*
   表格单元格
   editEnum： 下拉框时的数据数组（非数组时是配置设置）
@@ -330,6 +355,12 @@ var EditableCell = function EditableCell(props) {
 
   var inputRef = useRef(null);
   var form = useContext(EditableContext);
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hoverStatus = _useState6[0],
+      setHoverStatus = _useState6[1];
+
   useEffect(function () {
     var _a;
 
@@ -340,13 +371,7 @@ var EditableCell = function EditableCell(props) {
 
   var toggleEdit = function toggleEdit() {
     setEditing(!editing); // form.setFieldsValue({ [dataIndex]: record[dataIndex] });
-  }; // const checkCellRef = useRef(null)
-  // const focusCapturedRef = useRef(false);
-  // const curValue = useMemo(() => {
-  //   return record?.dataIndex
-  // }, [record])
-  // const curValueIsValid = isValidValue(curValue);
-  // 校验保存
+  }; // 校验保存
 
 
   var save = function save(row) {
@@ -429,15 +454,15 @@ var EditableCell = function EditableCell(props) {
   /** 快捷刷子，把当前的所有列的值，刷成当前的选中的列 */
 
 
-  var copyKey = function copyKey(e) {
+  var copyKey = function copyKey(e, type) {
     e === null || e === void 0 ? void 0 : e.stopPropagation();
     var dataIndex = col.dataIndex;
-    handleCopy === null || handleCopy === void 0 ? void 0 : handleCopy(dataIndex, record[dataIndex]);
+    handleCopy === null || handleCopy === void 0 ? void 0 : handleCopy(dataIndex, record[dataIndex], type, props.rowIndex);
   };
 
   var Control = function Control(con) {
     var resultComponentProps = isFunction(componentProps) ? componentProps === null || componentProps === void 0 ? void 0 : componentProps(record, col) : componentProps;
-    var clearAttrComponentProps = omit(resultComponentProps, ['optionOnly', 'isOnlyValue']);
+    var clearAttrComponentProps = omit(resultComponentProps, ['optionOnly', 'isOnlyValue', 'quickcopy']);
 
     switch (con) {
       case 'input':
@@ -458,12 +483,6 @@ var EditableCell = function EditableCell(props) {
             noStyle: true
           }, /*#__PURE__*/React.cloneElement(resultComponentProps.addonAfter, {
             onChange: handleFormItemChange
-          })) : null,
-          suffix: resultComponentProps.quickcopy ? /*#__PURE__*/React.createElement("span", {
-            className: 'lm_table_quickcopy'
-          }, /*#__PURE__*/React.createElement(IconFont, {
-            onClick: copyKey,
-            type: 'lmweb-icon_m_brush'
           })) : null
         }));
 
@@ -546,7 +565,7 @@ var EditableCell = function EditableCell(props) {
 
       case 'switch':
         return /*#__PURE__*/React.createElement(Switch, Object.assign({
-          size: 'small'
+          size: "small"
         }, clearAttrComponentProps, {
           onChange: handleFormItemChange
         }));
@@ -635,8 +654,7 @@ var EditableCell = function EditableCell(props) {
     }
 
     return childNode;
-  }, [col, isEdit, editing, getLength]); // const [childNode, setChildNode] = useState(getMemoChildNode);
-  // 出现死循环找我
+  }, [col, isEdit, editing, getLength]); // 出现死循环找我
 
   useEffect(function () {
     var editable = col.editable,
@@ -644,22 +662,55 @@ var EditableCell = function EditableCell(props) {
 
     if (isEdit && editable) {
       form.setFieldsValue(_defineProperty({}, dataIndex, editable === 'date' ? moment(record[dataIndex]) : record[dataIndex]));
-    } // if (
-    //   (isEdit && editable && record[dataIndex]) ||
-    //   (isHoverEdit && editable && record[dataIndex])
-    // ) {
-    //   form.setFieldsValue({
-    //     [dataIndex]: editable === 'date' ? moment(record[dataIndex]) : record[dataIndex],
-    //   })
-    // }
-
+    }
   }, [record]);
+
+  var handleTdHover = function handleTdHover() {
+    setHoverStatus(true);
+  };
+
+  var handleTdMouseOut = function handleTdMouseOut() {
+    setHoverStatus(false);
+  };
+
   return /*#__PURE__*/React.createElement("td", Object.assign({}, omit(clearProps, ['dataIndex']), {
     className: cls(clearProps === null || clearProps === void 0 ? void 0 : clearProps.className, 'lm_custom_cell_td'),
+    onMouseEnter: componentProps.quickcopy ? handleTdHover : undefined,
+    onMouseLeave: componentProps.quickcopy ? handleTdMouseOut : undefined,
     key: "r".concat(rowIndex, "_c").concat(colIndex)
-  }), getMemoChildNode);
+  }), hoverStatus && props.rowIndex > 0 && /*#__PURE__*/React.createElement("span", {
+    className: 'quick_copy_warp quick_copy_up',
+    onClick: function onClick(e) {
+      return copyKey(e, 'up');
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: 'lmweb-icon_up'
+  })), getMemoChildNode, hoverStatus && props.rowIndex < props.getLength - 1 && /*#__PURE__*/React.createElement("span", {
+    className: 'quick_copy_warp quick_copy_down',
+    onClick: function onClick(e) {
+      return copyKey(e, 'down');
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: 'lmweb-icon_down'
+  })));
 };
+/** true 不刷新， false 刷新 */
+
 
+var MemoEditableCell = /*#__PURE__*/memo(EditableCell, function (prev, next) {
+  var pickProps = ['record', 'colIndex'];
+  var p = pick(prev, pickProps);
+  var n = pick(next, pickProps); // console.log(prev, next, '22', checkMemoShouldUploadSpecialFun(prev, next), isEqual(p, n))
+  // console.log(prev, next, '-sss')
+
+  /** TODO: 在record中带有children，子列表数据修改之后，会导致父级的record对比不一样 */
+
+  if (!checkMemoShouldUploadSpecialFun(prev, next)) {
+    return false;
+  }
+
+  return isEqual(p, n);
+});
 var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
   var defaultData = props.value,
       columns = props.columns,
@@ -677,6 +728,7 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$quickOpetateCl = props.quickOpetateClearAll,
       quickOpetateClearAll = _props$quickOpetateCl === void 0 ? true : _props$quickOpetateCl,
       rowSelection = props.rowSelection,
+      virtual = props.virtual,
       sortOpen = props.sortOpen,
       colSortOpen = props.colSortOpen,
       filterChange = props.filterChange,
@@ -685,7 +737,8 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       recordCreatorProps = props.recordCreatorProps,
       _props$shouldUpdate = props.shouldUpdate,
       shouldUpdate = _props$shouldUpdate === void 0 ? false : _props$shouldUpdate,
-      resetProps = __rest(props, ["value", "columns", "isEdit", "isAdd", "onChange", "rowKey", "rowHoverEdit", "isUseForm", "isHoverEdit", "useQuickOpetate", "quickOpetateClearAll", "rowSelection", "sortOpen", "colSortOpen", "filterChange", "size", "recordCreatorProps", "shouldUpdate"]); // const [dataSource, setDataSource] = useState([]);
+      resetProps = __rest(props // const [dataSource, setDataSource] = useState([]);
+  , ["value", "columns", "isEdit", "isAdd", "onChange", "rowKey", "rowHoverEdit", "isUseForm", "isHoverEdit", "useQuickOpetate", "quickOpetateClearAll", "rowSelection", "virtual", "sortOpen", "colSortOpen", "filterChange", "size", "recordCreatorProps", "shouldUpdate"]); // const [dataSource, setDataSource] = useState([]);
 
 
   var _useControllableValue = useControllableValue({
@@ -697,20 +750,15 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       setDataSource = _useControllableValue2[1]; // const [count, setCount] = useState(0);
 
 
-  var _useState5 = useState({}),
-      _useState6 = _slicedToArray(_useState5, 2),
-      _valid = _useState6[0],
-      setValid = _useState6[1];
-
-  var _useState7 = useState([]),
+  var _useState7 = useState({}),
       _useState8 = _slicedToArray(_useState7, 2),
-      localRowSelectList = _useState8[0],
-      setLocalRowSelectList = _useState8[1];
+      _valid = _useState8[0],
+      setValid = _useState8[1];
 
   var _useState9 = useState([]),
       _useState10 = _slicedToArray(_useState9, 2),
-      sortEditTable = _useState10[0],
-      setCallBackFalg = _useState10[1];
+      localRowSelectList = _useState10[0],
+      setLocalRowSelectList = _useState10[1];
   /** 当前展开的列 */
 
 
@@ -719,21 +767,10 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       expandedRowKeys = _useState12[0],
       setExpandedRowKeys = _useState12[1];
 
-  var dataSourceRef = useRef([]);
-  var sortDataSorceRef = useRef([]);
-  var deepDataSourceRef = useRef([]);
-
-  var onSortEnd = function onSortEnd(active, over) {
-    var cloneArr = _toConsumableArray(dataSourceRef.current);
-
-    var oldIndex = cloneArr.findIndex(function (v) {
-      return v[_rowKey] === active;
-    });
-    var newIndex = cloneArr.findIndex(function (v) {
-      return v[_rowKey] === over;
-    });
-    setDataSource(arrayMove(cloneArr, oldIndex, newIndex));
-  };
+  var dataSourceRef = useRef(dataSource);
+  var deepDataSourceRef = useRef(deepDataSourcePreKeys(dataSource, _rowKey));
+  dataSourceRef.current = dataSource;
+  deepDataSourceRef.current = deepDataSourcePreKeys(dataSource, _rowKey);
 
   var onColSortEnd = function onColSortEnd(active, over) {
     var _a;
@@ -771,29 +808,9 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
     });
     setDataSource(res); // onChange?.(res)
   };
-
-  useEffect(function () {
-    var _a;
-
-    dataSourceRef.current = dataSource;
-    deepDataSourceRef.current = deepDataSourcePreKeys(dataSource, _rowKey);
-
-    if (sortOpen) {
-      var dataSourceKeys = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item) {
-        return item[_rowKey];
-      }).join(',');
-      var setCallBackFalgKeys = ((_a = sortDataSorceRef.current) === null || _a === void 0 ? void 0 : _a.map(function (item) {
-        return item[_rowKey];
-      }).join(',')) || '';
-
-      if (dataSourceKeys !== setCallBackFalgKeys) {
-        setCallBackFalg(dataSource);
-        sortDataSorceRef.current = dataSource;
-      }
-    }
-  }, [dataSource]);
   /** 本地缓存一个选择数据 */
 
+
   useEffect(function () {
     if (rowSelection) {
       var selectedRowKeys = rowSelection.selectedRowKeys;
@@ -944,17 +961,31 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
   /** 快捷添加 */
 
 
-  var handleTableRowAdd = function handleTableRowAdd(record) {
+  var handleTableRowAdd = function handleTableRowAdd(record, isAppendInChindren) {
     var _a, _b;
 
     var preKeys = (_b = (_a = deepDataSourceRef === null || deepDataSourceRef === void 0 ? void 0 : deepDataSourceRef.current) === null || _a === void 0 ? void 0 : _a[record[_rowKey]]) === null || _b === void 0 ? void 0 : _b.preKeys;
     var res = produce(dataSourceRef.current, function (draft) {
+      var _a, _b, _c, _d;
+
       if (preKeys.length > 1) {
         var deeps = function deeps(children) {
           children === null || children === void 0 ? void 0 : children.forEach(function (item, index) {
+            var _a;
+
             if (preKeys === null || preKeys === void 0 ? void 0 : preKeys.includes(item[_rowKey])) {
               if (item[_rowKey] === record[_rowKey]) {
-                children.splice(index + 1, 0, _defineProperty({}, _rowKey, "".concat(Date.now())));
+                if (isAppendInChindren) {
+                  if (item === null || item === void 0 ? void 0 : item.children) {
+                    (_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.push(_defineProperty({}, _rowKey, "".concat(Date.now())));
+                  } else {
+                    item.children = [_defineProperty({}, _rowKey, "".concat(Date.now()))];
+                  }
+
+                  !expandedRowKeys.includes(item[_rowKey]) && setExpandedRowKeys([].concat(_toConsumableArray(expandedRowKeys), [item[_rowKey]]));
+                } else {
+                  children.splice(index + 1, 0, _defineProperty({}, _rowKey, "".concat(Date.now())));
+                }
               } else if (item.children) {
                 deeps(item.children);
               }
@@ -969,17 +1000,29 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
         });
 
         if (index !== -1) {
-          draft.splice(index + 1, 0, _defineProperty({}, _rowKey, "".concat(Date.now())));
+          if (isAppendInChindren) {
+            if ((_a = draft[index].children) === null || _a === void 0 ? void 0 : _a.length) {
+              (_b = draft[index].children) === null || _b === void 0 ? void 0 : _b.push(_defineProperty({}, _rowKey, "".concat(Date.now())));
+            } else {
+              draft[index].children = [_defineProperty({}, _rowKey, "".concat(Date.now()))];
+            }
+
+            !expandedRowKeys.includes((_c = draft[index]) === null || _c === void 0 ? void 0 : _c[_rowKey]) && setExpandedRowKeys([].concat(_toConsumableArray(expandedRowKeys), [(_d = draft[index]) === null || _d === void 0 ? void 0 : _d[_rowKey]]));
+          } else {
+            draft.splice(index + 1, 0, _defineProperty({}, _rowKey, "".concat(Date.now())));
+          }
         }
       }
     });
     setDataSource(res);
   };
 
-  var handleCopy = function handleCopy(key, value) {
+  var handleCopy = function handleCopy(key, value, type, rowIndex) {
     var res = produce(dataSourceRef.current, function (draft) {
-      draft === null || draft === void 0 ? void 0 : draft.forEach(function (item) {
-        return item[key] = value;
+      draft === null || draft === void 0 ? void 0 : draft.forEach(function (item, index) {
+        if (type === 'up' && index < rowIndex || type === 'down' && index > rowIndex) {
+          item[key] = value;
+        }
       });
     });
     setDataSource(res);
@@ -1006,9 +1049,9 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var DisableOptions = useMemo(function () {
     var newColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (item) {
-      var _ref3 = item.componentProps || {},
-          optionOnly = _ref3.optionOnly,
-          options = _ref3.options;
+      var _ref5 = item.componentProps || {},
+          optionOnly = _ref5.optionOnly,
+          options = _ref5.options;
 
       if (optionOnly && options) {
         var dataIndex = item.dataIndex;
@@ -1092,19 +1135,6 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       }
 
       var newCol = Object.assign(Object.assign({}, col), {
-        shouldCellUpdate: function shouldCellUpdate(record, prevRecord) {
-          var _a;
-
-          var dataIndex = col.dataIndex,
-              editable = col.editable,
-              relevanceCols = col.relevanceCols;
-
-          if ((col === null || col === void 0 ? void 0 : col.fixed) || hasDisableOptions && hasDisableOptions.includes(dataIndex) || ((_a = col.componentProps) === null || _a === void 0 ? void 0 : _a.options) || editable === 'render' || !!relevanceCols || !!shouldUpdate) {
-            return true;
-          }
-
-          return record[dataIndex] !== prevRecord[dataIndex];
-        },
         onCell: function onCell(record, rowIndex) {
           return {
             getLength: dataSource.length,
@@ -1144,20 +1174,20 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       return mapColumns(col, index);
     });
     return res;
-  }, [columns, isAdd, sortOpen, useQuickOpetate, sortEditTable, dataSource, _toConsumableArray(memoOptions)]);
-  var DraggableContainer = useCallback(function (_a) {
-    var _b;
+  }, [columns, isAdd, sortOpen, useQuickOpetate, dataSource, _toConsumableArray(memoOptions)]);
 
-    var props = __rest(_a, []);
+  var onSortEnd = function onSortEnd(active, over) {
+    var cloneArr = _toConsumableArray(dataSourceRef.current);
+
+    var oldIndex = cloneArr.findIndex(function (v) {
+      return v[_rowKey] === active;
+    });
+    var newIndex = cloneArr.findIndex(function (v) {
+      return v[_rowKey] === over;
+    });
+    setDataSource(arrayMove(cloneArr, oldIndex, newIndex));
+  };
 
-    return /*#__PURE__*/React.createElement(DndContainer, {
-      move: onSortEnd
-    }, /*#__PURE__*/React.createElement(SortableBox, {
-      items: (_b = dataSourceRef.current) === null || _b === void 0 ? void 0 : _b.map(function (item) {
-        return item[_rowKey];
-      })
-    }, /*#__PURE__*/React.createElement("tbody", Object.assign({}, props))));
-  }, [sortEditTable]);
   var colDraggableContainer = useCallback(function (_a) {
     var _b;
 
@@ -1175,34 +1205,6 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       }, child);
     }));
   }, [columns]);
-  var config = useMemo(function () {
-    var component = {
-      body: Object.assign({
-        row: sortOpen ? EditableSortRow : EditableRow,
-        cell: EditableCell
-      }, sortOpen ? {
-        wrapper: DraggableContainer
-      } : {})
-    };
-
-    if (colSortOpen) {
-      component['header'] = {
-        row: colDraggableContainer
-      };
-    }
-
-    return Object.assign({
-      pagination: false,
-      tableLayout: 'fixed',
-      scroll: {
-        x: '100%'
-      },
-      rowKey: function rowKey(record) {
-        return record[_rowKey] || record.index || Math.random();
-      },
-      components: component
-    }, resetProps);
-  }, [resultColumns, dataSource, sortOpen, colSortOpen, size]);
   useImperativeHandle(ref, function () {
     return {
       setRow: handleSave,
@@ -1214,6 +1216,46 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
   var isShowAddAction = useMemo(function () {
     return isEdit && isAdd || isHoverEdit && isAdd;
   }, [isEdit, isAdd, isHoverEdit]);
+  var config = useRef(Object.assign({
+    pagination: false,
+    tableLayout: 'fixed',
+    scroll: {
+      x: '100%'
+    },
+    rowKey: function rowKey(record) {
+      return record[_rowKey] || record.index || Math.random();
+    },
+    components: {
+      table: virtual ? VirtualTable : null,
+      body: Object.assign({
+        row: function row(rowProps) {
+          return sortOpen ? EditableSortRow(Object.assign(Object.assign({}, rowProps), {
+            virtual: virtual
+          })) : EditableRow(Object.assign(Object.assign({}, rowProps), {
+            virtual: virtual
+          }));
+        },
+        cell: MemoEditableCell
+      }, sortOpen ? {
+        wrapper: function wrapper(wrapperProps) {
+          var _a;
+
+          return DraggableContainer(Object.assign(Object.assign({}, wrapperProps), {
+            virtual: virtual,
+            keys: (_a = dataSourceRef.current) === null || _a === void 0 ? void 0 : _a.map(function (item) {
+              return item[_rowKey];
+            }),
+            onSortEnd: onSortEnd
+          }));
+        }
+      } : virtual ? {
+        wrapper: VirtualWrapper
+      } : {}),
+      header: {
+        row: colSortOpen ? colDraggableContainer : null
+      }
+    }
+  }, resetProps));
 
   if (colSortOpen) {
     return /*#__PURE__*/React.createElement("div", {
@@ -1224,7 +1266,7 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       items: columns.reduce(function (acc, item) {
         return [].concat(_toConsumableArray(acc), [item.dataIndex]);
       }, [])
-    }, /*#__PURE__*/React.createElement(Table, Object.assign({}, config, {
+    }, /*#__PURE__*/React.createElement(Table, Object.assign({}, config.current, {
       size: size || 'small',
       columns: resultColumns,
       rowClassName: "editable-row",
@@ -1258,7 +1300,7 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: "lm_editTable_warpper"
-  }, /*#__PURE__*/React.createElement(Table, Object.assign({}, config, {
+  }, /*#__PURE__*/React.createElement(Table, Object.assign({}, config.current, {
     size: size || 'small',
     columns: resultColumns,
     rowClassName: "editable-row",

package/es/LmEditTable/components/DraggableContainer.d.ts

@@ -0,0 +1,7 @@
+declare const DraggableContainer: ({ keys, onSortEnd, virtual, ...props }: {
+    [x: string]: any;
+    keys: any;
+    onSortEnd: any;
+    virtual: any;
+}) => JSX.Element;
+export default DraggableContainer;

package/es/LmEditTable/components/DraggableContainer.js

@@ -0,0 +1,32 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React from 'react';
+import DndContainer from '../DndContainer';
+import SortableBox from '../sortableBox';
+import { VirtualWrapper } from '../virtual';
+
+var DraggableContainer = function DraggableContainer(_a) {
+  var keys = _a.keys,
+      onSortEnd = _a.onSortEnd,
+      virtual = _a.virtual,
+      props = __rest(_a, ["keys", "onSortEnd", "virtual"]);
+
+  return /*#__PURE__*/React.createElement(DndContainer, {
+    move: onSortEnd
+  }, /*#__PURE__*/React.createElement(SortableBox, {
+    items: keys
+  }, virtual ? /*#__PURE__*/React.createElement(VirtualWrapper, Object.assign({}, props)) : /*#__PURE__*/React.createElement("tbody", Object.assign({}, props))));
+};
+
+export default DraggableContainer;

package/es/LmEditTable/components/index.d.ts

@@ -0,0 +1,11 @@
+import DraggableContainer from './DraggableContainer';
+export { DraggableContainer };
+declare const _default: {
+    DraggableContainer: ({ keys, onSortEnd, virtual, ...props }: {
+        [x: string]: any;
+        keys: any;
+        onSortEnd: any;
+        virtual: any;
+    }) => JSX.Element;
+};
+export default _default;

package/es/LmEditTable/components/index.js

@@ -0,0 +1,5 @@
+import DraggableContainer from './DraggableContainer';
+export { DraggableContainer };
+export default {
+  DraggableContainer: DraggableContainer
+};

package/es/LmEditTable/sortableItem.d.ts

@@ -1,2 +1,3 @@
-declare const SortableItem: (props: any) => JSX.Element;
-export default SortableItem;
+import React from 'react';
+declare const _default: React.MemoExoticComponent<(props: any) => JSX.Element>;
+export default _default;