vxe-table 3.11.5 → 3.11.6-beta.1

package/lib/table/src/methods.js

@@ -21,8 +21,8 @@ const {
   interceptor,
   createEvent
 } = _ui.VxeUI;
-const isWebkit = _dom.browse['-webkit'] && !_dom.browse.edge;
-const debounceScrollYDuration = _dom.browse.msie ? 80 : 20;
+// const isWebkit = browse['-webkit'] && !browse.edge
+// const debounceScrollYDuration = browse.msie ? 80 : 20
 const customStorageKey = 'VXE_CUSTOM_STORE';
 // 获取所有的列，排除分组
 const getColumnList = columns => {
@@ -129,28 +129,30 @@ function handleVirtualXVisible(_vm) {
   };
 }
 const computeRowHeight = $xeTable => {
+  const props = $xeTable;
   const {
-    $refs,
-    computeSize
-  } = $xeTable;
-  const tableHeader = $refs.tableHeader;
-  const tableBody = $refs.tableBody;
+    showOverflow
+  } = props;
+  const tableHeader = $xeTable.$refs.tableHeader;
+  const tableBody = $xeTable.$refs.tableBody;
   const tableBodyElem = tableBody ? tableBody.$el : null;
-  const vSize = computeSize;
+  const vSize = $xeTable.computeSize;
   const rowHeightMaps = $xeTable.rowHeightMaps;
   let rowHeight = 0;
