es-grid-template 1.8.71 → 1.8.73

package/lib/table-component/body/TableBodyCellEdit.js

@@ -87,12 +87,11 @@ const renderSelection = args => {
     expandIconColumnIndex,
     isDataTree,
     expanded,
-    setExpanded
-  } = args;
-  const {
+    setExpanded,
     selectionSettings,
     setIsSelectionChange,
-    isSelectionChange
+    isSelectionChange,
+    setIsExpandClick
   } = args;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -107,6 +106,7 @@ const renderSelection = args => {
   }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
     // onClick: row.getToggleExpandedHandler(),
     onClick: e => {
+      setIsExpandClick(true);
       e.stopPropagation();
       e.preventDefault();
       const keys = Object.keys(expanded);
@@ -238,7 +238,8 @@ const TableBodyCellEdit = props => {
     setIsSelectionChange,
     selectionSettings,
     pagination,
-    handleAddMulti
+    handleAddMulti,
+    setIsExpandClick
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -1021,7 +1022,8 @@ const TableBodyCellEdit = props => {
       isDataTree,
       setExpanded,
       expandIconColumnIndex,
-      isSelectionChange
+      isSelectionChange,
+      setIsExpandClick
     }));
   }
   const handleChange = () => {
@@ -1247,6 +1249,7 @@ const TableBodyCellEdit = props => {
     onClick: e => {
       e.stopPropagation();
       e.preventDefault();
+      setIsExpandClick(true);
       const keys = Object.keys(expanded);
       // @ts-ignore
       const tmp = {

package/lib/table-component/body/TableBodyRow.js

@@ -58,7 +58,8 @@ const TableBodyRow = ({
     "data-row-key": row.id,
     className: (0, _classnames.default)(`${prefix}-grid-row ${rowClass ?? ''}`, {
       [`${prefix}-grid-row-selected`]: row.getIsSelected(),
-      [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble
+      [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
+      [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || Array.isArray(row.originalSubRows)
     }),
     style: {
       // display: 'flex',
@@ -70,6 +71,8 @@ const TableBodyRow = ({
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
       height: isEditing ? virtualRow.size : undefined,
       minHeight: isEditing ? undefined : virtualRow.size,
+      // backgroundColor: Array.isArray(row.originalSubRows) ? '#f5f5f5' : undefined,
+      // fontWeight: Array.isArray(row.originalSubRows) ? '500' : undefined,
       ...rowStyles
     },
     onDoubleClick: e => {

package/lib/table-component/header/TableHeadCell2.js

@@ -40,8 +40,18 @@ const TableHeadCell2 = props => {
     id,
     locale,
     format,
-    dataSourceFilter
+    dataSourceFilter,
+    isDataTree,
+    expanded,
+    setExpanded,
+    expandable,
+    dataSource,
+    rowKey
   } = (0, _react.useContext)(_useContext.TableContext);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const {
+    showExpandAll
+  } = expandable || {};
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
   const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
@@ -205,6 +215,13 @@ const TableHeadCell2 = props => {
       // return dropdownContent;
     }
   });
+  const handleCollapseAllGroup = () => {
+    setExpanded({});
+  };
+  const handleExpandAllGroup = () => {
+    const allKeys = (0, _utils.findAllChildrenKeys2)(dataSource, rowKey, 'children');
+    setExpanded((0, _utils.convertToObjTrue)(allKeys));
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     // ref={setNodeRef}
     className: (0, _classnames.default)(`${prefix}-grid-cell`, {
@@ -232,7 +249,26 @@ const TableHeadCell2 = props => {
       [`${prefix}-grid-filter-column`]: column.id !== 'selection_column',
       [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
     })
-  }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
+  }, column.getIndex() === expandIconColumnIndex && isDataTree && showExpandAll && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (!(0, _utils.isObjEmpty)(expanded)) {
+        handleCollapseAllGroup();
+      } else {
+        handleExpandAllGroup();
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, !(0, _utils.isObjEmpty)(expanded) ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  }))), column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
     checked: table.getIsAllRowsSelected(),
     indeterminate: table.getIsSomePageRowsSelected(),
     onChange: e => {

package/lib/table-component/hook/utils.d.ts

@@ -138,6 +138,7 @@ export declare const convertToObjTrue: (arr: any) => {
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function findFirst(items: Column<any>[]): Column<any, unknown>;
 export declare function isTreeArray(arr: any[]): boolean;
+export declare function isTreeArray2(arr: any[]): boolean;
 export declare function updateColumnWidthsRecursive(columns: any[], sizing: Record<string, number>): any[];
 export declare function updateWidthsByOther(source: any[], target: any[]): any[];
 export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];

package/lib/table-component/hook/utils.js

@@ -48,6 +48,7 @@ exports.isEqualSet = isEqualSet;
 exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isFormattedNumber = void 0;
 exports.isObjEqual = isObjEqual;
 exports.isTreeArray = isTreeArray;
+exports.isTreeArray2 = isTreeArray2;
 exports.parseBooleanToValue = exports.onRemoveBgSelectedCell = exports.onAddBgSelectedCell = exports.newGuid = void 0;
 exports.parseClipboardEvent = parseClipboardEvent;
 exports.parseExcelClipboard = parseExcelClipboard;
@@ -2087,13 +2088,6 @@ const convertToObj = arr => {
 };
 exports.convertToObj = convertToObj;
 const convertToObjTrue = arr => {
-  // const result = Object.keys(obj).reduce((acc: any, key) => {
-  //   acc[key] = false;
-  //   return acc;
-  // }, {});
-
-  // return result
-
   return Object.fromEntries(arr.map(key => [key, true]));
 };
 exports.convertToObjTrue = convertToObjTrue;
@@ -2102,11 +2096,26 @@ const getDiffent2Array = (a, b) => {
 };
 exports.getDiffent2Array = getDiffent2Array;
 function findFirst(items) {
+  // const leftItem = items.find(item => item.getIsPinned() === 'left')
   const leftItem = items.find(item => item.getIsPinned() === 'left');
   if (leftItem) return leftItem;
   return null;
 }
 function isTreeArray(arr) {
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return false;
+  }
+  for (const item of arr) {
+    if (!item) {
+      return false;
+    }
+    if (item.children) {
+      return true;
+    }
+  }
+  return false;
+}
+function isTreeArray2(arr) {
   if (!Array.isArray(arr) || arr.length === 0) {
     return false;
   }

package/lib/table-component/style.js

@@ -52,4 +52,4 @@ const colorDark = "#e6e4f3e6 ";
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:\"\";pointer-events:none;}.", "-grid-tbody{.", "-grid-row{}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:\"\";pointer-events:none;}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/lib/table-component/table/Grid.d.ts

@@ -20,6 +20,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
+    setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     triggerChangeColumns?: (args: any, keys: any, type: string) => void;
     windowSize: any;

package/lib/table-component/table/Grid.js

@@ -61,6 +61,7 @@ const Grid = props => {
     windowSize,
     fullScreenTitle,
     className: tableClassNames,
+    setIsExpandClick,
     ...rest
   } = props;
   const [columnResizeMode] = _react.default.useState('onChange');
@@ -158,6 +159,9 @@ const Grid = props => {
     onGroupingChange: setGrouping,
     getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
     // onExpandedChange: setExpanded,
+    getRowCanExpand: row => {
+      return Array.isArray(row.original.children);
+    },
     getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
     getPaginationRowModel: pagination && !infiniteScroll ? (0, _reactTable.getPaginationRowModel)() : undefined,
     onPaginationChange: setPagination
@@ -266,7 +270,8 @@ const Grid = props => {
     },
     className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
-      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark',
+      [`${prefix}-grid-editable`]: editAble
     }),
     style: {
       minHeight: minHeight ?? undefined,
@@ -308,7 +313,8 @@ const Grid = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen
+    setIsFullScreen: setIsFullScreen,
+    setIsExpandClick: setIsExpandClick
   })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
@@ -386,7 +392,8 @@ const Grid = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen
+    setIsFullScreen: setIsFullScreen,
+    setIsExpandClick: setIsExpandClick
   })))))));
 };
 var _default = exports.default = Grid;

