es-grid-template 1.8.61 → 1.8.63

package/es/grid-component/InternalTable.js

@@ -2,7 +2,7 @@ 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, sumByField, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
+import { addRowIdArray, booleanOperator, checkDecimalSeparator, checkThousandSeparator, 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';
@@ -33,7 +33,7 @@ import classNames from "classnames";
 import HeaderContent from "./hooks/content/HeaderContent";
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from "becoxy-icons";
 import { Select } from "rc-master-ui";
-import { Button, Space } from "antd";
+import { Button, Modal, Space } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
@@ -42,7 +42,9 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
 import useMergedState from "rc-util/es/hooks/useMergedState";
-import Modal from 'antd/es/modal/Modal';
+import { numericFormatter } from 'react-numeric-component';
+// import Modal from 'antd/es/modal/Modal'
+
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -61,9 +63,7 @@ const dragActiveStyle = (dragState, id) => {
       backgroundColor: '#c0c0c0',
       opacity: 0.3
     };
-  }
-  // dragover dashed style
-  else if (over && id === over && active !== over) {
+  } else if (over && id === over && active !== over) {
     style = direction === 'right' ? {
       borderRight: '1px dashed gray'
     } : {
@@ -83,11 +83,9 @@ const ResizableTitle = props => {
     ...restProps
   } = props;
   const dragState = useContext(DragIndexContext);
-
-  // const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: props.id });
-
   const style = {
     ...props.style,
+    borderBottom: '1px solid #e0e0e0',
     // cursor: 'move',
     // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
     ...dragActiveStyle(dragState, props.id)
@@ -158,12 +156,11 @@ const InternalTable = props => {
     lang,
     locale,
     dataSource,
-    allowResizing,
     dataSourceFilter: propDataSourceFilter,
     // onFilterClick,
     // onFilter,
     editAble,
-    rowKey: propRowKey,
+    // rowKey: propRowKey,
     format,
     onDataChange,
     sortMultiple,
@@ -171,7 +168,7 @@ const InternalTable = props => {
     // @ts-ignore
     onCellPaste,
     clickHeaderToSort = true,
-    components,
+    // components,
     onChooseColumns,
     groupAble,
     groupSetting,
@@ -181,16 +178,17 @@ const InternalTable = props => {
     pagination,
     height: propsHeight,
     summary,
-    infiniteScroll,
+    // infiniteScroll,
     wrapSettings,
     onFilter,
     onSorter,
-    defaultSorter,
+    // defaultSorter,
     toolbarItems,
     allowSortering,
     allowFiltering,
     ...rest
   } = props;
+  const theadRef = React.useRef(null);
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -265,15 +263,14 @@ const InternalTable = props => {
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
-      const header = table?.querySelector(`.ui-rc-table-header`);
+      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
       const paginationE = table?.querySelector(`.ui-rc-pagination`);
       const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
       const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
-      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (theadRef ? theadRef.current.clientHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? 40 : 0) - (tableScrollRight ? 10 : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble]);
+  }, [id, propsHeight, summary, theadRef, columns]);
   React.useEffect(() => {
     // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
     const totalHeight = windowSize.innerHeight - 60;
@@ -426,26 +423,28 @@ const InternalTable = props => {
         dataIndex: column.field ?? column.dataIndex,
         key: column.field ?? column.key,
         // title: () => (<HeaderContent column={{...column} as any} t={t}/>),
-        title: /*#__PURE__*/React.createElement(SortableHeaderCell, {
-          columnKey: column.field
-        }, /*#__PURE__*/React.createElement(HeaderContent, {
+        title:
+        /*#__PURE__*/
+        // <SortableHeaderCell columnKey={column.field}>
+        React.createElement(HeaderContent, {
           column: {
             ...column
           },
           t: t,
           id: id,
           wrapSettings: wrapSettings
-        })),
+        })
+        // </SortableHeaderCell>
+        ,
         // ellipsis: editAble || 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,
-
+        // ellipsis: column.ellipsis !== false || (wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both'),
+        ellipsis: false,
         align: column.textAlign ?? column.align,
         fixed: column.fixedType ?? column.fixed,
         isSummary: column.isSummary ?? column.haveSum,
         hidden: column.hidden ?? column.visible === false
       };
+      const headerTooltip = t ? t?.(column.headerTooltip ?? column.columnGroupText ?? column.headerText) : column.headerTooltip ?? column.columnGroupText ?? column.headerText;
       if (transformedColumn.field === '#') {
         return {
           ...transformedColumn,
@@ -547,10 +546,18 @@ const InternalTable = props => {
         },
         onHeaderCell: () => ({
           id: `${column.field}`,
-          width: column.width,
+          // width: column.width,
+
+          'data-tooltip-id': `${id}-tooltip-header`,
+          'data-tooltip-content': headerTooltip,
           onResize: handleResize?.(column),
-          className: `${column.headerTextAlign === 'center' ? 'head-align-center' : column.headerTextAlign === 'right' ? 'head-align-right' : ''}
-           ${wrapSettings && wrapSettings.wrapMode === 'Content' ? 'ui-rc-table-cell-ellipsis' : ''}`
+          className: classNames('', {
+            'head-align-center': column.headerTextAlign === 'center',
+            'head-align-right': column.headerTextAlign === 'right',
+            'ui-rc-table-cell-ellipsis': !wrapSettings || !!(wrapSettings && wrapSettings.wrapMode === 'Content'),
+            // mặc định = true
+            'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
+          })
         }),
         onCell: (data, index) => {
           const tooltipContent = isOpenTooltip === false ? '' : column?.tooltipDescription ? typeof column.tooltipDescription === 'function' ? column.tooltipDescription({
@@ -559,14 +566,16 @@ const InternalTable = props => {
           }) : 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,
+            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? groupSetting?.groupColumnSpan ?? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
             // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
             ...transformedColumn?.onCell?.(data, index),
             className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
               'cell-group': groupColumns && data.children,
-              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field
+              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field,
+              'ui-rc-table-cell-ellipsis': !wrapSettings || wrapSettings && (wrapSettings.wrapMode === 'Header' || wrapSettings.wrapMode !== 'Both'),
+              // mặc định = true
+              'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Content' || wrapSettings.wrapMode === 'Both')
             }),
-            // 'data-tooltip-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 => {
@@ -606,8 +615,20 @@ 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 thousandSeparator = cellFormat?.thousandSeparator;
+            const decimalSeparator = cellFormat?.decimalSeparator;
+            const dec = cellFormat?.decimalScale;
+            const numericFormatProps = {
+              thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+              decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+              allowNegative: cellFormat?.allowNegative ?? true,
+              prefix: cellFormat?.prefix,
+              suffix: cellFormat?.suffix,
+              decimalScale: dec,
+              fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+            };
             const sumValue = sumByField(filterDataByColumns4(record.children, [], []), column?.field);
-            return /*#__PURE__*/React.createElement(React.Fragment, null, sumValue);
+            return /*#__PURE__*/React.createElement(React.Fragment, null, numericFormatter(sumValue.toString(), numericFormatProps));
           }
           return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
@@ -637,13 +658,14 @@ const InternalTable = props => {
           id: id,
           wrapSettings: wrapSettings
         })),
-        // ellipsis: column.ellipsis !== false,
-        ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        ellipsis: false,
+        // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+
         align: column.textAlign ?? column.align,
         fixed: column.fixedType ?? column.fixed,
         isSummary: column.isSummary ?? column.haveSum,
-        hidden: column.hidden ?? column.visible === false,
-        defaultSortOrder: 'ascend'
+        hidden: column.hidden ?? column.visible === false
+        // defaultSortOrder: 'ascend'
       };
 
       // Xử lý đệ quy cho children
@@ -930,6 +952,16 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
+  const CustomThead = headerProps => {
+    const {
+      children,
+      className
+    } = headerProps;
+    return /*#__PURE__*/React.createElement("thead", {
+      ref: theadRef,
+      className: className
+    }, children);
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],
@@ -953,7 +985,10 @@ const InternalTable = props => {
     ,
     dataSource: filterDataByColumns4(mergedData, filterStates, mergedFilterKeys),
     format: format,
-    columns: mergedColumns,
+    columns: mergedColumns
+
+    // showSorterTooltip={false}
+    ,
     showSorterTooltip: {
       target: 'sorter-icon'
     },
@@ -981,9 +1016,9 @@ const InternalTable = props => {
     toolbarItems: toolbarItems,
     components: {
       header: {
-        cell: ResizableTitle
+        cell: ResizableTitle,
+        wrapper: CustomThead
       }
-      // body: { cell: TableBodyCell }
     },
     onFilter: val => {
       handleOnFilter(val);

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

@@ -314,6 +314,7 @@ export interface CommandItem {
 export type IGroupSetting = {
     client?: boolean;
     onGroup?: (props: IOnGroup) => void;
+    groupColumnSpan?: number;
     hiddenColumnGroup?: boolean;
     showGroupIcon?: boolean;
     unClearableLevel?: 1 | 2 | 3 | undefined;

package/lib/grid-component/InternalTable.js

@@ -36,7 +36,7 @@ var _sortable = require("@dnd-kit/sortable");
 var _reactResizable = require("react-resizable");
 var _faker = require("@faker-js/faker");
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-var _Modal = _interopRequireDefault(require("antd/es/modal/Modal"));
+var _reactNumericComponent = require("react-numeric-component");
 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; }
 // import GridEdit from "./table/GridEdit"
@@ -51,6 +51,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // import {CSS} from "@dnd-kit/utilities";
 
+// import Modal from 'antd/es/modal/Modal'
+
 _dayjs.default.extend(_customParseFormat.default);
 const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
 const ASCEND = 'ascend';
@@ -69,9 +71,7 @@ const dragActiveStyle = (dragState, id) => {
       backgroundColor: '#c0c0c0',
       opacity: 0.3
     };
-  }
-  // dragover dashed style
-  else if (over && id === over && active !== over) {
+  } else if (over && id === over && active !== over) {
     style = direction === 'right' ? {
       borderRight: '1px dashed gray'
     } : {
@@ -91,11 +91,9 @@ const ResizableTitle = props => {
     ...restProps
   } = props;
   const dragState = (0, _react.useContext)(DragIndexContext);
-
-  // const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: props.id });
-
   const style = {
     ...props.style,
+    borderBottom: '1px solid #e0e0e0',
     // cursor: 'move',
     // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
     ...dragActiveStyle(dragState, props.id)
@@ -166,12 +164,11 @@ const InternalTable = props => {
     lang,
     locale,
     dataSource,
-    allowResizing,
     dataSourceFilter: propDataSourceFilter,
     // onFilterClick,
     // onFilter,
     editAble,
-    rowKey: propRowKey,
+    // rowKey: propRowKey,
     format,
     onDataChange,
     sortMultiple,
@@ -179,7 +176,7 @@ const InternalTable = props => {
     // @ts-ignore
     onCellPaste,
     clickHeaderToSort = true,
-    components,
+    // components,
     onChooseColumns,
     groupAble,
     groupSetting,
@@ -189,16 +186,17 @@ const InternalTable = props => {
     pagination,
     height: propsHeight,
     summary,
-    infiniteScroll,
+    // infiniteScroll,
     wrapSettings,
     onFilter,
     onSorter,
-    defaultSorter,
+    // defaultSorter,
     toolbarItems,
     allowSortering,
     allowFiltering,
     ...rest
   } = props;
+  const theadRef = _react.default.useRef(null);
   const id = _react.default.useMemo(() => {
     return tableId ?? _faker.faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -273,15 +271,14 @@ const InternalTable = props => {
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
-      const header = table?.querySelector(`.ui-rc-table-header`);
+      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
       const paginationE = table?.querySelector(`.ui-rc-pagination`);
       const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
       const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
-      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (theadRef ? theadRef.current.clientHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? 40 : 0) - (tableScrollRight ? 10 : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
-  }, [id, propsHeight, columns, editAble]);
+  }, [id, propsHeight, summary, theadRef, columns]);
   _react.default.useEffect(() => {
     // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
     const totalHeight = windowSize.innerHeight - 60;
@@ -434,26 +431,28 @@ const InternalTable = props => {
         dataIndex: column.field ?? column.dataIndex,
         key: column.field ?? column.key,
         // title: () => (<HeaderContent column={{...column} as any} t={t}/>),
-        title: /*#__PURE__*/_react.default.createElement(SortableHeaderCell, {
-          columnKey: column.field
-        }, /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
+        title:
+        /*#__PURE__*/
+        // <SortableHeaderCell columnKey={column.field}>
+        _react.default.createElement(_HeaderContent.default, {
           column: {
             ...column
           },
           t: t,
           id: id,
           wrapSettings: wrapSettings
-        })),
+        })
+        // </SortableHeaderCell>
+        ,
         // ellipsis: editAble || 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,
-
+        // ellipsis: column.ellipsis !== false || (wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both'),
+        ellipsis: false,
         align: column.textAlign ?? column.align,
         fixed: column.fixedType ?? column.fixed,
         isSummary: column.isSummary ?? column.haveSum,
         hidden: column.hidden ?? column.visible === false
       };
+      const headerTooltip = t ? t?.(column.headerTooltip ?? column.columnGroupText ?? column.headerText) : column.headerTooltip ?? column.columnGroupText ?? column.headerText;
       if (transformedColumn.field === '#') {
         return {
           ...transformedColumn,
@@ -555,10 +554,18 @@ const InternalTable = props => {
         },
         onHeaderCell: () => ({
           id: `${column.field}`,
-          width: column.width,
+          // width: column.width,
+
+          'data-tooltip-id': `${id}-tooltip-header`,
+          'data-tooltip-content': headerTooltip,
           onResize: handleResize?.(column),
-          className: `${column.headerTextAlign === 'center' ? 'head-align-center' : column.headerTextAlign === 'right' ? 'head-align-right' : ''}
-           ${wrapSettings && wrapSettings.wrapMode === 'Content' ? 'ui-rc-table-cell-ellipsis' : ''}`
+          className: (0, _classnames.default)('', {
+            'head-align-center': column.headerTextAlign === 'center',
+            'head-align-right': column.headerTextAlign === 'right',
+            'ui-rc-table-cell-ellipsis': !wrapSettings || !!(wrapSettings && wrapSettings.wrapMode === 'Content'),
+            // mặc định = true
+            'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
+          })
         }),
         onCell: (data, index) => {
           const tooltipContent = isOpenTooltip === false ? '' : column?.tooltipDescription ? typeof column.tooltipDescription === 'function' ? column.tooltipDescription({
@@ -567,14 +574,16 @@ const InternalTable = props => {
           }) : 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,
+            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? groupSetting?.groupColumnSpan ?? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
             // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
             ...transformedColumn?.onCell?.(data, index),
             className: (0, _classnames.default)(transformedColumn?.onCell?.(data, index).className ?? '', {
               'cell-group': groupColumns && data.children,
-              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field
+              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field,
+              'ui-rc-table-cell-ellipsis': !wrapSettings || wrapSettings && (wrapSettings.wrapMode === 'Header' || wrapSettings.wrapMode !== 'Both'),
+              // mặc định = true
+              'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Content' || wrapSettings.wrapMode === 'Both')
             }),
-            // 'data-tooltip-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 => {
@@ -614,8 +623,20 @@ 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 thousandSeparator = cellFormat?.thousandSeparator;
+            const decimalSeparator = cellFormat?.decimalSeparator;
+            const dec = cellFormat?.decimalScale;
+            const numericFormatProps = {
+              thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+              decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+              allowNegative: cellFormat?.allowNegative ?? true,
+              prefix: cellFormat?.prefix,
+              suffix: cellFormat?.suffix,
+              decimalScale: dec,
+              fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+            };
             const sumValue = (0, _hooks.sumByField)((0, _hooks.filterDataByColumns4)(record.children, [], []), column?.field);
-            return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sumValue);
+            return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _reactNumericComponent.numericFormatter)(sumValue.toString(), numericFormatProps));
           }
           return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
@@ -645,13 +666,14 @@ const InternalTable = props => {
           id: id,
           wrapSettings: wrapSettings
         })),
-        // ellipsis: column.ellipsis !== false,
-        ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        ellipsis: false,
+        // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+
         align: column.textAlign ?? column.align,
         fixed: column.fixedType ?? column.fixed,
         isSummary: column.isSummary ?? column.haveSum,
-        hidden: column.hidden ?? column.visible === false,
-        defaultSortOrder: 'ascend'
+        hidden: column.hidden ?? column.visible === false
+        // defaultSortOrder: 'ascend'
       };
 
       // Xử lý đệ quy cho children
@@ -938,6 +960,16 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
+  const CustomThead = headerProps => {
+    const {
+      children,
+      className
+    } = headerProps;
+    return /*#__PURE__*/_react.default.createElement("thead", {
+      ref: theadRef,
+      className: className
+    }, children);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     sensors: sensors,
     modifiers: [_modifiers.restrictToHorizontalAxis],
@@ -961,7 +993,10 @@ const InternalTable = props => {
     ,
     dataSource: (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys),
     format: format,
-    columns: mergedColumns,
+    columns: mergedColumns
+
+    // showSorterTooltip={false}
+    ,
     showSorterTooltip: {
       target: 'sorter-icon'
     },
@@ -989,9 +1024,9 @@ const InternalTable = props => {
     toolbarItems: toolbarItems,
     components: {
       header: {
-        cell: ResizableTitle
+        cell: ResizableTitle,
+        wrapper: CustomThead
       }
-      // body: { cell: TableBodyCell }
     },
     onFilter: val => {
       handleOnFilter(val);
@@ -1014,7 +1049,7 @@ const InternalTable = props => {
       borderRadius: 6,
       fontWeight: 500
     }
-  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_Modal.default, {
+  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
     centered: true,

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

@@ -314,6 +314,7 @@ export interface CommandItem {
 export type IGroupSetting = {
     client?: boolean;
     onGroup?: (props: IOnGroup) => void;
+    groupColumnSpan?: number;
     hiddenColumnGroup?: boolean;
     showGroupIcon?: boolean;
     unClearableLevel?: 1 | 2 | 3 | undefined;

package/package.json

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