es-grid-template 1.5.17 → 1.6.1

package/lib/grid-component/EditForm/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _EditForm = require("./EditForm");
+Object.keys(_EditForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EditForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _EditForm[key];
+    }
+  });
+});

package/lib/grid-component/EditableCell.js

@@ -19,6 +19,7 @@ var _rcMasterUi = require("rc-master-ui");
 var _asyncSelect = require("./async-select");
 var _asyncTableSelect = require("./async-table-select");
 var _colors = require("@ant-design/colors");
+var _EditForm = require("./EditForm");
 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 moment from "moment";
@@ -30,6 +31,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const {
   SHOW_PARENT
 } = _rcMasterUi.TreeSelect;
+const {
+  TextArea
+} = _antd.Input;
 const filterTreeNode = (input, treeNode) => {
   const {
     title,
@@ -116,8 +120,13 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          },
-          value: date,
+          }
+          // value={date}
+          ,
+          defaultValue: date
+          // preserveInvalidOnBlur
+          ,
+
           onBlur: () => {
             const formState = getValues();
             const itemState = getValues(dataIndex);
@@ -142,16 +151,7 @@ const EditableCell = props => {
           placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDate,
-          minDate: minDate
-
-          // onOpenChange={(open) => {
-          //   console.log(open)
-          //   if (open) {
-          //     handleSubmit(onSubmit)
-          //   }
-          // }}
-          ,
-
+          minDate: minDate,
           onChange: (newDate, dateString) => {
             const newDateValue = dateString ? (0, _moment.default)((0, _hooks.convertDayjsToDate)(dateString, dateFormat)).format() : null;
             onChange(newDateValue);
@@ -180,15 +180,16 @@ 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: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate,
           onChange: (newDate, dateString) => {
             const newDateValue = dateString ? (0, _moment.default)((0, _hooks.convertDayjsToDate)(dateString, dateFormat)).format() : null;
-            // console.log('newDateValue', newDateValue)
             onChange(newDateValue);
             setTimeout(() => {
               // @ts-ignore
@@ -710,7 +711,7 @@ const EditableCell = props => {
           style: {
             display: 'flex',
             alignItems: 'center',
-            justifyContent: column.align ?? 'left',
+            justifyContent: column.align ?? 'center',
             paddingInline: 5,
             height: '100%',
             width: '100%'
@@ -720,7 +721,7 @@ const EditableCell = props => {
           // style={{ textAlign: column.align ?? 'left' }}
           ,
           onChange: val => {
-            const newVal = (0, _hooks.parseBooleanToValue)(val.target.checked, typeof value);
+            const newVal = typeof value === "number" ? (0, _hooks.parseBooleanToValue)(val.target.checked, typeof value) : val.target.checked;
             onChange(newVal);
             const key = getRowKey?.(record, index);
             const formState = getValues();
@@ -738,36 +739,51 @@ const EditableCell = props => {
           },
           disabled: (0, _hooks.isDisable)(column, record) ?? false
         }));
+      case 'form':
+        const valueForm = value;
+        return /*#__PURE__*/_react.default.createElement(_EditForm.EditForm, {
+          rowData: record,
+          column: column,
+          t: t,
+          id: `col${indexCol}-record${indexRow}`,
+          value: valueForm
+          // fieldKey={'name'}
+          ,
+          fieldKey: column.editFromSettings?.fieldKey
+          // recordData={record}
+          ,
+          indexRow: indexRow,
+          cellFocus: column.field === cellEditing?.column.field,
+          onChange: val => {
+            const formState = getValues();
 
-      // case 'form':
-      //
-      //   const valueForm = record[column.dataIndex]
-      //
-      //   return (
-      //     <EditForm
-      //       column={col}
-      //       t={t}
-      //       id={`col${indexCol}-record${indexRow}`}
-      //       value={valueForm}
-      //       fieldKey={'name'}
-      //       recordData={record}
-      //       indexRow={indexRow}
-      //       cellFocus={cellFocus}
-      //       onChange={(val: any) => {
-      //         // record[column.dataIndex] = val
-      //         const newrecordData = {
-      //           ...record,
-      //           [column.dataIndex]: val
-      //         }
-      //         handleCellChange(val, val, newrecordData, col, indexRow, indexCol)
-      //       }}
-      //       menuPortalTarget={tableContainerRef}
-      //       classNamePrefix={column.classElement ?? 'select'}
-      //       placeholder={t ? t(column.placeholder ? column.placeholder : '') : (column.placeholder ? column.placeholder : '')}
-      //       menuWidth={column.editFromSettings?.menuWidth}
-      //       menuHeight={column.editFromSettings?.menuHeight}
-      //     />
-      //   )
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key: getRowKey?.(record, index),
+              field: column.field ?? column.dataIndex,
+              record: {
+                ...formState,
+                [column.field ?? '']: val
+              },
+              prevState,
+              newState,
+              option: val,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          }
+          // cellEditing={cellEditing}
+
+          // menuPortalTarget={tableContainerRef}
+          // classNamePrefix={column.classElement ?? 'select'}
+          ,
+          placeholder: t ? t(column.placeholder ? column.placeholder : '') : column.placeholder ? column.placeholder : '',
+          menuWidth: column.editFromSettings?.menuWidth,
+          menuHeight: column.editFromSettings?.menuHeight
+        });
 
       // case 'file':
       //   const valueFile = record[column.dataIndex]
@@ -931,11 +947,14 @@ const EditableCell = props => {
           "data-tooltip-id": `${id}-tooltip-form-error`
         }));
       default:
-        return /*#__PURE__*/_react.default.createElement(_antd.Input, {
+        return /*#__PURE__*/_react.default.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] : ''}
           ,
@@ -949,9 +968,6 @@ const EditableCell = props => {
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = value;
-            //
-            // console.log('newState', newState)
-            // console.log('prevState', prevState)
             const key = getRowKey?.(record, index);
             // @ts-ignore
             if (newState !== prevState) {
@@ -991,7 +1007,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/lib/grid-component/InternalTable.js

@@ -37,6 +37,7 @@ var _sortable = require("@dnd-kit/sortable");
 var _reactResizable = require("react-resizable");
 var _faker = require("@faker-js/faker");
 var _InfiniteTable = _interopRequireDefault(require("./table/InfiniteTable"));
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 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 {Resizable} from "react-resizable";
@@ -191,15 +192,19 @@ const InternalTable = props => {
     summary,
     infiniteScroll,
     wrapSettings,
+    onFilter,
     ...rest
   } = props;
   const id = _react.default.useMemo(() => {
     return tableId ?? _faker.faker.string.alpha(20);
     // return tableId ?? newGuid()
   }, [tableId]);
-  const rowKey = _react.default.useMemo(() => {
-    return propRowKey ?? 'rowId';
-  }, [propRowKey]);
+
+  // const rowKey = React.useMemo(() => {
+  //   return  propRowKey ?? 'rowId'
+  // }, [propRowKey])
+
+  const rowKey = 'rowId';
   const [scrollHeight, setHeight] = (0, _react.useState)(0);
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
   const dateRangeLocale = lang && lang === 'en' ? _en_US2.default : _vi_VN2.default;
@@ -219,14 +224,30 @@ const InternalTable = props => {
     over: -1
   });
   const [tooltipContent, setTooltipContent] = (0, _react.useState)('');
-  const mergedData = _react.default.useMemo(() => {
-    // return addRowIdArray(dataSource)
+  const [filterStates, setFilterState] = _react.default.useState(null);
+  // const [filterData, setFilterData] = React.useState<any>(null)
 
+  const mergedData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
       return (0, _hooks.groupArrayByColumns)(dataSource, groupColumns);
     }
     return (0, _hooks.addRowIdArray)(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+
+  // ========================= Keys =========================
+  const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _hooks.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.default.useState([]);
   _react.default.useEffect(() => {
     if (propsHeight) {
@@ -245,6 +266,20 @@ const InternalTable = props => {
   _react.default.useEffect(() => {
     setColumns(propsColumns);
   }, [propsColumns]);
+  const handleOnFilter = queries => {
+    if (onFilter) {
+      onFilter?.((0, _hooks.convertFilters)(queries));
+    } else {
+      setFilterState((0, _hooks.convertFilters)(queries));
+      const b = (0, _hooks.filterDataByColumns4)(mergedData, (0, _hooks.convertFilters)(queries), []);
+      setMergedFilterKeys((0, _hooks.getAllRowKey)(b));
+      if (queries && queries.length > 0) {
+        // setIsFilter?.(true)
+      } else {
+        // setIsFilter?.(false)
+      }
+    }
+  };
   const handleResize = column => (e, {
     size
   }) => {
@@ -416,10 +451,11 @@ const InternalTable = props => {
             })
           }),
           render: (val, record) => {
+            const tmpData = (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys);
             if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
-              return (0, _hooks.findItemPath)(mergedData, record, rowKey, pagination.currentPage, pagination.pageSize);
+              return (0, _hooks.findItemPath)(tmpData, record, rowKey, pagination.currentPage, pagination.pageSize);
             }
-            return (0, _hooks.findItemPath)(mergedData, record, rowKey);
+            return (0, _hooks.findItemPath)(tmpData, record, rowKey);
           }
         };
       }
@@ -515,28 +551,28 @@ const InternalTable = props => {
         render: (value, record, rowIndex) => {
           const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
           const cellFormat = (0, _hooks.getFormat)(colFormat, format);
-          if (groupSetting && groupSetting.hiddenColumnGroup === false) {
+          if (groupAble && groupSetting && groupSetting.hiddenColumnGroup === false) {
             if (record.children) {
-              return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
+              return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
             }
             if (groupColumns?.includes(column.field)) {
               return '';
             }
-            return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
+            return (0, _columns.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 = (0, _columns.flatColumns2)(columns).find(it => it.field === record.field);
             if (currentGroupColumn?.template) {
-              return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
+              return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
             }
-            return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
+            return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
-          return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
+          return (0, _columns.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.default.useCallback(cols => {
     return cols.map(column => {
       const find = convertColumns.find(it => it.field === column.field);
@@ -584,7 +620,7 @@ const InternalTable = props => {
         };
       }
     });
-  }, [convertColumns, t]);
+  }, [convertColumns, id, t, wrapSettings]);
   const mergedColumns = _react.default.useMemo(() => {
     return transformColumns(columns);
   }, [columns, transformColumns]);
@@ -602,9 +638,9 @@ const InternalTable = props => {
       });
     }
     onChooseColumns?.({
-      showColumns: [],
-      columns: [],
-      flattenColumns: []
+      showColumns: (0, _hooks.removeInvisibleColumns)([...newColumns]),
+      columns: [...newColumns],
+      flattenColumns: (0, _hooks.convertFlatColumn)([...newColumns])
     });
   };
   const onDragEnd = ({
@@ -683,7 +719,9 @@ const InternalTable = props => {
       rowData,
       index
     } = args;
-    const tmpData = [...mergedData];
+
+    // const tmpData = [...mergedData]
+    const tmpData = (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys);
     if (idCommand === 'DELETE') {
       // bật modal confirm
       if (commandSettings && commandSettings.confirmDialog) {
@@ -709,7 +747,7 @@ const InternalTable = props => {
 
               let newData = [];
               if (rowData?.parentId) {
-                const parent = (0, _hooks.findItemByKey)(mergedData, rowKey, rowData.parentId);
+                const parent = (0, _hooks.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);
@@ -846,8 +884,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: (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys),
     format: format,
     columns: mergedColumns,
     showSorterTooltip: {
@@ -887,14 +930,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.default.createElement(_core.DragOverlay, {
     style: {
-      width: 100
+      minWidth: 100,
+      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
     }
   }, /*#__PURE__*/_react.default.createElement("th", {
     style: {
-      backgroundColor: '#c4c4c4',
+      backgroundColor: '#f0f0f0',
       padding: 6,
       borderRadius: 6,
       fontWeight: 500

package/lib/grid-component/TableGrid.js

@@ -28,87 +28,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // import {ConfigProvider} from "antd";
 
-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 = (0, _antdStyle.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.default.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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
     open: menuVisible,
     pos: position,
@@ -385,8 +309,10 @@ const TableGrid = props => {
       indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
     }
     // dataSource={columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []}
+
+    // dataSource={columns && columns.length > 0 ? filterDataByColumns4(dataSource, filterStates) : []}
     ,
-    dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns4)(dataSource, filterStates) : [],
+    dataSource: dataSource,
     className: (0, _classnames.default)(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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, title?.(dataSource)), /*#__PURE__*/_react.default.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' ? (0, _hooks.sumDataByField)((0, _hooks.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' ? (0, _hooks.sumByField)((0, _hooks.filterDataByColumns4)(dataSource, [], []), col?.field) : 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 numberValue = Number(value);
         const numericFormatProps = {
           thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
           decimalSeparator: (0, _hooks.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) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
+        }, col.summaryTemplate ? col.summaryTemplate(numberValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
       })));
     },
     pagination: !pagination || pagination && pagination?.onChange ? false : {
@@ -536,7 +467,8 @@ const TableGrid = props => {
   }, pagination)), bottomToolbar?.(), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
     id: `${id}-tooltip-header`,
     style: {
-      zIndex: 1999
+      zIndex: 1999,
+      maxWidth: 350
     }
   }));
 };