es-grid-template 1.8.59 → 1.8.60

package/lib/grid-component/InternalTable.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 require("react-resizable/css/styles.css");
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _hooks = require("./hooks");
+var _server = _interopRequireDefault(require("react-dom/server"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("dayjs/locale/es");
 require("dayjs/locale/vi");
@@ -250,30 +251,22 @@ const InternalTable = props => {
     active: -1,
     over: -1
   });
-  const [tooltipContent, setTooltipContent] = (0, _react.useState)('');
+  // const [tooltipContent, setTooltipContent] = useState<any>('')
+
   const [filterStates, setFilterState] = _react.default.useState(null);
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
+  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
   const mergedData = _react.default.useMemo(() => {
-    if (groupAble && groupSetting && groupSetting.client !== false) {
+    if (groupSetting && groupSetting.client !== false) {
       return (0, _hooks.groupArrayByColumns)(dataSource, groupColumns);
     }
     return (0, _hooks.addRowIdArray)(dataSource);
-  }, [dataSource, groupAble, groupColumns, groupSetting]);
+  }, [dataSource, groupColumns, groupSetting?.client]);
 
   // ========================= Keys =========================
   const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _hooks.getAllRowKey)(mergedData), {
     value: undefined
   });
-  //
-  // const originData = React.useMemo(() => {
-  //
-  //   if (groupAble && groupSetting && groupSetting.client !== false) {
-  //     return groupArrayByColumns(dataSource, groupColumns)
-  //   }
-  //   return addRowIdArray(dataSource)
-  //
-  // }, [dataSource, groupAble, groupColumns, groupSetting])
-
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
     const totalHeight = propsHeight;
@@ -452,7 +445,7 @@ const InternalTable = props => {
           wrapSettings: wrapSettings
         })),
         // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-        ellipsis: column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        ellipsis: column.ellipsis !== false || wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
         // ellipsis: false,
         // ellipsis: column.ellipsis !== false,
 
