es-grid-template 1.3.6 → 1.3.8

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

@@ -96,7 +96,7 @@ const Group = props => {
     })));
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
-    heightTable: height,
+    $heightTable: height,
     style: {
       position: 'relative'
     }

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

@@ -84,7 +84,7 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
-export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title'> & {
+export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title' | 'format' | 'commandItems'> & {
     field?: string;
     key?: any;
     type?: IColumnType;
@@ -93,7 +93,7 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     isSummary?: boolean;
     summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
     maxWidth?: string | number;
-    format?: IFormat;
+    format?: IFormat | ((rowData: any) => IFormat);
     allowFiltering?: boolean;
     allowSorter?: boolean;
     operator?: FilterOperator;
@@ -207,12 +207,12 @@ export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType>;
 export interface CommandItem {
     id: string;
     type?: string;
-    visible?: boolean;
+    visible?: boolean | ((record: any) => boolean);
     title: string;
     color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
     tooltip?: string;
     icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
-    template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    template?: ReactNode | ReactElement | ((record: any) => ReactNode | ReactElement);
     client?: boolean;
     confirmDialog?: boolean;
 }

package/lib/grid-component/EditableCell.js

@@ -64,8 +64,9 @@ const EditableCell = props => {
   const dateTimePickerRef = _react.default.useRef(null);
   // const timePickerRef = React.useRef(null);
 
+  const cellFormat = column?.format ? typeof column?.format === 'function' ? column?.format?.(record) : column?.format : format;
   const inputNode = (value, onChange) => {
-    const dateFormat = (0, _hooks.getDatepickerFormat)(editType, column);
+    const dateFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
     const date = !(0, _hooks.isEmpty)(value) ? (0, _hooks.convertDateToDayjs)(new Date(value), dateFormat) : null;
     const maxDate = (0, _hooks.convertDateToDayjs)(column.maxDate, dateFormat) ?? undefined;
     const minDate = (0, _hooks.convertDateToDayjs)(column.minDate, dateFormat) ?? undefined;
@@ -207,7 +208,7 @@ const EditableCell = props => {
       case 'month':
       case 'quarter':
       case 'year':
-        const pickerFormat = (0, _hooks.getDatepickerFormat)(editType, column);
+        const pickerFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
         const maxDateValue1 = !(0, _hooks.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, pickerFormat) : undefined;
         const minDateValue1 = !(0, _hooks.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, pickerFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
@@ -228,7 +229,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container'
         });
       case 'week':
-        const weekFormat = (0, _hooks.getDatepickerFormat)(editType, column);
+        const weekFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
         const maxWeekValue = !(0, _hooks.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, weekFormat) : undefined;
         const minWeekValue = !(0, _hooks.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, weekFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
@@ -245,7 +246,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container'
         });
       case 'time':
-        const timeFormat = (0, _hooks.getDatepickerFormat)(editType, column);
+        const timeFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
         const maxTimeValue = !(0, _hooks.isEmpty)(column.maxTime) ? (0, _dayjs.default)(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !(0, _hooks.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
 
@@ -760,8 +761,8 @@ const EditableCell = props => {
       //   )
 
       case 'numeric':
-        const thousandSeparator = column.format?.thousandSeparator ? column.format?.thousandSeparator : format?.thousandSeparator;
-        const decimalSeparator = column.format?.decimalSeparator ? column.format?.decimalSeparator : format?.decimalSeparator;
+        const thousandSeparator = cellFormat?.thousandSeparator;
+        const decimalSeparator = cellFormat?.decimalSeparator;
 
         // let floatValue = value
 
@@ -769,11 +770,11 @@ const EditableCell = props => {
           value,
           thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
           decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-          decimalScale: !(0, _hooks.isEmpty)(column.format?.decimalScale) ? column.format?.decimalScale : undefined,
-          fixedDecimalScale: !(0, _hooks.isEmpty)(column.format?.fixedDecimalScale) ? column.format?.fixedDecimalScale : false,
-          allowNegative: column.format?.allowNegative ?? true,
-          prefix: column.format?.prefix ?? undefined,
-          suffix: column.format?.suffix ?? undefined
+          decimalScale: cellFormat?.decimalScale ?? undefined,
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false,
+          allowNegative: cellFormat?.allowNegative ?? true,
+          prefix: cellFormat?.prefix ?? undefined,
+          suffix: cellFormat?.suffix ?? undefined
         };
         return /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, (0, _extends2.default)({
           id: `col${indexCol}-record${indexRow}`

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    heightTable?: number | string;
-}>> & string;
+interface GridProps {
+    $heightTable?: number | string;
+}
+export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
+export {};

package/lib/grid-component/GridStyle.js

@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined);
+})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? typeof props.$heightTable === 'string' ? props.$heightTable : `${props.$heightTable}px` : undefined);

package/lib/grid-component/TableGrid.js

@@ -24,6 +24,8 @@ var _AdvanceFilter = _interopRequireDefault(require("./AdvanceFilter"));
 var _reactTooltip = require("react-tooltip");
 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  Table from "../../core/table"
+
 // import {ConfigProvider} from "antd";
 
 const convertFilters = filters => {
@@ -366,8 +368,10 @@ const TableGrid = props => {
     loading: {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
-    },
-    dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns3)(dataSource, filterStates) : []
+    }
+    // dataSource={columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []}
+    ,
+    dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns4)(dataSource, filterStates) : []
     // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
     // className={styles.customTable}
     ,