-  if (tableBodyElem) {
-    const tableHeaderElem = tableHeader ? tableHeader.$el : null;
-    let firstTrElem;
-    firstTrElem = tableBodyElem.querySelector('tr');
-    if (!firstTrElem && tableHeaderElem) {
-      firstTrElem = tableHeaderElem.querySelector('tr');
-    }
-    if (firstTrElem) {
-      rowHeight = firstTrElem.clientHeight;
-    }
-    if (!rowHeight) {
-      rowHeight = rowHeightMaps[vSize || 'default'];
+  if (showOverflow) {
+    if (tableBodyElem) {
+      const tableHeaderElem = tableHeader ? tableHeader.$el : null;
+      let firstTrElem;
+      firstTrElem = tableBodyElem.querySelector('tr');
+      if (!firstTrElem && tableHeaderElem) {
+        firstTrElem = tableHeaderElem.querySelector('tr');
+      }
+      if (firstTrElem) {
+        rowHeight = firstTrElem.clientHeight;
+      }
+      if (!rowHeight) {
+        rowHeight = rowHeightMaps[vSize || 'default'];
+      }
     }
   }
   return rowHeight;
@@ -340,24 +342,50 @@ function calcTableHeight(_vm, key) {
   return num;
 }
 const calcCellHeight = $xeTable => {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  const {
+    showOverflow
+  } = props;
   const {
     tableData,
-    scrollYLoad,
+    scrollXLoad,
+    scrollYLoad
+  } = reactData;
+  const {
     fullAllDataRowIdData
-  } = $xeTable;
+  } = internalData;
   const el = $xeTable.$el;
-  if (scrollYLoad && el) {
+  if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
+    let paddingTop = 0;
+    let paddingBottom = 0;
+    let calcPadding = false;
     tableData.forEach(row => {
       const rowid = (0, _util.getRowid)($xeTable, row);
-      const rest = fullAllDataRowIdData[rowid];
+      const rowRest = fullAllDataRowIdData[rowid];
       const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`);
-      if (rest && trList.length) {
+      if (rowRest && trList.length) {
         let height = 0;
         for (let i = 0; i < trList.length; i++) {
           const trEl = trList[i];
-          height = Math.max(height, trEl.offsetHeight);
+          const tdList = trEl.children;
+          for (let j = 0; j < tdList.length; j++) {
+            const tdEl = tdList[j];
+            const cellElem = tdEl.querySelector('.vxe-cell');
+            if (!calcPadding) {
+              paddingTop = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingTop);
+              paddingBottom = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingBottom);
+              calcPadding = true;
+            }
+            let cellHeight = paddingTop + paddingBottom;
+            if (cellElem) {
+              cellHeight += cellElem.offsetHeight;
+            }
+            height = Math.max(height, cellHeight);
+          }
         }
-        rest.height = height;
+        rowRest.height = height;
       }
     });
   }
@@ -537,6 +565,52 @@ const handleScrollToRowColumn = ($xeTable, fieldOrColumn, row) => {
   }
   return $xeTable.$nextTick();
 };
+function handleRecalculateLayout($xeTable, reFull) {
+  const el = $xeTable.$refs.refElem;
+  if (!el || !el.clientWidth) {
+    return $xeTable.$nextTick();
+  }
+  $xeTable.calcCellWidth();
+  $xeTable.autoCellWidth();
+  if (reFull === true) {
+    // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
+    return $xeTable.computeScrollLoad().then(() => {
+      calcCellHeight($xeTable);
+      $xeTable.calcCellWidth();
+      $xeTable.autoCellWidth();
+      return $xeTable.computeScrollLoad();
+    });
+  }
+  return $xeTable.computeScrollLoad();
+}
+function checkLastSyncScroll($xeTable, isRollX, isRollY) {
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  const {
+    scrollXLoad,
+    scrollYLoad
+  } = reactData;
+  const {
+    lcsTimeout
+  } = internalData;
+  if (lcsTimeout) {
+    clearTimeout(lcsTimeout);
+  }
+  internalData.lcsTimeout = setTimeout(() => {
+    internalData.lcsTimeout = undefined;
+    internalData.inVirtualScroll = false;
+    internalData.inBodyScroll = false;
+    internalData.bodyScrollType = '';
+    internalData.inFooterScroll = false;
+    if (isRollX && scrollXLoad) {
+      $xeTable.updateScrollXData();
+    }
+    if (isRollY && scrollYLoad) {
+      $xeTable.updateScrollYData();
+    }
+    $xeTable.updateCellAreas();
+  }, 200);
+}
 const Methods = {
   callSlot(slotFunc, params, h, vNodes) {
     if (slotFunc) {
@@ -2884,22 +2958,22 @@ const Methods = {
    * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
    */
   recalculate(reFull) {
-    const el = this.$el;
-    if (!el || !el.clientWidth) {
-      return this.$nextTick();
-    }
-    calcCellHeight(this);
-    this.calcCellWidth();
-    this.autoCellWidth();
-    if (reFull === true) {
-      // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-      return this.computeScrollLoad().then(() => {
-        calcCellHeight(this);
-        this.autoCellWidth();
-        return this.computeScrollLoad();
-      });
+    const $xeTable = this;
+    const internalData = $xeTable;
+    const {
+      rceTimeout
+    } = internalData;
+    if (rceTimeout) {
+      clearTimeout(rceTimeout);
+    } else {
+      handleRecalculateLayout($xeTable, !!reFull);
     }
-    return this.computeScrollLoad();
+    return new Promise(resolve => {
+      internalData.rceTimeout = setTimeout(() => {
+        internalData.rceTimeout = undefined;
+        resolve(handleRecalculateLayout($xeTable, !!reFull));
+      }, 20);
+    });
   },
   calcCellWidth() {
     const $xeTable = this;
@@ -3112,17 +3186,25 @@ const Methods = {
   },
   calcCellHeight() {
     const $xeTable = this;
+    const props = $xeTable;
     const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      showOverflow
+    } = props;
     const {
       tableData,
+      scrollXLoad,
       scrollYLoad
     } = reactData;
     const {
       fullAllDataRowIdData
     } = internalData;
     const el = $xeTable.$el;
-    if (scrollYLoad && el) {
+    if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
+      let paddingTop = 0;
+      let paddingBottom = 0;
+      let calcPadding = false;
       tableData.forEach(row => {
         const rowid = (0, _util.getRowid)($xeTable, row);
         const rowRest = fullAllDataRowIdData[rowid];
@@ -3131,9 +3213,23 @@ const Methods = {
           let height = 0;
           for (let i = 0; i < trList.length; i++) {
             const trEl = trList[i];
-            height = Math.max(height, trEl.offsetHeight);
+            const tdList = trEl.children;
+            for (let j = 0; j < tdList.length; j++) {
+              const tdEl = tdList[j];
+              const cellElem = tdEl.querySelector('.vxe-cell');
+              if (!calcPadding) {
+                paddingTop = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingTop);
+                paddingBottom = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingBottom);
+                calcPadding = true;
+              }
+              let cellHeight = paddingTop + paddingBottom;
+              if (cellElem) {
+                cellHeight += cellElem.offsetHeight;
+              }
+              height = Math.max(height, cellHeight);
+            }
           }
-          rowRest.height = height;
+          rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height;
         }
       });
     }
@@ -7023,18 +7119,17 @@ const Methods = {
       scrollLeft: bodyElem.scrollLeft
     };
   },
-  /**
-   * 横向 X 可视渲染事件处理
-   */
-  triggerScrollXEvent() {
-    this.loadScrollXData();
-  },
   loadScrollXData() {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
     const {
       mergeList,
-      mergeFooterList,
+      mergeFooterList
+    } = reactData;
+    const {
       scrollXStore
-    } = this;
+    } = internalData;
     const {
       startIndex,
       endIndex,
@@ -7043,7 +7138,7 @@ const Methods = {
     const {
       toVisibleIndex,
       visibleSize
-    } = handleVirtualXVisible(this);
+    } = handleVirtualXVisible($xeTable);
     const offsetItem = {
       startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
       endIndex: toVisibleIndex + visibleSize + offsetSize
@@ -7057,10 +7152,10 @@ const Methods = {
       if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
         scrollXStore.startIndex = offsetStartIndex;
         scrollXStore.endIndex = offsetEndIndex;
-        this.updateScrollXData();
+        $xeTable.updateScrollXData();
       }
     }
-    this.closeTooltip();
+    $xeTable.closeTooltip();
   },
   handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, params) {
     const $xeTable = this;
@@ -7111,7 +7206,6 @@ const Methods = {
       }
       $xeTable.checkScrolling();
       internalData.lastScrollLeft = scrollLeft;
-      reactData.lastScrollTime = Date.now();
     } else {
       const yThreshold = $xeTable.computeScrollYThreshold;
       isTop = scrollTop <= 0;
@@ -7130,8 +7224,8 @@ const Methods = {
         }
       }
       internalData.lastScrollTop = scrollTop;
-      reactData.lastScrollTime = Date.now();
     }
+    reactData.lastScrollTime = Date.now();
     const evntParams = Object.assign({
       scrollTop,
       scrollLeft,
@@ -7147,6 +7241,7 @@ const Methods = {
       isRight,
       direction
     }, params);
+    checkLastSyncScroll($xeTable, isRollX, isRollY);
     if (rowOpts.isHover || highlightHoverRow) {
       $xeTable.clearHoverRow();
     }
@@ -7161,46 +7256,99 @@ const Methods = {
     }
     $xeTable.dispatchEvent('scroll', evntParams, evnt);
   },
-  /**
-   * 纵向 Y 可视渲染事件处理
-   */
-  triggerScrollYEvent() {
+  lazyScrollXData() {
+    const $xeTable = this;
+    const internalData = $xeTable;
+    const {
+      lxTimeout,
+      lxRunTime,
+      scrollXStore
+    } = internalData;
+    const {
+      visibleSize
+    } = scrollXStore;
+    const fpsTime = Math.min(80, Math.floor(visibleSize * 3));
+    if (lxTimeout) {
+      clearTimeout(lxTimeout);
+    }
+    if (!lxRunTime || lxRunTime + fpsTime < Date.now()) {
+      internalData.lxRunTime = Date.now();
+      $xeTable.loadScrollXData();
+    }
+    internalData.lxTimeout = setTimeout(() => {
+      internalData.lxRunTime = undefined;
+      internalData.lxRunTime = undefined;
+      $xeTable.loadScrollXData();
+    }, fpsTime);
+  },
+  lazyScrollYData() {
+    const $xeTable = this;
+    const internalData = $xeTable;
     const {
+      lyTimeout,
+      lyRunTime,
       scrollYStore
-    } = this;
+    } = internalData;
     const {
-      adaptive,
-      offsetSize,
       visibleSize
     } = scrollYStore;
-    // webkit 浏览器使用最佳的渲染方式，且最高渲染量不能大于 40 条
-    if (isWebkit && adaptive && offsetSize * 2 + visibleSize <= 40) {
-      this.loadScrollYData();
+    const fpsTime = Math.min(80, Math.floor(visibleSize * 2));
+    if (lyTimeout) {
+      clearTimeout(lyTimeout);
+    }
+    if (!lyRunTime || lyRunTime + fpsTime < Date.now()) {
+      internalData.lyRunTime = Date.now();
+      $xeTable.loadScrollYData();
+    }
+    internalData.lyTimeout = setTimeout(() => {
+      internalData.lyTimeout = undefined;
+      internalData.lyRunTime = undefined;
+      $xeTable.loadScrollYData();
+    }, fpsTime);
+  },
+  /**
+   * 横向 X 可视渲染事件处理
+   */
+  triggerScrollXEvent() {
+    const $xeTable = this;
+    const sXOpts = $xeTable.computeSXOpts;
+    if (sXOpts.immediate) {
+      $xeTable.loadScrollXData();
     } else {
-      this.debounceScrollYData();
+      $xeTable.lazyScrollXData();
     }
-    this.debounceScrollYCalculate();
   },
-  debounceScrollYData: _xeUtils.default.debounce(function () {
-    this.loadScrollYData();
-  }, debounceScrollYDuration, {
-    leading: false,
-    trailing: true
-  }),
-  handleSyncScrollX(scrollLeft) {
+  /**
+   * 纵向 Y 可视渲染事件处理
+   */
+  triggerScrollYEvent() {
     const $xeTable = this;
+    const sYOpts = $xeTable.computeSYOpts;
+    if (sYOpts.immediate) {
+      $xeTable.loadScrollYData();
+    } else {
+      $xeTable.lazyScrollYData();
+    }
+  },
+  scrollXEvent(evnt) {
+    const $xeTable = this;
+    const internalData = $xeTable;
+    const {
+      inFooterScroll,
+      inBodyScroll
+    } = internalData;
+    if (inFooterScroll) {
+      return;
+    }
+    if (inBodyScroll) {
+      return;
+    }
     const tableHeader = $xeTable.$refs.tableHeader;
     const tableBody = $xeTable.$refs.tableBody;
     const tableFooter = $xeTable.$refs.tableFooter;
     const bodyElem = tableBody.$el;
     const headerElem = tableHeader ? tableHeader.$el : null;
     const footerElem = tableFooter ? tableFooter.$el : null;
-    (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
-    (0, _dom.setScrollLeft)(headerElem, scrollLeft);
-    (0, _dom.setScrollLeft)(footerElem, scrollLeft);
-  },
-  scrollXEvent(evnt) {
-    const $xeTable = this;
     const wrapperEl = evnt.currentTarget;
     const {
       scrollTop,
@@ -7208,33 +7356,35 @@ const Methods = {
     } = wrapperEl;
     const isRollX = true;
     const isRollY = false;
-    $xeTable.handleSyncScrollX(scrollLeft);
+    internalData.inVirtualScroll = true;
+    (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
+    (0, _dom.setScrollLeft)(headerElem, scrollLeft);
+    (0, _dom.setScrollLeft)(footerElem, scrollLeft);
     $xeTable.triggerScrollXEvent(evnt);
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
       fixed: ''
     });
   },
-  debounceScrollYCalculate: _xeUtils.default.debounce(function () {
-    this.updateScrollYSpace();
-  }, 1000, {
-    leading: false,
-    trailing: true
-  }),
-  handleSyncScrollY(scrollTop) {
+  scrollYEvent(evnt) {
     const $xeTable = this;
+    const internalData = $xeTable;
+    const {
+      inFooterScroll,
+      inBodyScroll
+    } = internalData;
+    if (inFooterScroll) {
+      return;
+    }
+    if (inBodyScroll) {
+      return;
+    }
     const tableBody = $xeTable.$refs.tableBody;
     const leftBody = $xeTable.$refs.leftBody;
     const rightBody = $xeTable.$refs.rightBody;
     const bodyElem = tableBody.$el;
     const leftElem = leftBody ? leftBody.$el : null;
     const rightElem = rightBody ? rightBody.$el : null;
-    (0, _dom.setScrollTop)(bodyElem, scrollTop);
-    (0, _dom.setScrollTop)(leftElem, scrollTop);
-    (0, _dom.setScrollTop)(rightElem, scrollTop);
-  },
-  scrollYEvent(evnt) {
-    const $xeTable = this;
     const wrapperEl = evnt.currentTarget;
     const {
       scrollTop,
@@ -7242,7 +7392,10 @@ const Methods = {
     } = wrapperEl;
     const isRollX = false;
     const isRollY = true;
-    $xeTable.handleSyncScrollY(scrollTop);
+    internalData.inVirtualScroll = true;
+    (0, _dom.setScrollTop)(bodyElem, scrollTop);
+    (0, _dom.setScrollTop)(leftElem, scrollTop);
+    (0, _dom.setScrollTop)(rightElem, scrollTop);
     $xeTable.triggerScrollYEvent(evnt);
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
@@ -7253,22 +7406,33 @@ const Methods = {
    * 纵向 Y 可视渲染处理
    */
   loadScrollYData() {
+    const $xeTable = this;
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
     const {
-      mergeList,
+      showOverflow
+    } = props;
+    const {
+      mergeList
+    } = reactData;
+    const {
+      tableHeight,
       scrollYStore
-    } = this;
+    } = internalData;
     const {
       startIndex,
       endIndex,
       offsetSize
     } = scrollYStore;
+    const offsetYSize = showOverflow ? offsetSize : offsetSize + Math.min(8, Math.ceil(tableHeight / 200));
     const {
       toVisibleIndex,
       visibleSize
-    } = handleVirtualYVisible(this);
+    } = handleVirtualYVisible($xeTable);
     const offsetItem = {
-      startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
-      endIndex: toVisibleIndex + visibleSize + offsetSize
+      startIndex: Math.max(0, toVisibleIndex - 1 - offsetYSize),
+      endIndex: toVisibleIndex + visibleSize + offsetYSize
     };
     calculateMergerOffsetIndex(mergeList, offsetItem, 'row');
     const {
@@ -7279,18 +7443,14 @@ const Methods = {
       if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
         scrollYStore.startIndex = offsetStartIndex;
         scrollYStore.endIndex = offsetEndIndex;
-        this.updateScrollYData();
+        $xeTable.updateScrollYData();
       }
     }
   },
   // 计算可视渲染相关数据
   computeScrollLoad() {
     const $xeTable = this;
-    const props = $xeTable;
     return this.$nextTick().then(() => {
-      const {
-        showOverflow
-      } = props;
       const {
         sYOpts,
         sXOpts,
@@ -7303,16 +7463,14 @@ const Methods = {
       if (scrollXLoad) {
         const {
           visibleSize: visibleXSize
-        } = handleVirtualXVisible(this);
-        // 动态列缓冲量
-        const bufferSize = showOverflow ? 0 : 2;
-        const offsetXSize = Math.max(bufferSize, sXOpts.oSize ? _xeUtils.default.toNumber(sXOpts.oSize) : _dom.browse.msie ? 10 : _dom.browse.edge ? 5 : 0);
+        } = handleVirtualXVisible($xeTable);
+        const offsetXSize = Math.max(0, sXOpts.oSize ? _xeUtils.default.toNumber(sXOpts.oSize) : _dom.browse.edge ? 5 : 0);
         scrollXStore.offsetSize = offsetXSize;
         scrollXStore.visibleSize = visibleXSize;
         scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
-        this.updateScrollXData();
+        $xeTable.updateScrollXData();
       } else {
-        this.updateScrollXSpace();
+        $xeTable.updateScrollXSpace();
       }
       calcCellHeight(this);
       // 计算 Y 逻辑
@@ -7321,19 +7479,17 @@ const Methods = {
       this.rowHeight = rowHeight;
       const {
         visibleSize: visibleYSize
-      } = handleVirtualYVisible(this);
+      } = handleVirtualYVisible($xeTable);
       if (scrollYLoad) {
-        // 动态高缓冲量
-        const bufferSize = showOverflow ? 0 : 2;
-        const offsetYSize = Math.max(bufferSize, sYOpts.oSize ? _xeUtils.default.toNumber(sYOpts.oSize) : _dom.browse.edge ? 10 : 0);
+        const offsetYSize = Math.max(0, sYOpts.oSize ? _xeUtils.default.toNumber(sYOpts.oSize) : _dom.browse.edge ? 10 : 0);
         scrollYStore.offsetSize = offsetYSize;
         scrollYStore.visibleSize = visibleYSize;
         scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
-        this.updateScrollYData();
+        $xeTable.updateScrollYData();
       } else {
-        this.updateScrollYSpace();
+        $xeTable.updateScrollYSpace();
       }
-      this.$nextTick(this.updateStyle);
+      $xeTable.$nextTick(this.updateStyle);
     });
   },
   handleTableColumn() {
@@ -7354,10 +7510,19 @@ const Methods = {
     this.tableColumn = tableColumn;
   },
   updateScrollXData() {
+    const $xeTable = this;
+    const props = $xeTable;
+    const {
+      showOverflow
+    } = props;
     // this.tableColumn = []
-    return this.$nextTick().then(() => {
-      this.handleTableColumn();
-      this.updateScrollXSpace();
+    return $xeTable.$nextTick().then(() => {
+      $xeTable.handleTableColumn();
+      calcCellHeight($xeTable);
+      $xeTable.updateScrollXSpace();
+      if (!showOverflow) {
+        $xeTable.updateScrollYSpace();
+      }
     });
   },
   // 更新横向 X 可视渲染上下剩余空间大小
@@ -7417,10 +7582,10 @@ const Methods = {
   updateScrollYData() {
     const $xeTable = this;
     // this.tableData = []
-    return this.$nextTick().then(() => {
-      this.handleTableData();
+    return $xeTable.$nextTick().then(() => {
+      $xeTable.handleTableData();
       calcCellHeight($xeTable);
-      this.updateScrollYSpace();
+      $xeTable.updateScrollYSpace();
     });
   },
   // 更新纵向 Y 可视渲染上下剩余空间大小
@@ -7878,7 +8043,7 @@ const Methods = {
   }
 };
 // Module methods
-const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,fullValidateField,validateField,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',');
+const funcs = 'setFilter,openFilter,clearFilter,saveFilterPanel,resetFilterPanel,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,fullValidateField,validateField,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',');
 funcs.forEach(name => {
   Methods[name] = function (...args) {
     if (process.env.NODE_ENV === 'development') {