@@ -568,6 +561,10 @@ const InternalTable = props => {
            ${wrapSettings && wrapSettings.wrapMode === 'Content' ? 'ui-rc-table-cell-ellipsis' : ''}`
         }),
         onCell: (data, index) => {
+          const tooltipContent = isOpenTooltip === false ? '' : column?.tooltipDescription ? typeof column.tooltipDescription === 'function' ? column.tooltipDescription({
+            value: data[column.field ?? ''],
+            record: data
+          }) : column.tooltipDescription : column.template && typeof column.template !== 'function' ? column.template : data[column.field ?? ''];
           return {
             id: `${column.field}`,
             colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
@@ -578,7 +575,23 @@ const InternalTable = props => {
               'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field
             }),
             // 'data-tooltip-id': "tooltip-cell-content"
-            'data-tooltip-id': `${id}-tooltip-cell-content`
+            'data-tooltip-id': `${id}-tooltip-cell-content`,
+            "data-tooltip-html": _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent)),
+            onMouseEnter: e => {
+              if (e.target.firstChild?.clientWidth <= e.target.firstChild?.scrollWidth) {
+                if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+                  setIsOpenTooltip(true);
+                } else {
+                  setIsOpenTooltip(false);
+                }
+              } else {
+                if (e.target.clientWidth < e.target.scrollWidth) {
+                  setIsOpenTooltip(true);
+                } else {
+                  setIsOpenTooltip(false);
+                }
+              }
+            }
           };
         },
         render: (value, record, rowIndex) => {
@@ -600,6 +613,10 @@ const InternalTable = props => {
             }
             return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
+          if (groupAble && record.children && column.sumGroup === true && column.type === 'number') {
+            const sumValue = (0, _hooks.sumByField)((0, _hooks.filterDataByColumns4)(record.children, [], []), column?.field);
+            return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sumValue);
+          }
           return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
         // defaultSortOrder: 'ascend',
@@ -921,10 +938,7 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
-
-  // const TableComponent = infiniteScroll ? InfiniteTable : (groupAble ? Group : editAble ? GridEdit : Grid)
-  const TableComponent = groupAble ? _Group.default : _Grid.default;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, true && /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     sensors: sensors,
     modifiers: [_modifiers.restrictToHorizontalAxis],
     onDragEnd: onDragEnd,
@@ -935,7 +949,7 @@ const InternalTable = props => {
     strategy: _sortable.horizontalListSortingStrategy
   }, /*#__PURE__*/_react.default.createElement(DragIndexContext.Provider, {
     value: dragIndex
-  }, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Group.default, (0, _extends2.default)({}, rest, {
     t: t,
     id: id,
     locale: locale,
@@ -963,34 +977,23 @@ const InternalTable = props => {
     groupColumns: groupColumns,
     commandClick: triggerCommandClick,
     summary: summary,
-    pagination: pagination
-    // scroll={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
-    // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
-    ,
-
+    pagination: pagination,
     scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
       y: 500
     } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
-
-    // height={isFullScreen ? windowSize.innerHeight - 100 : propsHeight}
     ,
     height: propsHeight,
-    scrollHeight: scrollHeight,
-    components: {
-      header: {
-        cell: ResizableTitle
-      },
-      body: {
-        cell: TableBodyCell
-      }
-    },
-    setTooltipContent: setTooltipContent,
+    scrollHeight: scrollHeight
+    // components={{
+    //   header: { cell: ResizableTitle },
+    //   body: { cell: TableBodyCell }
+    // }}
+    ,
+
     onFilter: val => {
       handleOnFilter(val);
-      // triggerFilter?.(convertFilters(val))
-      // onFilter?.(convertFilters(val))
     },
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
@@ -998,10 +1001,6 @@ const InternalTable = props => {
     onChange: handleChange,
     handleFullScreen: handleFullScreen,
     isFullScreen: isFullScreen
-
-    // onChange={(paging, filters, sorter) => {
-    //   handleChange(sorter)
-    // }}
   })))), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
     style: {
       minWidth: 100,
@@ -1053,7 +1052,7 @@ const InternalTable = props => {
     strategy: _sortable.horizontalListSortingStrategy
   }, /*#__PURE__*/_react.default.createElement(DragIndexContext.Provider, {
     value: dragIndex
-  }, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
     t: t,
     id: _faker.faker.string.alpha(20),
     locale: locale,
@@ -1099,8 +1098,10 @@ const InternalTable = props => {
       body: {
         cell: TableBodyCell
       }
-    },
-    setTooltipContent: setTooltipContent,
+    }
+    // setTooltipContent={setTooltipContent}
+    ,
+
     onFilter: val => {
       handleOnFilter(val);
       // triggerFilter?.(convertFilters(val))
@@ -1137,12 +1138,6 @@ const InternalTable = props => {
     id: `${id}-tooltip-cell-content`,
     style: {
       zIndex: 1999
-    },
-    render: () => {
-      if (tooltipContent) {
-        return /*#__PURE__*/_react.default.createElement("span", null, typeof tooltipContent === 'function' ? tooltipContent() : tooltipContent);
-      }
-      return undefined;
     }
   }));
 };

package/lib/grid-component/TableGrid.js

@@ -62,7 +62,7 @@ const TableGrid = props => {
     rowHoverable,
     title,
     format,
-    // virtual = true,
+    virtualRow = true,
     t,
     lang,
     contextMenuOpen,
@@ -322,14 +322,18 @@ const TableGrid = props => {
       'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
     bordered: true,
-    virtual: true,
+    virtual: virtualRow,
     columns: columns,
     rowKey: rowKey,
     rowHoverable: rowHoverable,
     size: "small",
     scroll: scroll ? scroll : {
       y: 500
-    },
+    }
+
+    // scroll={{ x: 'max-content', y: 700 }}
+    ,
+
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
@@ -380,16 +384,6 @@ const TableGrid = props => {
       , {
         items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
         mode: 'scroll'
-      })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
-        fontSize: 16,
-        onClick: () => handleFullScreen?.(),
-        "data-tooltip-id": "tooltip-icon",
-        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
-      }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
-        fontSize: 16,
-        onClick: () => handleFullScreen?.(),
-        "data-tooltip-id": "tooltip-icon",
-        "data-tooltip-content": t ? t('Full screen') : 'Full screen'
       })), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           display: 'flex',
@@ -405,7 +399,17 @@ const TableGrid = props => {
         // @ts-ignore
         ,
         showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-      }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+      }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+        fontSize: 16,
+        onClick: () => handleFullScreen?.(),
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+      }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
+        fontSize: 16,
+        onClick: () => handleFullScreen?.(),
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+      })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
         columns: columns,
         t: t,
         columnsGroup: groupColumns,

package/lib/grid-component/TempTable.js

@@ -17,11 +17,7 @@ const TempTable = props => {
     editAble,
     ...rest
   } = props;
-
-  // const TabComponent = groupAble ? InternalTable  : Table
   const TabComponent = groupAble ? _InternalTable.default : _tableComponent.default;
-  // const TabComponent = InternalTable
-
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(TabComponent, (0, _extends2.default)({}, rest, {
     groupAble: groupAble,
     editAble: editAble

package/lib/grid-component/hooks/utils.d.ts

@@ -160,6 +160,7 @@ export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const isRangeCell: (selectedCells: any, type: string, rowIndex: number, colIndex: number) => boolean;
 export declare const isSelectedCell: (selectedCells: any, rowIndex: number, colIndex: number) => any;
+export declare function groupAndSum(data: any[], columns: any[], groupField?: string): unknown[];
 export declare function groupArrayByColumns(data: any[], columns: string[] | undefined): any;
 export declare const isFormattedNumber: (str: string) => boolean;
 export declare const detectSeparators: (str: string) => {

package/lib/grid-component/hooks/utils.js

@@ -25,6 +25,7 @@ exports.getCellsByPosition2 = getCellsByPosition2;
 exports.getFormat = exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getDateRangeFormat = exports.getColumnsVisible = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
+exports.groupAndSum = groupAndSum;
 exports.groupArrayByColumns = groupArrayByColumns;
 exports.hideDraggingPoint = void 0;
 exports.invalidDate = invalidDate;
@@ -39,8 +40,8 @@ exports.isRightMostInRegion = isRightMostInRegion;
 exports.isTopMostInRegion = exports.isSelectedCell = void 0;
 exports.mergeWithFilter = mergeWithFilter;
 exports.mergeWithFilter2 = mergeWithFilter2;
-exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = void 0;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.unFlattenData = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sumByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeVietnameseTones = exports.removeInvisibleColumns = void 0;
+exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = void 0;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.unFlattenData = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sumByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeVietnameseTones = exports.removeInvisibleColumns = exports.removeFieldRecursive = void 0;
 exports.updateDataByFilter = updateDataByFilter;
 exports.updateOrInsert = updateOrInsert;
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -2473,6 +2474,29 @@ const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
   return selectedCells.has(key);
 };
 exports.isSelectedCell = isSelectedCell;
+function groupAndSum(data, columns, groupField = "name") {
+  const sumFields = columns.filter(col => col.sumGroup).map(col => col.field);
+  const groups = {};
+  data.forEach(item => {
+    const key = item[groupField];
+    if (!groups[key]) {
+      groups[key] = {
+        [groupField]: key
+      };
+
+      // khởi tạo các trường sum = 0
+      sumFields.forEach(field => {
+        groups[key][field] = 0;
+      });
+    }
+
+    // cộng dồn các field có sumGroup
+    sumFields.forEach(field => {
+      groups[key][field] += Number(item[field] || 0);
+    });
+  });
+  return Object.values(groups);
+}
 function groupArrayByColumns(data, columns) {
   const result = [];
   const checkEmpty = d => {
@@ -2768,7 +2792,8 @@ const removeInvisibleColumns = columns => {
 exports.removeInvisibleColumns = removeInvisibleColumns;
 const sumByField = (data, field) => {
   return data.reduce((total, item) => {
-    if (item[field] != null) {
+    // if (item[field] != null) {
+    if (typeof item[field] === 'number' && !isNaN(item[field])) {
       return total + item[field];
     } else if (item.children && item.children.length > 0) {
       return total + sumByField(item.children, field);

package/lib/grid-component/table/GridEdit.js

@@ -246,7 +246,7 @@ const GridEdit = props => {
     contextMenuItems: propsContext,
     showDefaultContext,
     validate,
-    setTooltipContent,
+    // setTooltipContent,
     onBlur,
     locale,
     mergedFilterKeys,
@@ -1905,7 +1905,8 @@ const GridEdit = props => {
   };
   const handleEdit = (record, col, editType, rowIndex, e) => {
     (0, _hooks.onRemoveBorderSelectedCell)(selectedCells.current, id);
-    setTooltipContent('');
+
+    // setTooltipContent('')
 
     // @ts-ignore
     // setEditingKey(record[rowKey])
@@ -2374,7 +2375,9 @@ const GridEdit = props => {
         const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
         const cellFormat = (0, _hooks.getFormat)(colFormat, format);
         const rowError = dataErrors.find(it => it.index === rowNumber);
-        const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
+
+        // const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null
+
         const handleClick = event => {
           if (!(record[rowKey] === editingKey.current) && record[rowKey] !== editingKey.current && (0, _hooks.isEditable)(column, record)) {
             handleEdit(record, column, (0, _hooks.getEditType)(column, record), rowNumber, event);
@@ -2390,7 +2393,8 @@ const GridEdit = props => {
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: event => {
-            setTooltipContent(cellError ? cellError.message : '');
+            // setTooltipContent(cellError ? cellError.message : '')
+
             handleMouseEnter(rowNumber, colIndex, event);
 
             // hoveredRow.current = rowNumber

package/lib/grid-component/table/Group.js

@@ -13,6 +13,7 @@ var _hooks = require("../hooks");
 var _ColumnsGroup = require("../ColumnsGroup/ColumnsGroup");
 var _columns = require("../hooks/columns");
 var _becoxyIcons = require("becoxy-icons");
+var _rcMasterUi = require("rc-master-ui");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Group = props => {
@@ -51,11 +52,12 @@ const Group = props => {
     return [];
   });
   _react.default.useEffect(() => {
-    if (defaultExpandedRowKeys) {
-      setInnerExpandedKeys(defaultExpandedRowKeys);
-    }
     if (defaultExpandAllRows) {
       setInnerExpandedKeys((0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? []);
+    } else {
+      if (defaultExpandedRowKeys) {
+        setInnerExpandedKeys(defaultExpandedRowKeys);
+      }
     }
   }, [defaultExpandedRowKeys, defaultExpandAllRows, dataSource]);
   const mergedExpandedKeys = _react.default.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
@@ -105,11 +107,11 @@ const Group = props => {
       columnsGrouped: groupColumns,
       onSubmit: handleOnGroup
     }), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, innerExpandedKeys.length > 0 ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Collapse2, {
-      fontSize: 18,
+      fontSize: 16,
       color: '#555555',
       onClick: handleCollapseAllGroup
     }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Expand2, {
-      fontSize: 18,
+      fontSize: 16,
       color: '#555555',
       onClick: handleExpandAllGroup
     })));
@@ -122,6 +124,20 @@ const Group = props => {
       position: 'relative'
     },
     id: id
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619',
+          cellFontSize: 12,
+          cellFontSizeSM: 13,
+          headerBg: '#ffffff',
+          cellPaddingBlockSM: 7
+        }
+      }
+    }
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
     t: t,
     id: id,
@@ -183,6 +199,6 @@ const Group = props => {
     groupToolbar: groupToolbar,
     groupColumns: groupColumns,
     isFullScreen: isFullScreen
-  }))));
+  })))));
 };
 var _default = exports.default = Group;

package/lib/grid-component/table/InfiniteTable.js

@@ -100,7 +100,7 @@ const InfiniteTable = props => {
     id: id,
     dataSource: dataSource,
     pagination: false,
-    virtual: true,
+    virtualRow: true,
     onScroll: handleScroll,
     loading: loading,
     isFullScreen: isFullScreen

package/lib/grid-component/type.d.ts

@@ -118,7 +118,10 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     headerTextAlign?: ITextAlign;
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     showTooltip?: boolean;
-    tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
+    tooltipDescription?: ReactNode | ReactElement | ((args: {
+        value: any;
+        record: RecordType;
+    }) => ReactNode | ReactElement);
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
     commandItems?: CommandItem[];
     children?: ColumnTable<RecordType>[];
@@ -136,6 +139,7 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     editFromSettings?: IEditFromSettings;
     fixedType?: FixedType;
     headerTextWrap?: boolean;
+    sumGroup?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
     onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
@@ -195,7 +199,7 @@ export type Sort = {
     field: string;
     order: 'ascend' | 'descend' | null;
 };
-export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination' | 'locale'> {
+export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination' | 'locale' | 'virtual'> {
     editAble?: boolean;
     infiniteScroll?: boolean;
     theme?: {
@@ -203,6 +207,8 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
         backgroundColor?: string;
         color?: string;
     };
+    virtualRow?: boolean;
+    virtualColumns?: boolean;
     next?: () => void;
     locale?: Locale;
     groupAble?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.8.59",
+  "version": "1.8.60",
   "description": "es-grid-template",
   "keywords": [
     "react",