es-grid-template 1.8.58 → 1.8.60

package/es/grid-component/ColumnsChoose.js

@@ -1,326 +1,7 @@
-// import React, {Fragment, useMemo, useState} from "react"
-//
-// import styled from "styled-components"
-// import {Button, Input, Popover, Tooltip} from "antd";
-// import {SettingOutlined} from "@ant-design/icons";
-// import {
-//   getVisibleColumnKeys,
-//   updateColumns
-// } from "./hooks";
-//
-// // import type {TableColumnsType} from "rc-master-ui";
-// import Tree from "rc-master-ui/es/tree";
-// import SearchOutlined from "@ant-design/icons/SearchOutlined";
-// import type {ColumnsTable} from "./type";
-// import useMergedState from "rc-util/lib/hooks/useMergedState";
-//
-//
-// const  BoxAction = styled.div`
-//   border-top: 1px solid #c4c4c4;
-//   padding-top: .75rem;
-//   display: flex;
-//   justify-content: end;
-//   gap: 10px;
-//
-//   .btn-action {
-//     background: none !important;
-//     border: none !important;
-//     &.btn-action-submit {
-//       color: #df4318;
-//       &:disabled {
-//         background-color: #f0f0f0 !important;
-//       }
-//       &:hover {
-//         color: #df4318 !important;
-//       }
-//     }
-//
-//     &:hover {
-//       background-color: #f0f0f0 !important;
-//     }
-//   }
-// `
-//
-// export type IColumnsChoose<RecordType> = {
-//   columns: ColumnsTable<RecordType>
-//   columnsGroup?: string[]
-//   triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void
-//   t?: any
-//
-// }
-//
-//
-// export const ColumnsChoose = <RecordType extends object>(props: IColumnsChoose<RecordType>) => {
-//   const {
-//     columns: propsColumns,
-//     triggerChangeColumns,
-//     t,
-//     columnsGroup,
-//   } = props
-//
-//   // const dataList: { key: React.Key; title: string }[] = [];
-//
-//   // const defaultColumns = useMemo(() => {
-//   //   return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
-//   // }, [propsColumns])
-//
-//
-//   // const columnsChooseRef: any = useRef()
-//   // const searchRef: any = useRef()
-//
-//
-//
-//   // const [columns, setColumns] = useState<TableColumnsType>([])
-//
-//   // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-//
-//   // const [isManualUpdate, setIsManualUpdate] = useState(false);
-//
-//
-//   // useEffect(() => {
-//   //
-//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-//   //   setColumns(defaultColumns as TableColumnsType)
-//   //
-//   // }, [propsColumns])
-//
-//   const columns  = useMemo(() => {
-//
-//     // return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
-//     return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false)
-//     // setColumns(defaultColumns as TableColumnsType)
-//   }, [columnsGroup, propsColumns])
-//
-//
-//   // useEffect(() => {
-//   //
-//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-//   //
-//   //   const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
-//   //
-//   //   if (!isManualUpdate) {
-//   //     setSelectedKeys(defaultSelectedKeys)
-//   //   }
-//   //   setIsManualUpdate(false);
-//   //
-//   //
-//   // }, [isManualUpdate, propsColumns])
-//
-//   const defaultSelectedKeys =  React.useMemo(() => {
-//
-//     const rs = propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
-//     return getVisibleColumnKeys(rs)
-//
-//   },  [columnsGroup, propsColumns])
-//
-//   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
-//     defaultSelectedKeys || [],
-//     {
-//       value: defaultSelectedKeys,
-//     },
-//   );
-//
-//   //
-//   // const defaultSelectedKeys = useMemo(() => {
-//   //
-//   //   return getVisibleColumnKeys(propsColumns)
-//   //
-//   // }, [propsColumns])
-//
-//
-//   const [clicked, setClicked] = useState(false);
-//   const [autoExpandParent, setAutoExpandParent] = useState(true);
-//
-//
-//   // const treeData = useMemo(() => {
-//   //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
-//   //     data.map((item) => {
-//   //       const strTitle = item.title as string;
-//   //       const index = strTitle.indexOf(searchValue);
-//   //       const beforeStr = strTitle.substring(0, index);
-//   //       const afterStr = strTitle.slice(index + searchValue.length);
-//   //       const title =
-//   //         index > -1 ? (
-//   //           <span key={item.key}>
-//   //             {beforeStr}
-//   //             <span className="site-tree-search-value">{searchValue}</span>
-//   //             {afterStr}
-//   //           </span>
-//   //         ) : (
-//   //           <span key={item.key}>{strTitle}</span>
-//   //         );
-//   //       if (item.children) {
-//   //         return { title, key: item.key, children: loop(item.children) };
-//   //       }
-//   //
-//   //       return {
-//   //         title,
-//   //         key: item.key,
-//   //       };
-//   //     });
-//   //
-//   //   // return loop(defaultData);
-//   //   return loop(columns as any);
-//   // }, [searchValue, columns]);
-//
-//
-//   const hide = () => {
-//     setClicked(false)
-//   }
-//
-//   const handleClickChange = (open: boolean) => {
-//     setClicked(open)
-//   }
-//
-//   const onExpand = () => {
-//     // setExpandedKeys(newExpandedKeys)
-//     setAutoExpandParent(false)
-//   }
-//
-//   // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
-//   //   let parentKey: React.Key
-//   //   for (let i = 0; i < tree.length; i++) {
-//   //     const node = tree[i]
-//   //     if (node.children) {
-//   //       if (node.children.some((item) => item.key === key)) {
-//   //         parentKey = node.key
-//   //       } else if (getParentKey(key, node.children)) {
-//   //         parentKey = getParentKey(key, node.children)
-//   //       }
-//   //     }
-//   //   }
-//   //   return parentKey!
-//   // }
-//
-//   // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//   const onChange = () => {
-//     // const { value } = e.target
-//     // const newExpandedKeys = dataList
-//     //   .map((item) => {
-//     //     if (item.title.indexOf(value) > -1) {
-//     //       return getParentKey(item.key, defaultData)
-//     //     }
-//     //     return null
-//     //   })
-//     //   .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
-//     // setExpandedKeys(newExpandedKeys)
-//
-//     // setSearchValue(value)
-//     setAutoExpandParent(true)
-//   };
-//
-//   const onCheck = (keys: string[]) => {
-//
-//     // setSelectedKeys(keys)
-//     setMergedSelectedKeys(keys)
-//     // setIsManualUpdate(true)
-//
-//   }
-//
-//   const handleAccept = () => {
-//
-//
-//     // const rs1  =  updateColumns(propsColumns, selectedKeys)
-//     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
-//
-//
-//     triggerChangeColumns?.(rs1, 'columnChoose')
-//
-//     hide()
-//
-//   }
-//
-//   const handleCancel = () => {
-//     // setSelectedKeys(defaultSelectedKeys)
-//     hide()
-//   }
-//
-//
-//   return (
-//     <Fragment>
-//       <Popover
-//         placement={'bottomLeft'}
-//         content={
-//           <div style={{minWidth: 250}}>
-//             <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
-//
-//             <Tree
-//               onExpand={onExpand}
-//               // expandedKeys={expandedKeys}
-//               autoExpandParent={autoExpandParent}
-//               // treeData={treeData}
-//               treeData={columns}
-//               defaultExpandAll={true}
-//               checkable={true}
-//               // onSelect={(keys, info) => {
-//               //   const key = info.node.key
-//               //
-//               //   const find = findItemByKey(columns, 'key', key)
-//               //
-//               //   // const tmpColumn
-//               //
-//               //   // if (selectedKeys.includes(key as string)) {
-//               //   //   const rssss  = findKeyPath(columns, key as string)
-//               //   //   const rs = selectedKeys.filter(item => !rssss.includes(item));
-//               //   //
-//               //   //   setSelectedKeys(rs)
-//               //   // } else {
-//               //
-//               //     // const rs  = [...selectedKeys, keys[0]]
-//               //
-//               //     // setSelectedKeys(keys)
-//               //   // }
-//               // }}
-//               onCheck={(keys) => onCheck(keys as string[])}
-//
-//
-//               multiple={true}
-//               // checkedKeys={selectedKeys}
-//
-//               defaultCheckedKeys={mergedSelectedKeys}
-//               // defaultCheckedKeys={defaultSelectedKeys}
-//               // selectedKeys={[]}
-//
-//               height={window.innerHeight - 200}
-//
-//             />
-//
-//
-//             <BoxAction className={'px-1'}>
-//               <Button
-//                 // className={classnames('btn-action btn-action-submit', {
-//                 //   // disable: !columns.find((item) => item.visible !== false || item.visible)
-//                 // })}
-//                 onClick={handleAccept}
-//                 // disabled={!columns.find((item) => item.visible !== false || item.visible)}
-//               >
-//                 {t ? t('OK') : 'OK'}
-//                 {/*{'OK'}*/}
-//               </Button>
-//
-//               {/*<Button className={'btn-action btn-action-cancel'} onClick={hide}  >{('Cancel') }</Button>*/}
-//               <Button className={'btn-action btn-action-cancel'} onClick={handleCancel}  >{t ? t('Cancel') : 'Cancel' }</Button>
-//             </BoxAction>
-//           </div>
-//         }
-//         trigger="click"
-//         open={clicked}
-//         onOpenChange={handleClickChange}
-//         arrow={false}
-//       >
-//         <Tooltip arrow={false} title={'Cài đặt'} >
-//           <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
-//         </Tooltip>
-//
-//       </Popover>
-//     </Fragment>
-//   )
-// }
-
 import React, { Fragment, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import { Button, Input, Popover, Tooltip } from "antd";
-import { SettingOutlined } from "@ant-design/icons";
+import { Settings } from "becoxy-icons";
 import { getVisibleColumnKeys, updateColumns } from "./hooks";
 
 // import type {TableColumnsType} from "rc-master-ui";
@@ -543,5 +224,7 @@ export const ColumnsChoose = props => {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/React.createElement(SettingOutlined, null))));
+  }, /*#__PURE__*/React.createElement(Settings, {
+    fontSize: 16
+  }))));
 };