package/lib/table-component/useContext.d.ts

@@ -83,6 +83,12 @@ export interface IContext<T> {
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     dataSourceFilter?: SourceFilter[];
+    onExpandClick?: (args: {
+        expandedKeys: string[];
+        key: string;
+        rowData: any;
+    }) => void;
+    setIsExpandClick: Dispatch<SetStateAction<boolean>>;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/lib/table-component/useContext.js

@@ -23,5 +23,6 @@ const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContex
   setSorterChange: () => {},
   setFilterChange: () => {},
   setExpanded: () => {},
-  handleCellClick: () => {}
+  handleCellClick: () => {},
+  setIsExpandClick: () => {}
 });

package/lib/table-virtuoso/InternalTable.js

@@ -278,7 +278,7 @@ const InternalTable = props => {
         setExpanded((0, _utils.convertToObjTrue)(defaultExpandedRowKeys ?? []));
       }
     }
-  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData, table]);
+  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData]);
   const triggerGroupColumns = groupedColumns => {
     // const abc = updateColumnsByGroup(columns, groupedColumns)
 
@@ -378,7 +378,7 @@ const InternalTable = props => {
     triggerSorter: triggerSorter,
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
-    editAble: isFullScreen ? false : editAble,
+    editAble: false,
     triggerChangeColumns: triggerChangeColumns,
     triggerGroupColumns: triggerGroupColumns,
     expanded: expanded,

package/lib/table-virtuoso/body/TableBodyCell.js

@@ -330,14 +330,9 @@ const TableBodyCell = props => {
     tabIndex: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? 0 : -1,
     "data-col-index": colIndex,
     "data-row-index": rowNumber,
-    "data-col-key": cell.column.id
-    // data-row-key={cell.row.id}
-    ,
+    "data-col-key": cell.column.id,
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-html": _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent))
-    // data-tooltip-delay-show={500}
-    ,
-
+    "data-tooltip-html": _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent)),
     className: (0, _classnames.default)(`${prefix}-grid-cell`, {
       // [`${prefix}-grid-cell-ellipsis`]: true,
 

package/lib/table-virtuoso/body/TableBodyCellRowGroup.d.ts

@@ -0,0 +1,14 @@
+import type { Cell, Table } from "@tanstack/react-table";
+import type { CommandClick } from "../../grid-component/type";
+import React from "react";
+import type { VirtualItem } from "@tanstack/react-virtual";
+interface TableBodyCellProps<T> {
+    table: Table<T>;
+    tableId: string;
+    cell: Cell<T, unknown>;
+    commandClick?: (args: CommandClick<T>) => void;
+    virtualRow: VirtualItem;
+    [key: string]: any;
+}
+declare const TableBodyCellRowGroup: <RecordType extends object>(props: TableBodyCellProps<RecordType>) => React.JSX.Element;
+export default TableBodyCellRowGroup;

package/lib/table-virtuoso/body/TableBodyCellRowGroup.js

@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _server = _interopRequireDefault(require("react-dom/server"));
+var _utils = require("../hook/utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _useContext = require("../useContext");
+var _useColumns = require("../../table-component/hook/useColumns");
+const TableBodyCellRowGroup = props => {
+  const {
+    cell,
+    table,
+    isEditing,
+    colSpan,
+    rowSpan,
+    sumValue
+  } = props;
+  const {
+    id,
+    prefix,
+    focusedCell,
+    setFocusedCell,
+    expanded,
+    setExpanded,
+    expandable,
+    isDataTree,
+    setIsSelectionChange,
+    isSelectionChange,
+    selectionSettings,
+    wrapSettings
+    // dataSource
+  } = _react.default.useContext(_useContext.TableContext);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
+  const record = cell.row.original;
+  const columnMeta = cell.column.columnDef.meta ?? {};
+  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+
+  // const tooltipContent = (isOpenTooltip === false || columnMeta.type === 'checkbox') ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+    value: cell.getValue(),
+    record
+  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
+  const allRows = table.getRowModel().flatRows;
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
+  const colIndex = cell.column.getIndex();
+  const isPinned = cell.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const enableClick = typeof columnMeta.allowSelection === 'function' ? columnMeta.allowSelection(record) : columnMeta.allowSelection;
+  return /*#__PURE__*/_react.default.createElement("td", {
+    key: cell.id,
+    colSpan: colSpan,
+    rowSpan: rowSpan
+    // {...cellProps}
+    ,
+
+    ref: el => {
+      if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
+        el?.focus();
+      }
+    },
+    tabIndex: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? 0 : -1,
+    "data-col-index": colIndex,
+    "data-row-index": rowNumber,
+    "data-col-key": cell.column.id,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent)),
+    className: (0, _classnames.default)(`${prefix}-grid-cell`, {
+      // [`${prefix}-grid-cell-ellipsis`]: true,
+
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+      // [`${prefix}-grid-cell-selected`]: isCellSelected,
+
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+    }),
+    style: {
+      ...cellStyles,
+      // display: 'flex',
+      width: cell.column.getSize(),
+      minWidth: cell.column.getSize(),
+      minHeight: 36,
+      ...(0, _utils.getCommonPinningStyles)(cell.column)
+    },
+    onMouseEnter: e => {
+      if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+        setIsOpenTooltip(true);
+      }
+    },
+    onKeyDown: e => {
+      const flatRows = table.getRowModel().flatRows;
+      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
+        const nextIndex = cell.row.index + 1;
+        // const nextIndex = rowNumber + 1
+
+        const nextId = flatRows[nextIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.key === 'ArrowUp' && rowNumber > 0) {
+        const prevIndex = cell.row.index - 1;
+        const nextId = flatRows[prevIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
+        (0, _useColumns.toggleRowSelection)({
+          e,
+          cell,
+          setIsSelectionChange,
+          isSelectionChange,
+          selectionSettings
+        });
+        cell.row.getToggleSelectedHandler()(e);
+      }
+    },
+    onClick: e => {
+      const selection = window.getSelection();
+      const text = selection ? selection.toString() : "";
+      if (text.length > 0 || enableClick === false) {} else {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          (0, _useColumns.toggleRowSelection)({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: cell.row.id
+          });
+        }
+      }
+    }
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('ui-rc_cell-content', {})
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
+    // onClick: cell.row.getToggleExpandedHandler(),
+
+    // onClick: (e) => {
+    //   e.stopPropagation()
+    //   cell.row.toggleExpanded()
+    // },
+
+    onClick: e => {
+      e.stopPropagation();
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), sumValue) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sumValue));
+};
+var _default = exports.default = TableBodyCellRowGroup;

