es-grid-template 1.3.9 → 1.4.1

package/lib/grid-component/EditableCell.js

@@ -35,7 +35,10 @@ const filterTreeNode = (input, treeNode) => {
     title,
     value
   } = treeNode;
-  return title.toLowerCase().includes(input.toLowerCase()) || value.toLowerCase().includes(input.toLowerCase());
+  if (typeof title === "string" || typeof title === 'number') {
+    return title.toString().toLowerCase().includes(input.toLowerCase()) || value.toLowerCase().includes(input.toLowerCase());
+  }
+  return value.toLowerCase().includes(input.toLowerCase());
 };
 const EditableCell = props => {
   const {
@@ -560,19 +563,17 @@ const EditableCell = props => {
           // autoFocus={true}
           ,
           virtual: true,
-          allowClear: true
+          allowClear: true,
+          showSearch: true
           // maxTagTextLength={column?.editSelectSettings?.showItems}
           ,
           maxTagCount: column?.editSelectSettings?.showItems,
           maxTagPlaceholder: 2,
           treeTitleRender: column?.editSelectSettings?.formatOptionLabel,
           showCheckedStrategy: SHOW_PARENT,
-          multiple: column?.editSelectSettings?.selectMode === 'checkbox' || column?.editSelectSettings?.isMulti,
-          fieldNames: {
-            label: inputKey ? inputKey : 'title',
-            value: keySelect,
-            children: 'children'
-          },
+          multiple: column?.editSelectSettings?.selectMode === 'checkbox' || column?.editSelectSettings?.isMulti
+          // fieldNames={{label: inputKey ? inputKey : 'title', value: keySelect, children: 'children'}}
+          ,
           treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
           filterTreeNode: filterTreeNode,
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,

package/lib/grid-component/InternalTable.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactResizable = require("react-resizable");
 require("react-resizable/css/styles.css");
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
@@ -24,6 +24,9 @@ var _columns = require("./hooks/columns");
 var _Group = _interopRequireDefault(require("./table/Group"));
 var _sweetalert = _interopRequireDefault(require("sweetalert2"));
 var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
+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; }
 _dayjs.default.extend(_customParseFormat.default);
 const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
 
@@ -89,8 +92,8 @@ const InternalTable = props => {
     ...rest
   } = props;
   const rowKey = _react.default.useMemo(() => {
-    return editAble ? 'rowId' : propRowKey ?? 'id';
-  }, [editAble, propRowKey]);
+    return propRowKey ?? 'rowId';
+  }, [propRowKey]);
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
   const buddhistLocale = {
     ...local,
@@ -101,6 +104,7 @@ const InternalTable = props => {
 
   // const [filterStates, setFilterState] = React.useState<any>(null)
   // const [isFilter, setIsFilter] = React.useState<boolean>(false);
+  // const [cellTooltip, seCellTooltip] = React.useState<any>(undefined);
 
   const mergerdData = _react.default.useMemo(() => {
     // return filterDataByColumns2(addRowIdArray(dataSource), filterStates)
@@ -147,6 +151,11 @@ const InternalTable = props => {
     // @ts-ignore
     return record => record?.[rowKey];
   }, [rowKey]);
+
+  // const onMouseHover = (record: any, col: ColumnTable) => {
+  //
+  // }
+
   const [transformSelectionColumns] = (0, _useColumns.default)({
     locale,
     t,
@@ -161,6 +170,7 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     handleResize
+    // onMouseHover
   });
   const mergedColumns = _react.default.useMemo(() => {
     return transformSelectionColumns(columns);
@@ -389,7 +399,7 @@ const InternalTable = props => {
     }
   };
   const TableComponent = groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;
-  return /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
     t: t,
     locale: locale,
     tableRef: tableRef,
@@ -424,6 +434,20 @@ const InternalTable = props => {
     // isFilter={isFilter}
     // setIsFilter={setIsFilter}
     // onScroll={onScroll}
+  })), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+    id: "tooltip-cell-content",
+    style: {
+      zIndex: 1999
+    }
+    // content={'sssss'}
+    // content={cellTooltip}
+    // render={() => {
+    //   return (
+    //     <span>
+    //       aaaa
+    //     </span>
+    //   )
+    // }}
   }));
 };
 var _default = exports.default = InternalTable;

