es-grid-template 1.8.62 → 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, Modal } 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,6 +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 { numericFormatter } from 'react-numeric-component';
+// import Modal from 'antd/es/modal/Modal'
+
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -80,9 +83,6 @@ 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',
@@ -263,10 +263,10 @@ const InternalTable = props => {
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
+      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 tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
       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);
     }
@@ -423,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,
@@ -544,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({
@@ -556,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 ? 3 : 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 => {
@@ -603,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);
         },
@@ -634,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
@@ -927,12 +952,14 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
-  const CustomThead = theadProps => {
+  const CustomThead = headerProps => {
     const {
-      children
-    } = theadProps;
+      children,
+      className
+    } = headerProps;
     return /*#__PURE__*/React.createElement("thead", {
-      ref: theadRef
+      ref: theadRef,
+      className: className
     }, children);
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
@@ -958,7 +985,10 @@ const InternalTable = props => {
     ,
     dataSource: filterDataByColumns4(mergedData, filterStates, mergedFilterKeys),
     format: format,
-    columns: mergedColumns,
+    columns: mergedColumns
+
+    // showSorterTooltip={false}
+    ,
     showSorterTooltip: {
       target: 'sorter-icon'
     },

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,6 +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 _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"
@@ -50,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';
@@ -88,9 +91,6 @@ 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',
@@ -271,10 +271,10 @@ const InternalTable = props => {
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
+      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 tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
       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);
     }
@@ -431,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,
@@ -552,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({
@@ -564,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 ? 3 : 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 => {
@@ -611,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);
         },
@@ -642,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
@@ -935,12 +960,14 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
-  const CustomThead = theadProps => {
+  const CustomThead = headerProps => {
     const {
-      children
-    } = theadProps;
+      children,
+      className
+    } = headerProps;
     return /*#__PURE__*/_react.default.createElement("thead", {
-      ref: theadRef
+      ref: theadRef,
+      className: className
     }, children);
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
@@ -966,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'
     },

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.62",
+  "version": "1.8.63",
   "description": "es-grid-template",
   "keywords": [
     "react",