package/lib/table-virtuoso/body/TableBodyRow.d.ts

@@ -9,5 +9,5 @@ interface TableBodyRowProps<T> {
     editAble?: boolean;
     [key: string]: any;
 }
-declare const TableBodyRow: <RecordType extends object>({ tableId, table, row, virtualRow, commandClick, contextMenuItems, onContextMenu, rowheight, ...rest }: TableBodyRowProps<RecordType>) => React.JSX.Element;
+declare const TableBodyRow: <RecordType extends object>({ tableId, table, row, virtualRow, commandClick, contextMenuItems, onContextMenu, rowheight, editAble, isEditing, isRowEditable, ...rest }: TableBodyRowProps<RecordType>) => React.JSX.Element;
 export default TableBodyRow;

package/lib/table-virtuoso/body/TableBodyRow.js

@@ -11,6 +11,11 @@ var _reactTable = require("@tanstack/react-table");
 var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../hook/utils");
+var _utils2 = require("../../table-component/hook/utils");
+var _hooks = require("../../grid-component/hooks");
+var _reactNumericComponent = require("react-numeric-component");
+var _TableBodyCellRowGroup = _interopRequireDefault(require("./TableBodyCellRowGroup"));
 const TableBodyRow = ({
   tableId,
   table,
@@ -20,6 +25,9 @@ const TableBodyRow = ({
   contextMenuItems,
   onContextMenu,
   rowheight,
+  editAble,
+  isEditing,
+  isRowEditable,
   ...rest
 }) => {
   const {
@@ -28,7 +36,8 @@ const TableBodyRow = ({
     focusedCell,
     rowClassName,
     onRowStyles,
-    groupSetting
+    groupSetting,
+    format
   } = _react.default.useContext(_useContext.TableContext);
   const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
   const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
@@ -38,6 +47,8 @@ const TableBodyRow = ({
     key: row.id,
     "data-row-key": row.id
   }, rest, {
+    // data-known-size={37}
+
     className: (0, _classnames.default)(`${prefix}-grid-row ${rowClass ?? ''}`, {
       [`${prefix}-grid-row-selected`]: row.getIsSelected(),
       [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId,
@@ -118,6 +129,37 @@ const TableBodyRow = ({
         groupValue: groupValue
       }));
     }
+    if (row.subRows.length > 0 && originCol.sumGroup === true && originCol.type === 'number') {
+      const colFormat = typeof originCol.format === 'function' ? originCol.format({}) : originCol.format;
+      const cellFormat = (0, _utils.getFormat)(colFormat, format);
+      const thousandSeparator = cellFormat?.thousandSeparator;
+      const decimalSeparator = cellFormat?.decimalSeparator;
+      const dec = cellFormat?.decimalScale;
+      const numericFormatProps = {
+        thousandSeparator: (0, _utils2.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+        decimalSeparator: (0, _utils2.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+      };
+      const childrenData = row.subRows.map(it => it.original);
+      const sumValue = (0, _hooks.sumByField)(childrenData, cell.column.id);
+      const sumValueFormat = (0, _reactNumericComponent.numericFormatter)(sumValue.toString(), numericFormatProps);
+      return /*#__PURE__*/_react.default.createElement(_TableBodyCellRowGroup.default, (0, _extends2.default)({
+        table: table,
+        tableId: tableId,
+        key: cell.id,
+        cell: cell,
+        commandClick: commandClick,
+        virtualRow: virtualRow,
+        isEditing: false,
+        colSpan: onCellColSpan ?? 1,
+        rowSpan: onCellRowSpan ?? 1,
+        sumValue: sumValueFormat
+      }, otherCellAttributes));
+    }
     return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({
       table: table,
       tableId: tableId,

package/lib/table-virtuoso/hook/utils.d.ts

@@ -40,6 +40,7 @@ export declare const getDateRangeFormat: (type: EditType | TypeFilter | IColumnT
 export declare const getTypeFilter: (col: any) => TypeFilter;
 export declare const addRowIdArray: (inputArray: any[]) => any[];
 export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
+export declare function unGroupData(groupedArray: any[], originData: any[]): any[];
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;