es-grid-template 1.3.9 → 1.4.1

package/es/grid-component/EditableCell.js

@@ -33,7 +33,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 {
@@ -558,19 +561,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/es/grid-component/InternalTable.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Resizable } from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -26,6 +26,7 @@ import { flatColumns2 } from "./hooks/columns";
 import Group from "./table/Group";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
+import { Tooltip } from "react-tooltip";
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 
@@ -91,8 +92,8 @@ const InternalTable = props => {
     ...rest
   } = props;
   const rowKey = React.useMemo(() => {
-    return editAble ? 'rowId' : propRowKey ?? 'id';
-  }, [editAble, propRowKey]);
+    return propRowKey ?? 'rowId';
+  }, [propRowKey]);
   const local = lang && lang === 'en' ? en : vi;
   const buddhistLocale = {
     ...local,
@@ -103,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.useMemo(() => {
     // return filterDataByColumns2(addRowIdArray(dataSource), filterStates)
@@ -149,6 +151,11 @@ const InternalTable = props => {
     // @ts-ignore
     return record => record?.[rowKey];
   }, [rowKey]);
+
+  // const onMouseHover = (record: any, col: ColumnTable) => {
+  //
+  // }
+
   const [transformSelectionColumns] = useColumns({
     locale,
     t,
@@ -163,6 +170,7 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     handleResize
+    // onMouseHover
   });
   const mergedColumns = React.useMemo(() => {
     return transformSelectionColumns(columns);
@@ -391,7 +399,7 @@ const InternalTable = props => {
     }
   };
   const TableComponent = groupAble ? Group : editAble ? GridEdit : Grid;
-  return /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
     t: t,
     locale: locale,
     tableRef: tableRef,
@@ -426,6 +434,20 @@ const InternalTable = props => {
     // isFilter={isFilter}
     // setIsFilter={setIsFilter}
     // onScroll={onScroll}
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    id: "tooltip-cell-content",
+    style: {
+      zIndex: 1999
+    }
+    // content={'sssss'}
+    // content={cellTooltip}
+    // render={() => {
+    //   return (
+    //     <span>
+    //       aaaa
+    //     </span>
+    //   )
+    // }}
   }));
 };
 export default InternalTable;

package/es/grid-component/TableGrid.js

@@ -12,7 +12,7 @@ import classNames from "classnames";
 import { checkDecimalSeparator, checkThousandSeparator,
 // filterDataByColumns2,
 // filterDataByColumns3,
-filterDataByColumns4,
+filterDataByColumns4, getFormat,
 // convertFlatColumn,
 isEmpty,
 // newGuid,
@@ -413,46 +413,6 @@ const TableGrid = props => {
     // }}
     ,
 
-    summary: () => {
-      if (typeof summary === 'function') {
-        return summary(dataSource);
-      }
-      if (!summary) {
-        return undefined;
-      }
-      return /*#__PURE__*/React.createElement(Table.Summary, {
-        fixed: true
-      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(!!mode ? [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' ? sumDataByField(dataSource, col?.key) : 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 numericFormatProps = {
-          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
-          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-          allowNegative: cellFormat?.allowNegative ?? false,
-          prefix: cellFormat?.prefix,
-          suffix: cellFormat?.suffix,
-          decimalScale: dec,
-          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
-        };
-        return /*#__PURE__*/React.createElement(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) : 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.createElement(Table.Summary, {
+        fixed: true
+      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(!!mode ? [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 = 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' ? sumDataByField(dataSource, col?.key) : 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 numericFormatProps = {
+          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+          allowNegative: cellFormat?.allowNegative ?? false,
+          prefix: cellFormat?.prefix,
+          suffix: cellFormat?.suffix,
+          decimalScale: dec,
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+        };
+        return /*#__PURE__*/React.createElement(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) : numericFormatter(cellValue, numericFormatProps));
+      })));
+    },
+    pagination: !pagination || pagination && pagination?.onChange ? false : {
+      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
+      ...pagination
     }
   })), /*#__PURE__*/React.createElement("div", null), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}

package/es/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/es/grid-component/hooks/useColumns.js

@@ -4,7 +4,7 @@ import { Fragment, useCallback } from 'react';
 // import Command from "../Command";
 import { Button, Space } from "antd";
 import { Select } from "rc-master-ui";
-import { findItemPath, getTypeFilter } from "./utils";
+import { findItemPath, getFormat, getTypeFilter } from "./utils";
 import { booleanOperator, numberOperator, stringOperator, translateOption } from "./constant";
 import { flatColumns2, renderContent, renderFilter } from "./columns";
 import { SearchOutlined } from "@ant-design/icons";
@@ -37,6 +37,7 @@ const useColumns = config => {
     sortMultiple,
     format,
     handleResize,
+    // onMouseHover,
     groupAble,
     groupColumns,
     groupSetting,
@@ -273,11 +274,16 @@ const useColumns = config => {
               className: classNames(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 = getFormat(colFormat, format);
             if (groupSetting && groupSetting.hiddenColumnGroup === false) {
               if (record.children) {
                 return renderContent(col, value, record, rowIndex, cellFormat);
@@ -301,7 +307,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];
 };
 export default useColumns;

package/es/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/es/grid-component/hooks/useLazyKVMap.js

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+import * as React from 'react';
+
+// 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];
+};
+export default useLazyKVMap;

package/es/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/es/grid-component/hooks/utils.js

@@ -171,6 +171,25 @@ export const updateColumnsByGroup = (columns, columnsGroup) => {
     return newColumn;
   });
 };
