es-grid-template 1.5.17 → 1.6.0

package/es/grid-component/CheckboxFilter2.js

@@ -79,7 +79,6 @@ const CheckboxFilter = props => {
 
   // const [searchValue, setSearchValue] = React.useState('');
 
-  console.log('options', options);
   const [openKeys, setOpenKeys] = React.useState([]);
 
   // clear search value after close filter dropdown
@@ -172,9 +171,6 @@ const CheckboxFilter = props => {
       onSelect?.(keys);
     }
   };
-  console.log('getTreeData({ filters: options })', getTreeData({
-    filters: options
-  }));
   if (filterMode === 'tree') {
     return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(FilterSearch, {
       filterSearch: filterSearch,

package/es/grid-component/ColumnsChoose.js

@@ -378,7 +378,7 @@ export const ColumnsChoose = props => {
   const defaultSelectedKeys = useMemo(() => {
     const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
     return getVisibleColumnKeys(defaultColumns);
-  }, [propsColumns]);
+  }, [columnsGroup, propsColumns]);
   const [clicked, setClicked] = useState(false);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
 
@@ -473,7 +473,8 @@ export const ColumnsChoose = props => {
     placement: 'bottomLeft',
     content: /*#__PURE__*/React.createElement("div", {
       style: {
-        minWidth: 250
+        minWidth: 250,
+        maxWidth: 320
       }
     }, /*#__PURE__*/React.createElement(Input, {
       style: {
@@ -518,8 +519,12 @@ export const ColumnsChoose = props => {
       defaultCheckedKeys: selectedKeys
       // defaultCheckedKeys={defaultSelectedKeys}
       ,
-      selectedKeys: [],
-      height: window.innerHeight - 200
+      selectedKeys: []
+
+      // height={window.innerHeight - 200}
+      ,
+      height: window.innerHeight / 2 > 450 ? 450 : window.innerHeight / 2 - 110
+      // style={{height: 300}}
     }), /*#__PURE__*/React.createElement(BoxAction, {
       className: 'px-1'
     }, /*#__PURE__*/React.createElement(Button

package/es/grid-component/ColumnsGroup/ColumnsGroup.js

@@ -10,6 +10,7 @@ import { Button, Popover, Tooltip } from "antd";
 // import {SettingOutlined} from "@ant-design/icons";
 import { Select } from "rc-master-ui";
 import styled from "styled-components";
+import { customFilterOption } from "../hooks";
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-1uj3tyy-0"
@@ -119,7 +120,8 @@ export const ColumnsGroup = props => {
     }, "M\u1EE9c 1"), /*#__PURE__*/React.createElement(Select, {
       style: {
         width: '100%'
-      }
+      },
+      showSearch: true
       // labelInValue={true}
       // options={columns.filter((it: any) => !tempGroup.includes(it.field))}
       // options={columns && columns.length > 0 ? options : []}
@@ -136,7 +138,8 @@ export const ColumnsGroup = props => {
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
         return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
-      }
+      },
+      filterOption: customFilterOption
       // hideSelectedOptions
     })), /*#__PURE__*/React.createElement("div", {
       className: 'mb-1',
@@ -149,6 +152,7 @@ export const ColumnsGroup = props => {
         margin: 0
       }
     }, "M\u1EE9c 2"), /*#__PURE__*/React.createElement(Select, {
+      showSearch: true,
       style: {
         width: '100%'
       },
@@ -165,7 +169,8 @@ export const ColumnsGroup = props => {
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
         return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
-      }
+      },
+      filterOption: customFilterOption
     })), /*#__PURE__*/React.createElement("div", {
       className: 'mb-1',
       style: {
@@ -181,6 +186,7 @@ export const ColumnsGroup = props => {
         width: '100%'
       },
       options: options,
+      showSearch: true,
       value: tempGroup?.[2],
       onChange: val => onChangeGroupColumns(val, 2),
       allowClear: !!tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 3 >= 0)
@@ -192,7 +198,8 @@ export const ColumnsGroup = props => {
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
         return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
-      }
+      },
+      filterOption: customFilterOption
     }))), /*#__PURE__*/React.createElement(BoxAction, {
       className: 'px-1'
     }, /*#__PURE__*/React.createElement(Button

package/es/grid-component/EditableCell.js

@@ -28,6 +28,9 @@ import { cyan, green, red, blue } from '@ant-design/colors';
 const {
   SHOW_PARENT
 } = TreeSelect;
+const {
+  TextArea
+} = Input;
 const filterTreeNode = (input, treeNode) => {
   const {
     title,
@@ -114,8 +117,13 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          },
-          value: date,
+          }
+          // value={date}
+          ,
+          defaultValue: date
+          // preserveInvalidOnBlur
+          ,
+
           onBlur: () => {
             const formState = getValues();
             const itemState = getValues(dataIndex);
@@ -178,8 +186,10 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          showTime: true,
-          value: date,
+          showTime: true
+          // value={date}
+          ,
+          defaultValue: date,
           placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDate,
@@ -708,7 +718,7 @@ const EditableCell = props => {
           style: {
             display: 'flex',
             alignItems: 'center',
-            justifyContent: column.align ?? 'left',
+            justifyContent: column.align ?? 'center',
             paddingInline: 5,
             height: '100%',
             width: '100%'
@@ -718,7 +728,7 @@ const EditableCell = props => {
           // style={{ textAlign: column.align ?? 'left' }}
           ,
           onChange: val => {
-            const newVal = parseBooleanToValue(val.target.checked, typeof value);
+            const newVal = typeof value === "number" ? parseBooleanToValue(val.target.checked, typeof value) : val.target.checked;
             onChange(newVal);
             const key = getRowKey?.(record, index);
             const formState = getValues();
@@ -929,11 +939,14 @@ const EditableCell = props => {
           "data-tooltip-id": `${id}-tooltip-form-error`
         }));
       default:
-        return /*#__PURE__*/React.createElement(Input, {
+        return /*#__PURE__*/React.createElement(TextArea, {
           id: `col${indexCol}-record${indexRow}`,
           style: {
-            textAlign: column.align
+            textAlign: column.align,
+            resize: 'none',
+            height: '100%'
           }
+
           // @ts-ignore
           // value={!isNullOrUndefined(record[column.dataIndex]) ? record[column.dataIndex] : ''}
           ,
@@ -989,7 +1002,11 @@ const EditableCell = props => {
           onChange: onChange,
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`
+          "data-tooltip-id": `${id}-tooltip-form-error`,
+          autoSize: {
+            minRows: 1,
+            maxRows: 1
+          }
         });
     }
   };

package/es/grid-component/InternalTable.js

@@ -3,7 +3,7 @@ import React, { createContext, Fragment, useCallback, useContext, useState } fro
 // import {Resizable} from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray, booleanOperator, findItemByKey, findItemPath, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
+import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -37,6 +37,7 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
 import InfiniteTable from "./table/InfiniteTable";
+import useMergedState from "rc-util/es/hooks/useMergedState";
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -180,15 +181,19 @@ const InternalTable = props => {
     summary,
     infiniteScroll,
     wrapSettings,
+    onFilter,
     ...rest
   } = props;
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
   }, [tableId]);
-  const rowKey = React.useMemo(() => {
-    return propRowKey ?? 'rowId';
-  }, [propRowKey]);
+
+  // const rowKey = React.useMemo(() => {
+  //   return  propRowKey ?? 'rowId'
+  // }, [propRowKey])
+
+  const rowKey = 'rowId';
   const [scrollHeight, setHeight] = useState(0);
   const local = lang && lang === 'en' ? en : vi;
   const dateRangeLocale = lang && lang === 'en' ? enDr : viDr;
@@ -208,14 +213,30 @@ const InternalTable = props => {
     over: -1
   });
   const [tooltipContent, setTooltipContent] = useState('');
-  const mergedData = React.useMemo(() => {
-    // return addRowIdArray(dataSource)
+  const [filterStates, setFilterState] = React.useState(null);
+  // const [filterData, setFilterData] = React.useState<any>(null)
 
+  const mergedData = React.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
       return groupArrayByColumns(dataSource, groupColumns);
     }
     return addRowIdArray(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+
+  // ========================= 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(() => {
     if (propsHeight) {
@@ -234,6 +255,20 @@ const InternalTable = props => {
   React.useEffect(() => {
     setColumns(propsColumns);
   }, [propsColumns]);
+  const handleOnFilter = queries => {
+    if (onFilter) {
+      onFilter?.(convertFilters(queries));
+    } else {
+      setFilterState(convertFilters(queries));
+      const b = filterDataByColumns4(mergedData, convertFilters(queries), []);
+      setMergedFilterKeys(getAllRowKey(b));
+      if (queries && queries.length > 0) {
+        // setIsFilter?.(true)
+      } else {
+        // setIsFilter?.(false)
+      }
+    }
+  };
   const handleResize = column => (e, {
     size
   }) => {
@@ -405,10 +440,11 @@ const InternalTable = props => {
             })
           }),
           render: (val, record) => {
+            const tmpData = filterDataByColumns4(mergedData, filterStates, mergedFilterKeys);
             if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
-              return findItemPath(mergedData, record, rowKey, pagination.currentPage, pagination.pageSize);
+              return findItemPath(tmpData, record, rowKey, pagination.currentPage, pagination.pageSize);
             }
-            return findItemPath(mergedData, record, rowKey);
+            return findItemPath(tmpData, record, rowKey);
           }
         };
       }
@@ -504,28 +540,28 @@ const InternalTable = props => {
         render: (value, record, rowIndex) => {
           const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
           const cellFormat = getFormat(colFormat, format);
-          if (groupSetting && groupSetting.hiddenColumnGroup === false) {
+          if (groupAble && groupSetting && groupSetting.hiddenColumnGroup === false) {
             if (record.children) {
-              return renderContent(column, value, record, rowIndex, cellFormat);
+              return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
             }
             if (groupColumns?.includes(column.field)) {
               return '';
             }
-            return renderContent(column, value, record, rowIndex, cellFormat);
+            return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
           }
-          if (column.field === firstNonGroupColumn?.field && record.children) {
+          if (groupAble && column.field === firstNonGroupColumn?.field && record.children) {
             const currentGroupColumn = flatColumns2(columns).find(it => it.field === record.field);
             if (currentGroupColumn?.template) {
-              return renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
+              return renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
             }
-            return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
+            return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
-          return renderContent(column, value, record, rowIndex, cellFormat);
+          return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
         hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(column.field) ? true : transformedColumn.hidden
       };
     });
-  }, [columns, t, getColumnSearchProps, sortMultiple, groupSetting, groupAble, groupColumns, pagination, mergedData, rowKey, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
+  }, [columns, t, id, wrapSettings, getColumnSearchProps, sortMultiple, groupSetting, groupAble, groupColumns, mergedData, filterStates, mergedFilterKeys, pagination, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
   const transformColumns = React.useCallback(cols => {
     return cols.map(column => {
       const find = convertColumns.find(it => it.field === column.field);
@@ -573,7 +609,7 @@ const InternalTable = props => {
         };
       }
     });
-  }, [convertColumns, t]);
+  }, [convertColumns, id, t, wrapSettings]);
   const mergedColumns = React.useMemo(() => {
     return transformColumns(columns);
   }, [columns, transformColumns]);
@@ -591,9 +627,9 @@ const InternalTable = props => {
       });
     }
     onChooseColumns?.({
-      showColumns: [],
-      columns: [],
-      flattenColumns: []
+      showColumns: removeInvisibleColumns([...newColumns]),
+      columns: [...newColumns],
+      flattenColumns: convertFlatColumn([...newColumns])
     });
   };
   const onDragEnd = ({
@@ -672,7 +708,9 @@ const InternalTable = props => {
       rowData,
       index
     } = args;
-    const tmpData = [...mergedData];
+
+    // const tmpData = [...mergedData]
+    const tmpData = filterDataByColumns4(mergedData, filterStates, mergedFilterKeys);
     if (idCommand === 'DELETE') {
       // bật modal confirm
       if (commandSettings && commandSettings.confirmDialog) {
@@ -698,7 +736,7 @@ const InternalTable = props => {
 
               let newData = [];
               if (rowData?.parentId) {
-                const parent = findItemByKey(mergedData, rowKey, rowData.parentId);
+                const parent = findItemByKey(tmpData, rowKey, rowData.parentId);
                 const childData = parent?.children ? [...parent.children] : [];
                 const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
                 childData.splice(Number(findIndex), 1);
@@ -835,8 +873,13 @@ const InternalTable = props => {
     t: t,
     id: id,
     locale: locale,
-    tableRef: tableRef,
-    dataSource: mergedData,
+    tableRef: tableRef
+    // dataSource={mergedData}
+    ,
+    originData: mergedData
+    // dataSource={filterStates && filterStates.length ? filterData : mergedData}
+    ,
+    dataSource: filterDataByColumns4(mergedData, filterStates, mergedFilterKeys),
     format: format,
     columns: mergedColumns,
     showSorterTooltip: {
@@ -876,14 +919,23 @@ const InternalTable = props => {
         cell: TableBodyCell
       }
     },
-    setTooltipContent: setTooltipContent
+    setTooltipContent: setTooltipContent,
+    onFilter: val => {
+      handleOnFilter(val);
+      // triggerFilter?.(convertFilters(val))
+      // onFilter?.(convertFilters(val))
+    },
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    wrapSettings: wrapSettings
   })))), /*#__PURE__*/React.createElement(DragOverlay, {
     style: {
-      width: 100
+      minWidth: 100,
+      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
     }
   }, /*#__PURE__*/React.createElement("th", {
     style: {
-      backgroundColor: '#c4c4c4',
+      backgroundColor: '#f0f0f0',
       padding: 6,
       borderRadius: 6,
       fontWeight: 500

package/es/grid-component/TableGrid.js

@@ -14,10 +14,10 @@ import { checkDecimalSeparator, checkThousandSeparator,
 // filterDataByColumns3,
 filterDataByColumns4, getFormat,
 // convertFlatColumn,
-isEmpty,
+isEmpty, sumByField
 // newGuid,
 // removeColumns,
-sumDataByField
+// sumDataByField
 // updateArrayByKey
 } from "./hooks";
 // import {ConfigProvider} from "antd";
@@ -28,87 +28,6 @@ import { ColumnsChoose } from "./ColumnsChoose";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import AdvanceFilter from "./AdvanceFilter";
 import { Tooltip } from "react-tooltip";
-const convertFilters = filters => {
-  const result = [];
-  filters.forEach(({
-    key,
-    column,
-    filteredKeys,
-    operator
-  }) => {
-    if (!filteredKeys || filteredKeys.length === 0) {
-      return;
-    }
-    if (column?.typeFilter === "DateRange" && filteredKeys.length === 2) {
-      result.push({
-        key,
-        field: column?.dataIndex,
-        value: filteredKeys[0],
-        predicate: "and",
-        operator: "greaterthanorequal"
-      }, {
-        key,
-        field: column?.dataIndex,
-        value: filteredKeys[1],
-        predicate: "and",
-        operator: "lessthanorequal"
-      });
-    } else if (column?.typeFilter === "NumberRange") {
-      if ((filteredKeys[0] || filteredKeys[0] === 0) && !filteredKeys[1]) {
-        result.push({
-          key,
-          field: column?.dataIndex,
-          value: filteredKeys[0],
-          predicate: "and",
-          operator: "greaterthanorequal"
-        });
-      }
-      if ((filteredKeys[1] || filteredKeys[1] === 0) && !filteredKeys[0]) {
-        result.push({
-          key,
-          field: column?.dataIndex,
-          value: filteredKeys[1],
-          predicate: "and",
-          operator: "lessthanorequal"
-        });
-      }
-      if ((filteredKeys[0] || filteredKeys[0] === 0) && (filteredKeys[1] || filteredKeys[1] === 0)) {
-        result.push({
-          key,
-          field: column?.dataIndex,
-          value: filteredKeys[0],
-          predicate: "and",
-          operator: "greaterthanorequal"
-        }, {
-          key,
-          field: column?.dataIndex,
-          value: filteredKeys[1],
-          predicate: "and",
-          operator: "lessthanorequal"
-        });
-      }
-    } else if (column?.typeFilter === 'Checkbox') {
-      filteredKeys.forEach(value => {
-        result.push({
-          key,
-          field: column?.dataIndex,
-          value,
-          predicate: "or",
-          operator
-        });
-      });
-    } else {
-      result.push({
-        key,
-        field: column?.dataIndex,
-        value: filteredKeys[0],
-        predicate: 'and',
-        operator
-      });
-    }
-  });
-  return result;
-};
 const useStyle = createStyles(({
   css
 }) => {
@@ -154,7 +73,7 @@ const TableGrid = props => {
     toolbarItems,
     showColumnChoose,
     showAdvanceFilter,
-    onFilter,
+    // onFilter,
     triggerFilter,
     selectionSettings,
     rowSelection,
@@ -177,7 +96,7 @@ const TableGrid = props => {
     groupColumns,
     groupToolbar,
     showEmptyText,
-    setIsFilter,
+    // setIsFilter,
     actionTemplate,
     ...rest
   } = props;
@@ -205,7 +124,8 @@ const TableGrid = props => {
     viewportWidth,
     viewportHeight
   });
-  const [filterStates, setFilterState] = React.useState(null);
+
+  // const [filterStates, setFilterState] = React.useState<any>(null)
 
   // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
 
@@ -349,18 +269,22 @@ const TableGrid = props => {
   const handleChange = sorter => {
     onSorter?.(sorter);
   };
-  const handleOnFilter = queries => {
-    if (onFilter) {
-      onFilter?.(convertFilters(queries));
-    } else {
-      setFilterState(convertFilters(queries));
-      if (queries && queries.length > 0) {
-        setIsFilter?.(true);
-      } else {
-        setIsFilter?.(false);
-      }
-    }
-  };
+
+  // const handleOnFilter = (queries: any) => {
+  //
+  //   if (onFilter) {
+  //     onFilter?.(convertFilters(queries))
+  //   } else {
+  //     setFilterState(convertFilters(queries))
+  //     if (queries && queries.length > 0) {
+  //       // setIsFilter?.(true)
+  //     } else  {
+  //       // setIsFilter?.(false)
+  //     }
+  //   }
+  //
+  // }
+
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContextMenu, {
     open: menuVisible,
     pos: position,
@@ -385,8 +309,10 @@ const TableGrid = props => {
       indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
     }
     // dataSource={columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []}
+
+    // dataSource={columns && columns.length > 0 ? filterDataByColumns4(dataSource, filterStates) : []}
     ,
-    dataSource: columns && columns.length > 0 ? filterDataByColumns4(dataSource, filterStates) : [],
+    dataSource: dataSource,
     className: classNames(className, {
       'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
@@ -423,13 +349,15 @@ const TableGrid = props => {
     // onScroll={(event) => {
     //   console.log('event', event)
     // }}
+
+    // onFilter={(val: any) => {
+    //   handleOnFilter(val)
+    //   // triggerFilter?.(convertFilters(val))
+    //   // onFilter?.(convertFilters(val))
+    //
+    // }}
     ,
 
-    onFilter: val => {
-      handleOnFilter(val);
-      // triggerFilter?.(convertFilters(val))
-      // onFilter?.(convertFilters(val))
-    },
     onChange: (paging, filters, sorter) => handleChange(sorter),
     title: showToolbar === false ? undefined : () => {
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, title?.(dataSource)), /*#__PURE__*/React.createElement("div", {
@@ -499,9 +427,12 @@ const TableGrid = props => {
 
         // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
         const dec = cellFormat?.decimalScale;
-        const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates), col?.key) : 0;
+
+        // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
+        const sumValue = col.type === 'number' ? sumByField(filterDataByColumns4(dataSource, [], []), col?.field) : 0;
         const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
         const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+        const numberValue = Number(value);
         const numericFormatProps = {
           thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
           decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
@@ -516,7 +447,7 @@ const TableGrid = props => {
           index: index,
           align: col.align ?? 'right',
           className: 'ui-rc-table-cell-ellipsis'
-        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps));
+        }, col.summaryTemplate ? col.summaryTemplate(numberValue, col.key) : numericFormatter(cellValue, numericFormatProps));
       })));
     },
     pagination: !pagination || pagination && pagination?.onChange ? false : {
@@ -536,7 +467,8 @@ const TableGrid = props => {
   }, pagination)), bottomToolbar?.(), /*#__PURE__*/React.createElement(Tooltip, {
     id: `${id}-tooltip-header`,
     style: {
-      zIndex: 1999
+      zIndex: 1999,
+      maxWidth: 350
     }
   }));
 };

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

@@ -4,6 +4,7 @@ import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { ColumnsTable } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
-export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, record: T, 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 getValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat) => any;
+export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
+export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, colIndex: number, editAble?: boolean, format?: IFormat, onClick?: 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, dateRangeLocale?: any) => React.JSX.Element;