package/lib/grid-component/TableGrid.js

@@ -413,46 +413,6 @@ const TableGrid = props => {
     // }}
     ,
 
-    summary: () => {
-      if (typeof summary === 'function') {
-        return summary(dataSource);
-      }
-      if (!summary) {
-        return undefined;
-      }
-      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
-        fixed: true
-      }, /*#__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: cellFormat?.allowNegative ?? false,
-          prefix: cellFormat?.prefix,
-          suffix: cellFormat?.suffix,
-          decimalScale: dec,
-          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
-        };
-        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Cell, {
-          key: col.key,
-          index: index,
-          align: col.align ?? 'right',
-          className: 'ui-rc-table-cell-ellipsis'
-        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
-      })));
-    },
-    pagination: !pagination || pagination && pagination?.onChange ? false : {
-      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
-      ...pagination
-    },
     onFilter: val => {
       handleOnFilter(val);
       // triggerFilter?.(convertFilters(val))
@@ -507,6 +467,49 @@ const TableGrid = props => {
     },
     expandable: {
       ...expandable
+    },
+    summary: () => {
+      if (typeof summary === 'function') {
+        return summary(dataSource);
+      }
+      if (!summary) {
+        return undefined;
+      }
+      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
+        fixed: true
+      }, /*#__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: IFormat | undefined = col.format ? typeof col.format === 'function' ? col.format({}) : col.format : format
+
+        const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+        const cellFormat = (0, _hooks.getFormat)(colFormat, 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: cellFormat?.allowNegative ?? false,
+          prefix: cellFormat?.prefix,
+          suffix: cellFormat?.suffix,
+          decimalScale: dec,
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+        };
+        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Cell, {
+          key: col.key,
+          index: index,
+          align: col.align ?? 'right',
+          className: 'ui-rc-table-cell-ellipsis'
+        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
+      })));
+    },
+    pagination: !pagination || pagination && pagination?.onChange ? false : {
+      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
+      ...pagination
     }
   })), /*#__PURE__*/_react.default.createElement("div", null), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}

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

@@ -13,6 +13,7 @@ interface UseColumnsConfig<RecordType> {
     groupSetting?: IGroupSetting;
     groupColumns?: string[];
     rowKey?: any;
+    onMouseHover?: any;
 }
 declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
 export default useColumns;

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

@@ -48,6 +48,7 @@ const useColumns = config => {
     sortMultiple,
     format,
     handleResize,
+    // onMouseHover,
     groupAble,
     groupColumns,
     groupSetting,
@@ -284,11 +285,16 @@ const useColumns = config => {
               className: (0, _classnames.default)(transformedColumn?.onCell?.(data, index).className ?? '', {
                 'cell-group': groupColumns && data.children,
                 'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
-              })
+              }),
+              'data-tooltip-id': "tooltip-cell-content"
+              // onMouseEnter: () => {
+              //   onMouseHover(data, col as any)
+              // },
             };
           },
           render: (value, record, rowIndex) => {
-            const cellFormat = col.format ? typeof col.format === 'function' ? col.format(record) : col.format : format;
+            const colFormat = typeof col.format === 'function' ? col.format(record) : col.format;
+            const cellFormat = (0, _utils.getFormat)(colFormat, format);
             if (groupSetting && groupSetting.hiddenColumnGroup === false) {
               if (record.children) {
                 return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);
@@ -312,7 +318,9 @@ const useColumns = config => {
       });
     };
     return convertColumns(cloneColumns);
-  }, [format, getColumnSearchProps, groupAble, groupColumns, groupSetting, handleResize, sortMultiple, t]);
+  }, [groupColumns, getColumnSearchProps, sortMultiple, groupSetting, groupAble, t, dataSource, rowKey, handleResize, format]
+  // format, getColumnSearchProps, sortMultiple, groupSetting, groupAble, t, groupColumns, , handleResize, , t, cellHover
+  );
   return [transformColumns];
 };
 var _default = exports.default = useColumns;

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