package/es/grid-component/InternalTable.js

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { createContext, Fragment, useCallback, useContext, useState } from 'react';
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, isNullOrUndefined, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
+import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, isNullOrUndefined, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, sumByField, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
 // updateData,
 updateOrInsert } from "./hooks";
+import ReactDOMServer from 'react-dom/server';
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -243,30 +244,22 @@ const InternalTable = props => {
     active: -1,
     over: -1
   });
-  const [tooltipContent, setTooltipContent] = useState('');
+  // const [tooltipContent, setTooltipContent] = useState<any>('')
+
   const [filterStates, setFilterState] = React.useState(null);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const mergedData = React.useMemo(() => {
-    if (groupAble && groupSetting && groupSetting.client !== false) {
+    if (groupSetting && groupSetting.client !== false) {
       return groupArrayByColumns(dataSource, groupColumns);
     }
     return addRowIdArray(dataSource);
-  }, [dataSource, groupAble, groupColumns, groupSetting]);
+  }, [dataSource, groupColumns, groupSetting?.client]);
 
   // ========================= Keys =========================
   const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(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.useState([]);
   React.useEffect(() => {
     const totalHeight = propsHeight;
@@ -445,7 +438,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,
 
@@ -561,6 +554,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,
@@ -571,7 +568,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": ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.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) => {
@@ -593,6 +606,10 @@ const InternalTable = props => {
             }
             return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
+          if (groupAble && record.children && column.sumGroup === true && column.type === 'number') {
+            const sumValue = sumByField(filterDataByColumns4(record.children, [], []), column?.field);
+            return /*#__PURE__*/React.createElement(React.Fragment, null, sumValue);
+          }
           return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
         // defaultSortOrder: 'ascend',
@@ -914,10 +931,7 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
-
-  // const TableComponent = infiniteScroll ? InfiniteTable : (groupAble ? Group : editAble ? GridEdit : Grid)
-  const TableComponent = groupAble ? Group : Grid;
-  return /*#__PURE__*/React.createElement(Fragment, null, true && /*#__PURE__*/React.createElement(DndContext, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],
     onDragEnd: onDragEnd,
@@ -928,7 +942,7 @@ const InternalTable = props => {
     strategy: horizontalListSortingStrategy
   }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
     value: dragIndex
-  }, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Group, _extends({}, rest, {
     t: t,
     id: id,
     locale: locale,
@@ -956,34 +970,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,
@@ -991,10 +994,6 @@ const InternalTable = props => {
     onChange: handleChange,
     handleFullScreen: handleFullScreen,
     isFullScreen: isFullScreen
-
-    // onChange={(paging, filters, sorter) => {
-    //   handleChange(sorter)
-    // }}
   })))), /*#__PURE__*/React.createElement(DragOverlay, {
     style: {
       minWidth: 100,
@@ -1046,7 +1045,7 @@ const InternalTable = props => {
     strategy: horizontalListSortingStrategy
   }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
     value: dragIndex
-  }, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     t: t,
     id: faker.string.alpha(20),
     locale: locale,
@@ -1092,8 +1091,10 @@ const InternalTable = props => {
       body: {
         cell: TableBodyCell
       }
-    },
-    setTooltipContent: setTooltipContent,
+    }
+    // setTooltipContent={setTooltipContent}
+    ,
+
     onFilter: val => {
       handleOnFilter(val);
       // triggerFilter?.(convertFilters(val))
@@ -1130,12 +1131,6 @@ const InternalTable = props => {
     id: `${id}-tooltip-cell-content`,
     style: {
       zIndex: 1999
-    },
-    render: () => {
-      if (tooltipContent) {
-        return /*#__PURE__*/React.createElement("span", null, typeof tooltipContent === 'function' ? tooltipContent() : tooltipContent);
-      }
-      return undefined;
     }
   }));
 };