@@ -392,21 +396,20 @@ const TableGrid = props => {
     },
     rowSelection: columns && columns.length === 0 ? undefined : {
       ...selectionSettings,
-      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
-      columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
+      // type: selectionSettings?.mode,
+      type: mode,
+      columnWidth: columnWidth ?? 50,
       onChange: onSelectChange,
       // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       selectedRowKeys: mergedSelectedKeys,
-      defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
+      // defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
+      defaultSelectedRowKeys: defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
-      // ...rowSelection,
-      // checkStrictly: false,
-
-      hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
+      hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }
 
-    // onScroll={() => {
-    //   setMenuVisible(false)
+    // onScroll={(event) => {
+    //   console.log('event', event)
     // }}
     ,
 
@@ -419,21 +422,24 @@ const TableGrid = props => {
       }
       return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
         fixed: true
-      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)([_rcMasterUi.Table.SELECTION_COLUMN, ...columns]).filter(col => col.hidden !== true).map((col, index) => {
-        const thousandSeparator = col.format?.thousandSeparator ? col.format?.thousandSeparator : format?.thousandSeparator;
-        const decimalSeparator = col.format?.decimalSeparator ? col.format?.decimalSeparator : format?.decimalSeparator;
-        const dec = col.format?.decimalScale || col.format?.decimalScale === 0 ? col.format?.decimalScale : format?.decimalScale;
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)(!!mode ? [_rcMasterUi.Table.SELECTION_COLUMN, ...columns] : [...columns]).filter(col => col.hidden !== true).map((col, index) => {
+        const cellFormat = col.format ? typeof col.format === 'function' ? col.format({}) : col.format : format;
+        const thousandSeparator = cellFormat?.thousandSeparator;
+        const decimalSeparator = cellFormat?.decimalSeparator;
+
+        // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+        const dec = cellFormat?.decimalScale;
         const sumValue = col.type === 'number' ? (0, _hooks.sumDataByField)(dataSource, col?.key) : 0;
         const value = !(0, _hooks.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
         const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
         const numericFormatProps = {
           thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
           decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-          allowNegative: (col.format?.allowNegative ? col.format?.allowNegative : format?.allowNegative) ?? false,
-          prefix: col.format?.prefix ? col.format?.prefix : format?.prefix,
-          suffix: col.format?.suffix ? col.format?.suffix : format?.suffix,
+          allowNegative: cellFormat?.allowNegative ?? false,
+          prefix: cellFormat?.prefix,
+          suffix: cellFormat?.suffix,
           decimalScale: dec,
-          fixedDecimalScale: (col.format?.fixedDecimalScale ? col.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
         };
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Cell, {
           key: col.key,
@@ -443,7 +449,7 @@ const TableGrid = props => {
         }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
       })));
     },
-    pagination: !pagination || pagination && pagination.onChange ? false : {
+    pagination: !pagination || pagination && pagination?.onChange ? false : {
       showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
       ...pagination
     },

package/lib/grid-component/hooks/columns/index.d.ts

@@ -6,4 +6,4 @@ export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType
 export declare function flatColumns2<RecordType>(columns: ColumnsTable<RecordType>): ColumnsTable<RecordType>;
 export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
 export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
-export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;
+export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any, format?: IFormat) => React.JSX.Element;

package/lib/grid-component/hooks/columns/index.js

@@ -81,33 +81,33 @@ function flatColumns2(columns
 const getValueCell = (column, value, format) => {
   switch (column?.type) {
     case 'number':
-      const thousandSeparator = column?.format?.thousandSeparator ? column?.format?.thousandSeparator : format?.thousandSeparator;
-      const decimalSeparator = column?.format?.decimalSeparator ? column?.format?.decimalSeparator : format?.decimalSeparator;
-      const dec = column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale;
+      const thousandSeparator = format?.thousandSeparator;
+      const decimalSeparator = format?.decimalSeparator;
+      const dec = format?.decimalScale;
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
-      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? tmpval.toFixed(dec) : tmpval.toString() : '0';
+      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-        allowNegative: (column?.format?.allowNegative ? column?.format?.allowNegative : format?.allowNegative) ?? true,
-        prefix: column?.format?.prefix ? column?.format?.prefix : format?.prefix,
-        suffix: column?.format?.suffix ? column?.format?.suffix : format?.suffix,
-        decimalScale: column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale,
-        fixedDecimalScale: (column?.format?.fixedDecimalScale ? column?.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+        allowNegative: format?.allowNegative ?? true,
+        prefix: format?.prefix,
+        suffix: format?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: format?.fixedDecimalScale ?? false
       };
       return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
     case 'date':
-      return value ? (0, _dayjs.default)(value).format(column?.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
+      return value ? (0, _dayjs.default)(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
     case 'time':
       return value ? value : '';
     case 'year':
       const year = value ? (0, _moment.default)(value).format('yyyy') : '';
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, year);
     case 'datetime':
-      return value ? (0, _moment.default)(value).format(column?.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+      return value ? (0, _moment.default)(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
     case 'boolean':
       return value ? 'true' : 'false';
     case 'color':
@@ -148,10 +148,11 @@ const renderContent = (column, value, record, index, format) => {
   }) : column.template : content);
 };
 exports.renderContent = renderContent;
-const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t) => {
+const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format) => {
+  const cellFormat = column.format ? typeof column.format === 'function' ? column.format({}) : column.format : format;
   const type = (0, _utils.getTypeFilter)(column);
-  const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, column) ?? 'DD/MM/YYYY';
+  const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, cellFormat) ?? 'DD/MM/YYYY';
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
   switch (type) {

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

@@ -165,8 +165,8 @@ const useColumns = config => {
   const transformColumns = (0, _react.useCallback)(columns => {
     // >>>>>>>>>>> Support selection
     const cloneColumns = [...columns];
-    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
-    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
 
     // ===================== Render =====================
 
@@ -202,19 +202,18 @@ const useColumns = config => {
             children: convertColumns(transformedColumn.children)
           };
         }
-        if (["index", "#"].includes(col.field)) {
+        if (transformedColumn.field === '#') {
           return {
             ...transformedColumn,
             onCell: () => ({
               className: 'cell-number'
             }),
             render: (val, record) => {
-              // return rowIndex + 1
               return (0, _utils.findItemPath)(dataSource, record, rowKey);
             }
           };
         }
-        if (col.field === 'command') {
+        if (transformedColumn.field === 'command') {
           return {
             ...transformedColumn,
             onCell: () => ({
@@ -289,20 +288,24 @@ const useColumns = config => {
             };
           },
           render: (value, record, rowIndex) => {
+            const cellFormat = col.format ? typeof col.format === 'function' ? col.format(record) : col.format : format;
             if (groupSetting && groupSetting.hiddenColumnGroup === false) {
               if (record.children) {
-                return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+                return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);
               }
               if (groupColumns?.includes(col.field)) {
                 return '';
               }
-              return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+              return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);
             }
             if (col.field === firstNonGroupColumn?.field && record.children) {
               const currentGroupColumn = (0, _columns.flatColumns2)(cols).find(it => it.field === record.field);
-              return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, format));
+              if (currentGroupColumn?.template) {
+                return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
+              }
+              return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
             }
-            return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+            return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);
           },
           hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : transformedColumn.hidden
         };

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

@@ -1,7 +1,7 @@
 import type * as React from "react";
 import dayjs from "dayjs";
 import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
-import type { ColumnTable, GetRowKey } from "../type";
+import type { ColumnTable, GetRowKey, IFormat } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
@@ -21,7 +21,7 @@ export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
 export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
-export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, col: ColumnTable<any>) => string;
+export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
 export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
@@ -83,6 +83,8 @@ export declare const filterDataByColumns: (data: any[], queries: any) => any[];
 export declare const filterDataByColumns2: (data: any[], queries: any) => any[];
 export declare const removeFieldRecursive: (data: any[], field: string) => any[];
 export declare const filterDataByColumns3: (data: any[], queries: any[]) => any[];
+export declare const shouldInclude: (item: any, queries: any[]) => any;
+export declare function filterDataByColumns4(data: any[], queries: any[]): any[];
 export declare function isDateString(str: any): boolean;
 export declare function compareDates(date1: any, date2: any): boolean;
 export declare function compareDate(itemValue: any, value: any): boolean;
@@ -102,5 +104,18 @@ export declare function isBottomMostInRanges(rowIndex: number, colIndex: number,
 export declare const mergedSets: (arr: any[]) => Set<unknown>;
 export declare const sortedSetASC: (setValue: any) => Set<unknown>;
 export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
-export declare const onAddClassSelectedCell: (selectedCells: any, id?: string) => void;
-export declare const onRemoveClassSelectedCell: (selectedCells: any, id?: string) => void;
+export declare function getBottomRowCells(cellSet: any): any[];
+export declare function getCellsByPosition(cellSet: any, position?: string): any[];
+export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
+export declare const removeBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
+export declare const removeBorderClass2: (className: string, id?: string) => void;
+export declare const onAddBgSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onAddBorderSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onRemoveBgSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
+export declare const onRemoveBorderSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const addClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
+export declare const removeClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
+export declare const addClassCellIndexSelected: (rowsSelected: any, id?: string) => void;
+export declare const removeClassCellIndexSelected: (rowsSelected: any, id?: string) => void;
+export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
+export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;