@@ -0,0 +1,4 @@
+import type { AnyObject, GetRowKey } from "../type";
+import type { Key } from "react";
+declare const useLazyKVMap: <RecordType extends AnyObject = AnyObject>(data: readonly RecordType[], childrenColumnName: string, getRowKey: GetRowKey<RecordType>) => readonly [(key: Key) => RecordType];
+export default useLazyKVMap;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+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; }
+/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+
+// import type { AnyObject } from '../../_util/type';
+// import type { GetRowKey, Key } from '../interface';
+
+const useLazyKVMap = (data, childrenColumnName, getRowKey) => {
+  const mapCacheRef = React.useRef({});
+  function getRecordByKey(key) {
+    if (!mapCacheRef.current || mapCacheRef.current.data !== data || mapCacheRef.current.childrenColumnName !== childrenColumnName || mapCacheRef.current.getRowKey !== getRowKey) {
+      const kvMap = new Map();
+
+      // @ts-ignore
+      function dig(records) {
+        records.forEach((record, index) => {
+          const rowKey = getRowKey(record, index);
+          kvMap.set(rowKey, record);
+          if (record && typeof record === 'object' && childrenColumnName in record) {
+            dig(record[childrenColumnName] || []);
+          }
+        });
+      }
+      dig(data);
+      mapCacheRef.current = {
+        data,
+        childrenColumnName,
+        kvMap,
+        getRowKey
+      };
+    }
+    return mapCacheRef.current.kvMap?.get(key);
+  }
+  return [getRecordByKey];
+};
+var _default = exports.default = useLazyKVMap;

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

@@ -21,6 +21,21 @@ 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 getFormat: (colFormat?: IFormat, format?: IFormat) => {
+    thousandSeparator: string;
+    decimalSeparator: string;
+    decimalScale: number;
+    allowNegative: boolean;
+    prefix: string;
+    suffix: string;
+    fixedDecimalScale: boolean;
+    dateFormat: string;
+    datetimeFormat: string;
+    timeFormat: string;
+    weekFormat: string;
+    monthFormat: string;
+    yearFormat: 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;
@@ -109,7 +124,7 @@ 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 onAddBgSelectedCell: (selectedCells: any, id?: string, isFocusCellIndex?: boolean) => 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;

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

@@ -16,7 +16,7 @@ exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
 exports.getBottomRowCells = getBottomRowCells;
 exports.getCellsByPosition = getCellsByPosition;
-exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = void 0;
+exports.getFormat = exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.hideDraggingPoint = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
 exports.invalidDate = invalidDate;
@@ -216,6 +216,26 @@ const updateColumnsByGroup = (columns, columnsGroup) => {
   });
 };
 exports.updateColumnsByGroup = updateColumnsByGroup;
+const getFormat = (colFormat, format) => {
+  return {
+    thousandSeparator: colFormat?.thousandSeparator ?? format?.thousandSeparator,
+    decimalSeparator: colFormat?.decimalSeparator ?? format?.decimalSeparator,
+    decimalScale: colFormat?.decimalScale ?? format?.decimalScale,
+    allowNegative: colFormat?.allowNegative ?? format?.allowNegative,
+    // check nhập số âm
+    prefix: colFormat?.prefix ?? format?.prefix,
+    suffix: colFormat?.suffix ?? format?.suffix,
+    fixedDecimalScale: colFormat?.fixedDecimalScale ?? format?.fixedDecimalScale,
+    // mặc định thêm số 0 sau số thập phân
+    dateFormat: colFormat?.dateFormat ?? format?.dateFormat,
+    datetimeFormat: colFormat?.datetimeFormat ?? format?.datetimeFormat,
+    timeFormat: colFormat?.timeFormat ?? format?.timeFormat,
+    weekFormat: colFormat?.weekFormat ?? format?.weekFormat,
+    monthFormat: colFormat?.monthFormat ?? format?.monthFormat,
+    yearFormat: colFormat?.yearFormat ?? format?.yearFormat
+  };
+};
+exports.getFormat = getFormat;
 const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