package/es/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.createElement(Minimize, {
-        fontSize: 16,
-        onClick: () => handleFullScreen?.(),
-        "data-tooltip-id": "tooltip-icon",
-        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
-      }) : /*#__PURE__*/React.createElement(Maximize, {
-        fontSize: 16,
-        onClick: () => handleFullScreen?.(),
-        "data-tooltip-id": "tooltip-icon",
-        "data-tooltip-content": t ? t('Full screen') : 'Full screen'
       })), /*#__PURE__*/React.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.createElement(ColumnsChoose, {
+      }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+        fontSize: 16,
+        onClick: () => handleFullScreen?.(),
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+      }) : /*#__PURE__*/React.createElement(Maximize, {
+        fontSize: 16,
+        onClick: () => handleFullScreen?.(),
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+      })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
         columns: columns,
         t: t,
         columnsGroup: groupColumns,

package/es/grid-component/TempTable.js

@@ -8,11 +8,7 @@ const TempTable = props => {
     editAble,
     ...rest
   } = props;
-
-  // const TabComponent = groupAble ? InternalTable  : Table
   const TabComponent = groupAble ? InternalTable : Table;
-  // const TabComponent = InternalTable
-
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TabComponent, _extends({}, rest, {
     groupAble: groupAble,
     editAble: editAble

package/es/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/es/grid-component/hooks/utils.js

@@ -2341,6 +2341,29 @@ export const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
   const key = `${rowIndex}-${colIndex}`;
   return selectedCells.has(key);
 };
+export 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);
+}
 export function groupArrayByColumns(data, columns) {
   const result = [];
   const checkEmpty = d => {
@@ -2631,7 +2654,8 @@ export const removeInvisibleColumns = columns => {
 };
 export 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);