+export 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
+  };
+};
 export const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
@@ -274,13 +293,15 @@ export 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);
@@ -1542,7 +1563,7 @@ export const removeBorderClass2 = (className, id) => {
     });
   }
 };
-export const onAddBgSelectedCell = (selectedCells, id) => {
+export 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}"]`;
@@ -1557,7 +1578,7 @@ export 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/es/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/es/grid-component/table/GridEdit.js

@@ -13,7 +13,7 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addClassBorderPasteCell, addClassCellIndexSelected, addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, hideDraggingPoint, isEditable, isEqualSet, isObjEmpty, newGuid, onAddBorderSelectedCell, onAddBgSelectedCell, onRemoveBorderSelectedCell, onRemoveBgSelectedCell, removeClassBorderPasteCell, removeClassCellIndexSelected, showDraggingPoint, sortedSetASC, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addClassBorderPasteCell, addClassCellIndexSelected, addRows8, addRowsUp, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, hideDraggingPoint, isEditable, isEqualSet, isObjEmpty, newGuid, onAddBorderSelectedCell, onAddBgSelectedCell, onRemoveBorderSelectedCell, onRemoveBgSelectedCell, removeClassBorderPasteCell, removeClassCellIndexSelected, showDraggingPoint, sortedSetASC, totalFixedWidth, updateArrayByKey, getFormat } from "../hooks";
 import Message from "../../Message/Message";
 import { Toolbar, ConfigProvider, InputNumber } from "rc-master-ui";
 import classnames from "classnames";
@@ -149,6 +149,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.useMemo(() => {
+    return flatColumns2(columns.filter(it => it.visible !== false));
+  }, [columns]);
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
@@ -507,7 +510,7 @@ const GridEdit = props => {
       const newData = [...dataSource];
 
       // colIndex => field
-      const colIndexToField = flatColumns2(columns).map(col => col.field);
+      const colIndexToField = flatColumns2(visibleCols).map(col => col.field);
 
       // Duyệt qua mỗi ô cần xóa
       for (const cell of selectedCells.current) {
@@ -859,7 +862,9 @@ const GridEdit = props => {
   };
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
-    const tmpCols = flatColumns2(columns.filter(it => it.visible !== false));
+    const tmpCols = {
+      ...visibleCols
+    };
     const rowSelectedFirst = getFirstSelectCell(selectedCells.current).row;
     const rowPasteLast = getLastSelectCell(pasteCells.current).row;
     const selectedArray = Array.from(selectedCells.current).map(key => {
@@ -1250,7 +1255,7 @@ const GridEdit = props => {
       col
     };
     const newSelectedCells = new Set();
-    const tCols = editAbleColumns(columns);
+    const tCols = 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}`);
@@ -1270,7 +1275,7 @@ const GridEdit = props => {
     hideDraggingPoint(selectedCells.current, id);
     selectedCells.current = newSelectedCells;
     rowsSelected.current = new Set([`${row}-${col}`]);
-    onAddBgSelectedCell(newSelectedCells, id);
+    onAddBgSelectedCell(newSelectedCells, id, false);
     onAddBorderSelectedCell(newSelectedCells, id);
     addClassCellIndexSelected(new Set([`${row}-${col}`]), id);
   };
@@ -1412,13 +1417,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] = {
@@ -1461,13 +1466,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] = {
@@ -1783,7 +1788,7 @@ const GridEdit = props => {
   // }, []);
 
   const scrollToCell = (rowIndex, colIndex, cell, scrollType) => {
-    const fixedWidth = totalFixedWidth(columns, 'left', selectionSettings);
+    const fixedWidth = totalFixedWidth(visibleCols, 'left', selectionSettings);
     if (scrollType === 'horizontal') {
       if (tableRef.current) {
         tableRef.current.scrollTo({
@@ -1904,7 +1909,7 @@ const GridEdit = props => {
                 setEditingKey('');
               }
             },
-            tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+            tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex
           };
         },
         render: (value, record) => {
@@ -1930,6 +1935,7 @@ const GridEdit = props => {
       onCell: (record, rowIndex) => {
         const rowNumber = 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 {
@@ -1970,14 +1976,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);
                 }
@@ -2050,9 +2060,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 ${!isEditable(column, record) ? 'disable' : ''}`,
@@ -2065,14 +2083,14 @@ const GridEdit = props => {
           title: 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 && isEditable(column, record),
           cellEditing,
           t,
-          tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
+          tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
           } : {}
@@ -2103,6 +2121,8 @@ const GridEdit = props => {
       },
       render: (value, record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+        const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+        const cellFormat = getFormat(colFormat, format);
         return /*#__PURE__*/React.createElement("div", {
           className: classNames('ui-rc_cell-content', {
             // disable: !isEditable(column as any, record)
@@ -2124,7 +2144,7 @@ const GridEdit = props => {
           // }}
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, column.format ? typeof column.format === 'function' ? column.format(record) : column.format : format)),
+        }, 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) &&