@@ -327,13 +347,15 @@ const convertLabelToTitle = data => {
       label,
       title,
       value,
+      key,
       ...rest
     } = item;
     const newItem = {
       ...rest,
       value,
-      key: value,
-      title: title ? title : label
+      label,
+      key: key ?? value,
+      title: title ?? label
     };
     if (item.children) {
       newItem.children = convertLabelToTitle(item.children);
@@ -1640,7 +1662,7 @@ const removeBorderClass2 = (className, id) => {
   }
 };
 exports.removeBorderClass2 = removeBorderClass2;
-const onAddBgSelectedCell = (selectedCells, id) => {
+const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
   const selectors = Array.from(selectedCells).map(pos => {
     const [row1, col1] = pos.split('-');
     return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
@@ -1655,7 +1677,7 @@ const onAddBgSelectedCell = (selectedCells, id) => {
   const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
   const rowsSelectors = rowsArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
   const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
-  if (cellsIndex) {
+  if (cellsIndex && isFocusCellIndex !== false) {
     cellsIndex.forEach(cell => {
       cell.classList.add('focus');
     });

package/lib/grid-component/styles.scss

@@ -426,7 +426,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       &.rc-ui-cell-index {
         &.focus {
           background-color: $cell-index-focus-bg;
-          font-weight: 500;
+          //font-weight: 500;
         }
         &.selected {
           background-color: $cell-index-selected-bg !important;
@@ -681,18 +681,18 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     //  background-color: #f0f0f0;
     //}
 
-    .ui-rc_cell-content--index {
-      &.focus {
-        background-color: $cell-index-focus-bg;
-        //color: #fff;
-        //font-weight: 500;
-      }
-      &.selected {
-        background-color: $cell-index-selected-bg;
-        color: #fff;
-        //font-weight: 500;
-      }
-    }
+    //.ui-rc_cell-content--index {
+    //  &.focus {
+    //    background-color: $cell-index-focus-bg;
+    //    //color: #fff;
+    //    //font-weight: 500;
+    //  }
+    //  &.selected {
+    //    background-color: $cell-index-selected-bg;
+    //    color: #fff;
+    //    //font-weight: 500;
+    //  }
+    //}
 
     .#{$prefix}-table-tbody {
 

package/lib/grid-component/table/GridEdit.js

@@ -157,6 +157,9 @@ const GridEdit = props => {
   // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
   // const isPasteDragging = useRef(false);
 
+  const visibleCols = _react.default.useMemo(() => {
+    return (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
+  }, [columns]);
   const id = _react.default.useMemo(() => {
     return tableId ?? _faker.faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -515,7 +518,7 @@ const GridEdit = props => {
       const newData = [...dataSource];
 
       // colIndex => field
-      const colIndexToField = (0, _columns.flatColumns2)(columns).map(col => col.field);
+      const colIndexToField = (0, _columns.flatColumns2)(visibleCols).map(col => col.field);
 
       // Duyệt qua mỗi ô cần xóa
       for (const cell of selectedCells.current) {
@@ -867,7 +870,9 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
-    const tmpCols = (0, _columns.flatColumns2)(columns.filter(it => it.visible !== false));
+    const tmpCols = {
+      ...visibleCols
+    };
     const rowSelectedFirst = (0, _hooks.getFirstSelectCell)(selectedCells.current).row;
     const rowPasteLast = (0, _hooks.getLastSelectCell)(pasteCells.current).row;
     const selectedArray = Array.from(selectedCells.current).map(key => {
@@ -1258,7 +1263,7 @@ const GridEdit = props => {
       col
     };
     const newSelectedCells = new Set();
-    const tCols = (0, _hooks.editAbleColumns)(columns);
+    const tCols = (0, _hooks.editAbleColumns)(visibleCols);
     for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
       for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
@@ -1278,7 +1283,7 @@ const GridEdit = props => {
     (0, _hooks.hideDraggingPoint)(selectedCells.current, id);
     selectedCells.current = newSelectedCells;
     rowsSelected.current = new Set([`${row}-${col}`]);
-    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id);
+    (0, _hooks.onAddBgSelectedCell)(newSelectedCells, id, false);
     (0, _hooks.onAddBorderSelectedCell)(newSelectedCells, id);
     (0, _hooks.addClassCellIndexSelected)(new Set([`${row}-${col}`]), id);
   };
@@ -1420,13 +1425,13 @@ const GridEdit = props => {
         }
         rowValues.forEach((cellValue, colIndex) => {
           const targetCol = startCol + colIndex;
-          if (targetCol >= columns.length) {
+          if (targetCol >= visibleCols.length) {
             // Không vượt quá số cột
             return;
           }
-          if (columns[targetCol].editEnable) {
+          if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
-            const columnKey = columns[targetCol].field;
+            const columnKey = visibleCols[targetCol].field;
 
             // @ts-ignore
             newData[targetRow] = {
@@ -1469,13 +1474,13 @@ const GridEdit = props => {
         }
         rowValues.forEach((cellValue, colIndex) => {
           const targetCol = startCol + colIndex;
-          if (targetCol >= columns.length) {
+          if (targetCol >= visibleCols.length) {
             // Không vượt quá số cột
             return;
           }
-          if (columns[targetCol].editEnable) {
+          if (visibleCols[targetCol].editEnable) {
             // @ts-ignore
-            const columnKey = columns[targetCol].field;
+            const columnKey = visibleCols[targetCol].field;
 
             // @ts-ignore
             childData[targetRow] = {
@@ -1791,7 +1796,7 @@ const GridEdit = props => {
   // }, []);
 
   const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
-    const fixedWidth = (0, _hooks.totalFixedWidth)(columns, 'left', selectionSettings);
+    const fixedWidth = (0, _hooks.totalFixedWidth)(visibleCols, 'left', selectionSettings);
     if (scrollType === 'horizontal') {
       if (tableRef.current) {
         tableRef.current.scrollTo({
@@ -1912,7 +1917,7 @@ const GridEdit = props => {
                 setEditingKey('');
               }
             },
-            tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
           };
         },
         render: (value, record) => {
@@ -1938,6 +1943,7 @@ const GridEdit = props => {
       onCell: (record, rowIndex) => {
         const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
         return {
+          ...column?.onCell?.(record, rowIndex),
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key === 'Control' && event.ctrlKey) {} else {
@@ -1978,14 +1984,18 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'Tab') {
-                if (colIndex + 1 !== columns.length) {
-                  handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
-                } else {
-                  event.stopPropagation();
-                  event.preventDefault();
+                if (editingKey) {} else {
+                  if (colIndex + 1 !== visibleCols.length) {
+                    // console.log('bbbbb')
+                    handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
+                  } else {
+                    // console.log('fffff')
+                    event.stopPropagation();
+                    event.preventDefault();
+                  }
                 }
               }
-              if (event.key === 'ArrowRight' && colIndex + 1 !== columns.length) {
+              if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
                 if (editingKey !== '') {} else {
                   handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
@@ -2058,9 +2068,17 @@ const GridEdit = props => {
               rowsSelected.current = new Set();
             }
           },
+          // onMouseEnter: () => {
+          //
+          // },
+
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
+            } else {
+              if (editingKey) {
+                handleCellClick(rowNumber, record, column);
+              }
             }
           },
           className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : `rc-ui-cell-editable cell-editable ${!(0, _hooks.isEditable)(column, record) ? 'disable' : ''}`,
@@ -2073,14 +2091,14 @@ const GridEdit = props => {
           title: (0, _columns.getValueCell)(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          // 'data-tooltip-id': "tooltip-cell-content",
+          'data-tooltip-id': "tooltip-cell-content",
           // 'data-tooltip-content': 'tooltip-cell-content',
           // 'data-tooltip-delay-show': 1000,
           // 'data-tooltip-content': getValueCell(column, record[column.field as any], format),
           editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
           cellEditing,
           t,
-          tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
+          tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
           } : {}
@@ -2111,6 +2129,8 @@ const GridEdit = props => {
       },
       render: (value, record, rowIndex) => {
         const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
+        const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+        const cellFormat = (0, _hooks.getFormat)(colFormat, format);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _classnames.default)('ui-rc_cell-content', {
             // disable: !isEditable(column as any, record)
@@ -2132,7 +2152,7 @@ const GridEdit = props => {
           // }}
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, column.format ? typeof column.format === 'function' ? column.format(record) : column.format : format)),
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat)),
         // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
         // getLastSelectCell(selectedCells.current).col === colIndex &&
         // isEditable(column as any, record) &&