es-grid-template 1.5.0 → 1.5.1

package/es/grid-component/GridStyle.js

@@ -2,4 +2,4 @@ import styled from "styled-components";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})(["height:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined);
+})(["height:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);

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

@@ -4,6 +4,8 @@ import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';
+import 'rc-master-ui/es/date-range-picker/styles/index.less';
+import 'rc-master-ui/assets/index.css';
 export declare const SELECTION_COLUMN: {};
 declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/es/grid-component/InternalTable.js

@@ -11,9 +11,13 @@ import GridEdit from "./table/GridEdit";
 import Grid from "./table/Grid";
 import en from "rc-master-ui/es/date-picker/locale/en_US";
 import vi from "rc-master-ui/es/date-picker/locale/vi_VN";
+import enDr from "rc-master-ui/es/locales/en_US";
+import viDr from "rc-master-ui/es/locales/vi_VN";
 // import useColumns from "./hooks/useColumns";
 
 import "./styles.scss";
+import 'rc-master-ui/es/date-range-picker/styles/index.less';
+import 'rc-master-ui/assets/index.css';
 import { flatColumns2, renderContent, renderFilter } from "./hooks/columns";
 import Group from "./table/Group";
 import Swal from "sweetalert2";
@@ -202,6 +206,7 @@ const InternalTable = props => {
   // }, [height, id])
 
   const local = lang && lang === 'en' ? en : vi;
+  const dateRangeLocale = lang && lang === 'en' ? enDr : viDr;
   const buddhistLocale = {
     ...local,
     lang: {
@@ -319,7 +324,7 @@ const InternalTable = props => {
         style: {
           marginBottom: 8
         }
-      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(Space, {
+      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t, format, dateRangeLocale)), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',
           width: '100%'

package/es/grid-component/TableGrid.js

@@ -485,7 +485,7 @@ 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(dataSource, col?.key) : 0;
+        const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates), 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 = {

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

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

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

@@ -1,17 +1,15 @@
-import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
+import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
 import { numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
 import moment from "moment/moment";
 import React, { Fragment } from "react";
-import { DatePicker, Empty, Input, Select } from "rc-master-ui";
+import { CustomProvider, DatePicker, DateRangePicker, Empty, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
 import NumberRange from "../../number-range";
 import NumberInput from "../../number";
 // import {Typography} from "antd";
-const {
-  RangePicker
-} = DatePicker;
+// const {RangePicker} = DatePicker
 
 // const { Text } = Typography;
 
@@ -125,11 +123,11 @@ export const renderContent = (column, value, record, index, format) => {
     field: column.field
   }) : column.template : content);
 };
-export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format) => {
+export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format, dateRangeLocale) => {
   const cellFormat = column.format ? typeof column.format === 'function' ? column.format({}) : column.format : format;
   const type = getTypeFilter(column);
   const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = getDatepickerFormat(column?.type, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = convertFormat(getDatepickerFormat(column?.type, cellFormat) ?? 'DD/MM/YYYY');
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
   switch (type) {
@@ -176,35 +174,25 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         }
       }))));
     case 'DateRange':
-      const dateRangeValue = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : ''];
+      // const dateRangeValue: any = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : '']
+      const dateRangeValue = selectedKeys && selectedKeys.length > 0 ? [selectedKeys[0] ? new Date(selectedKeys[0]) : '', selectedKeys[1] ? new Date(selectedKeys[1]) : ''] : null;
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(RangePicker, {
-        format: {
-          format: dateRangeFormat,
-          type: 'mask'
-        }
-        // defaultValue={dateRangeValue}
-        ,
-        value: dateRangeValue,
-        locale: buddhistLocale
-        // placeholder={['Ngày bắt đầu', 'Ngày kết thúc']}
-        ,
-        popupStyle: {
-          zIndex: 9999
+      }, /*#__PURE__*/React.createElement(CustomProvider, {
+        locale: dateRangeLocale
+      }, /*#__PURE__*/React.createElement(DateRangePicker
+      // placeholder={['Ngày bắt đầu', 'Ngày bắt đầu']}
+      , {
+        style: {
+          width: 300
         },
-        onChange: (value, dateString) => {
-          const newDateRangeValue = dateString[0] ? [dateString[0] ? moment(convertDayjsToDate(dateString[0], dateRangeFormat)).format() : '', dateString[1] ? moment(convertDayjsToDate(dateString[1], dateRangeFormat)).format() : ''] : '';
-
-          // setSelectedKeys(newDateValue ? [newDateValue] : [])
+        format: dateRangeFormat,
+        value: dateRangeValue,
+        onChange: value => {
+          const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[0]).format() : ''] : [];
           setSelectedKeys(newDateRangeValue);
-        },
-        style: {
-          width: '100%'
         }
-        // popupClassName={'adv-popup-container'}
-        // getPopupContainer={() => menuRef.current}
-      }))));
+      })))));
     case 'Week':
       const weekValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {

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

@@ -36,7 +36,9 @@ export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
     monthFormat: string;
     yearFormat: string;
 };
+export declare function convertFormat(formatStr: string): string;
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export declare const getDateRangeFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
 export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];

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

@@ -190,12 +190,56 @@ export const getFormat = (colFormat, format) => {
     yearFormat: colFormat?.yearFormat ?? format?.yearFormat
   };
 };
+export function convertFormat(formatStr) {
+  // return formatStr.split('').map((char, i) => {
+  //   if (char === 'D' || char === 'd') {
+  //     return 'd'; // ngày: lowercase
+  //   }
+  //   if (char === 'Y' || char === 'y') {
+  //     return 'y'; // năm: lowercase
+  //   }
+  //   if (char === 'M' || char === 'm') {
+  //     return char; // tháng: giữ nguyên
+  //   }
+  //   return char; // separator
+  // }).join('');
+
+  return formatStr.split('').map(char => {
+    if (char === 'D' || char === 'd') return 'd';
+    if (char === 'Y' || char === 'y') return 'y';
+    if ('Hhmsa'.includes(char)) return char; // giờ, phút, giây, am/pm
+    if (char === 'M' || char === 'm') return char; // tháng: giữ nguyên
+    return char; // dấu phân cách
+  }).join('');
+}
 export const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return format?.dateFormat ?? 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'dd/MM/YYYY';
+    case "datetime":
+      return format?.datetimeFormat ?? 'dd/MM/YYYY HH:mm';
+    case "week":
+      return format?.weekFormat ?? 'dd/MM';
+    case "month":
+      return format?.monthFormat ?? 'MM/YYYY';
+    case "quarter":
+      return format?.dateFormat ?? 'dd/MM/YYYY';
+    case "year":
+      return format?.yearFormat ?? 'YYYY';
+    case "time":
+      return format?.timeFormat ?? 'HH:mm';
+    default:
+      return 'dd/MM/YYYY';
+  }
+};
+export const getDateRangeFormat = (type, format) => {
+  const typeFormat = type ? type.toLowerCase() : '';
+  switch (typeFormat) {
+    case "date":
+    case "daterange":
+      return convertFormat(format?.dateFormat ?? 'DD/MM/YYYY');
     case "datetime":
       return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":

package/es/grid-component/styles.scss

@@ -1341,3 +1341,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     display: none;
   }
 }
+
+.rs-picker-popup {
+  z-index: 1660;
+}

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

@@ -223,6 +223,8 @@ const GridEdit = props => {
   // quét vùng chọn
   const isDragMouse = useRef(false);
   const isMouseDown = useRef(false);
+  const editingKey = useRef('');
+  const cellEditing = useRef({});
 
   // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
   // const isPasteDragging = useRef(false);
@@ -368,7 +370,9 @@ const GridEdit = props => {
   // }, [])
 
   const [form] = Form.useForm();
-  const [editingKey, setEditingKey] = useState('');
+
+  // const [editingKey, setEditingKey] = useState<string | number>('')
+
   const [dataErrors, setDataErrors] = useState([]);
   const [isFilter, setIsFilter] = React.useState(false);
   const [rangeCells, setRangeCells] = useState(new Set());
@@ -377,7 +381,9 @@ const GridEdit = props => {
     type: ''
   });
   const [rowsAdd, setRowsAdd] = useState(1);
-  const [cellEditing, setCellEditing] = useState(null);
+
+  // const [cellEditing, setCellEditing] = useState<any>(null)
+
   const [isPasteDragging, setIsPasteDragging] = useState(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
 
   const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(() => {
@@ -490,10 +496,11 @@ const GridEdit = props => {
     // onRemoveBorderSelectedCell(selectedCells.current, id)
     //
 
-    setTimeout(() => {
-      // onAddBgSelectedCell(selectedCells.current, id)
-      // onAddBorderSelectedCell(selectedCells.current, id)
-    }, 10);
+    // setTimeout(() => {
+    // onAddBgSelectedCell(selectedCells.current, id)
+    // onAddBorderSelectedCell(selectedCells.current, id)
+    // }, 10)
+
     const defaultRowValue = getDefaultValue(defaultValue);
     // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
 
@@ -681,10 +688,11 @@ const GridEdit = props => {
     }
   }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
   const handleDeleteRows = React.useCallback(item => {
-    setTimeout(() => {
-      // onAddBgSelectedCell(selectedCells.current, id)
-      // onAddBorderSelectedCell(selectedCells.current, id)
-    });
+    // setTimeout(() => {
+    // onAddBgSelectedCell(selectedCells.current, id)
+    // onAddBorderSelectedCell(selectedCells.current, id)
+    // })
+
     if (item.onClick) {
       item.onClick({
         toolbar: item
@@ -716,7 +724,9 @@ const GridEdit = props => {
         const rowIndex = Number(rowIndexStr);
         const colIndex = Number(colIndexStr);
         const field = colIndexToField[colIndex];
-        if (newData[rowIndex] && field && field in newData[rowIndex]) {
+        const column = flatColumns2(visibleCols)[colIndex];
+        const rowData = flattenData(childrenColumnName, dataSource)[rowIndex];
+        if (newData[rowIndex] && field && field in newData[rowIndex] && isEditable(column, rowData)) {
           // @ts-ignore
           newData[rowIndex][field] = '';
         }
@@ -947,9 +957,13 @@ const GridEdit = props => {
     mode: 'onChange',
     resolver: validate ? yupResolver(validate) : undefined
   });
-  const isEditing = React.useCallback(record => {
-    return record[rowKey] === editingKey;
-  }, [editingKey, rowKey]);
+
+  // const isEditing = React.useCallback((record: RecordType) => {
+  //   return record[rowKey as any] === editingKey.current
+  // }, [editingKey, rowKey])
+
+  // console.log('isEditing', isEditing)
+
   React.useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
@@ -976,9 +990,9 @@ const GridEdit = props => {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
 
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
-        // setEditingKey('')
         setTimeout(() => {
-          setEditingKey('');
+          // setEditingKey('')
+          editingKey.current = '';
         });
         isSelecting.current = false;
         startCell.current = null;
@@ -996,11 +1010,12 @@ const GridEdit = props => {
 
     // document.addEventListener('click', handleClickOutside)
     document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
+    // document.addEventListener('touchstart', handleClickOutside)
+
     return () => {
       // document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
+      // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [id]);
   const triggerDragPaste = pastesArray => {
@@ -1412,12 +1427,13 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
-    if (editingKey && editingKey === record[rowKey]) {
+    if (editingKey && editingKey.current === record[rowKey]) {
       return;
     }
-    if (record[rowKey] !== editingKey && editingKey !== '') {
+    if (record[rowKey] !== editingKey.current && editingKey.current !== '') {
       setTimeout(() => {
-        setEditingKey('');
+        //   setEditingKey('')
+        editingKey.current = '';
       });
     }
 
@@ -1653,8 +1669,9 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
-    if (editingKey) {
-      setEditingKey('');
+    if (editingKey.current) {
+      editingKey.current = '';
+      // setEditingKey('')
     }
     isSelectingRow.current = true;
     rowStart.current = {
@@ -1870,12 +1887,20 @@ const GridEdit = props => {
   const handleEdit = (record, col, editType, e) => {
     onRemoveBorderSelectedCell(selectedCells.current, id);
     setTooltipContent('');
+
     // @ts-ignore
-    setEditingKey(record[rowKey]);
-    setCellEditing({
+    // setEditingKey(record[rowKey])
+    editingKey.current = record[rowKey];
+
+    // setCellEditing({
+    //   row: record,
+    //   column: col
+    // })
+
+    cellEditing.current = {
       row: record,
       column: col
-    });
+    };
     reset();
 
     // const formattedRecord = { ...record };
@@ -1949,7 +1974,7 @@ const GridEdit = props => {
     }
   };
   const handleFocusCell = (rowIndex, colIndex, col, scrollType, e, isTimeout) => {
-    const isEdit = editingKey !== '';
+    const isEdit = editingKey.current !== '';
     const cellEdit = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
     const cell = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
     const updateSelection = () => {
@@ -1993,7 +2018,8 @@ const GridEdit = props => {
           scrollToCell(rowIndex, colIndex, editingCell, 'horizontal');
         }
         if (scrollType === 'vertical' && cellEditable) {
-          setEditingKey('');
+          // setEditingKey('')
+          editingKey.current = '';
           updateSelection();
           scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
           if (e?.key !== 'Tab') {
@@ -2042,13 +2068,13 @@ const GridEdit = props => {
           return {
             'data-row-index': rowNumber,
             onPaste: event => {
-              if (editingKey === '') {
+              if (editingKey.current === '') {
                 handlePaste(record, colIndex + 1, rowNumber, event);
                 event.preventDefault();
               }
             },
             onCopy: e => {
-              if (editingKey === '') {
+              if (editingKey.current === '') {
                 handleCopy(e);
                 e.preventDefault();
               }
@@ -2089,7 +2115,7 @@ const GridEdit = props => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key === 'Control' && event.ctrlKey) {} else {
               if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-                if (record[rowKey] !== editingKey && isEditable(column, record)) {
+                if (record[rowKey] !== editingKey.current && isEditable(column, record)) {
                   // ~~ khi editingKey = ''
                   event.preventDefault();
                   event.stopPropagation();
@@ -2112,7 +2138,7 @@ const GridEdit = props => {
                   if (event.key === 'Enter') {
                     event.preventDefault();
                     event.stopPropagation();
-                    if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
+                    if (editingKey && editingKey.current !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
                       handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                     } else {
                       // // focus cell hiện tại và tắt edit
@@ -2128,7 +2154,7 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'Tab') {
-                if (editingKey) {} else {
+                if (editingKey.current) {} else {
                   if (colIndex + 1 !== visibleCols.length) {
                     handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                   } else {
@@ -2138,7 +2164,7 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
-                if (editingKey !== '') {} else {
+                if (editingKey.current !== '') {} else {
                   handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
               }
@@ -2147,47 +2173,51 @@ const GridEdit = props => {
                   event.stopPropagation();
                   event.preventDefault();
                 } else {
-                  if (editingKey !== '') {} else {
+                  if (editingKey.current !== '') {} else {
                     handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
                   }
                 }
               }
               if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
-                if (isEditing(record) && (getEditType(column, record) === 'treeSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'asyncSelect')) {
+                // if (isEditing(record) && (
+                if (record[rowKey] === editingKey.current && (getEditType(column, record) === 'treeSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'asyncSelect')) {
                   event.stopPropagation();
                 } else {
                   handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                 }
               }
               if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
-                if (isEditing(record) && (getEditType(column, record) === 'asyncSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'treeSelect')) {
+                if (record[rowKey] === editingKey.current && (getEditType(column, record) === 'asyncSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'treeSelect')) {
                   event.stopPropagation();
                 } else {
                   handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
                 }
               }
               if (event.key === 'Delete') {
+                if (!isEditable(column, record)) {}
                 handleDeleteContent();
               }
               if (event.key === 'Escape') {
-                setEditingKey('');
+                // setEditingKey('')
+                editingKey.current = '';
               }
             }
           },
           onPaste: event => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handlePaste(record, colIndex, rowNumber, event);
               event.preventDefault();
             }
           },
           onCopy: e => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handleCopy(e);
               e.preventDefault();
             }
           },
           onDoubleClick: event => {
-            if (!isEditing(record) && record[rowKey] !== editingKey && isEditable(column, record)) {
+            // if (!isEditing(record) && record[rowKey] !== editingKey.current && isEditable(column as any, record)) {
+            if (!(record[rowKey] === editingKey.current) && record[rowKey] !== editingKey.current && isEditable(column, record)) {
               handleEdit(record, column, getEditType(column, record), event);
 
               // onRemoveBgSelectedCell(selectedCells.current, id)
@@ -2212,26 +2242,21 @@ const GridEdit = props => {
             }
           },
           onClick: () => {
-            if (record[rowKey] !== editingKey && editingKey !== '') {
+            if (record[rowKey] !== editingKey.current && editingKey.current !== '') {
               // setEditingKey('')
             } else {
-              if (record[rowKey] !== editingKey) {
+              if (record[rowKey] !== editingKey.current) {
                 onAddBorderSelectedCell(selectedCells.current, id);
               }
-              if (editingKey) {
+              if (editingKey.current) {
                 handleCellClick(rowNumber, record, column);
               }
             }
           },
           // className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column as any, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column as any, record) ? 'disable' : ''}`,
           className: classNames('rc-ui-cell-editable', {
-            'cell-editing': isEditing(record),
-            'cell-editable': !isEditing(record),
-            // selected: isSelectedCell(rangeCells,rowIndex, colIndex),
-            // 'cell-border-bottom': isRangeCell(rangeCells, 'bottom',rowIndex, colIndex),
-            // 'cell-border-right': isRangeCell(rangeCells, 'right',rowIndex, colIndex),
-            // 'cell-border-top': isRangeCell(rangeCells, 'top',rowIndex, colIndex),
-            // 'cell-border-left': isRangeCell(rangeCells, 'left',rowIndex, colIndex),
+            'cell-editing': record[rowKey] === editingKey.current,
+            'cell-editable': !(record[rowKey] === editingKey.current),
             disable: !isEditable(column, record)
           }),
           record,
@@ -2244,8 +2269,9 @@ const GridEdit = props => {
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
           'data-tooltip-id': "tooltip-cell-content",
-          editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
-          cellEditing,
+          // editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column as any, record),
+          editing: record.rowId === editingKey.current && rowEditable?.(record) !== false && isEditable(column, record),
+          cellEditing: cellEditing.current,
           t,
           tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
           style: isPasteDragging ? {
@@ -2260,13 +2286,13 @@ const GridEdit = props => {
             handleClickColHeader(column, colIndex);
           },
           onCopy: e => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handleCopy(e);
               e.preventDefault();
             }
           },
           onPaste: event => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handlePaste(dataSource[0], colIndex, 0, event);
               event.preventDefault();
             }
@@ -2282,18 +2308,12 @@ const GridEdit = props => {
         const cellFormat = getFormat(colFormat, format);
         const rowError = dataErrors.find(it => it.index === rowNumber);
         const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
-
-        // const aaa =  dataErrors.find((it) => column?.field && it[column.field].field === column.field && it.index === rowNumber)
-        // const aaa =  column.field && rowError && rowError[column.field]?.field === column?.field
-
         return /*#__PURE__*/React.createElement("div", {
           className: classNames('ui-rc_cell-content', {
-            // disable: !isEditable(column as any, record)
             isValid: column.field && rowError && rowError[column.field]?.field === column?.field
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: event => {
-            // setTooltipContent(cellError ? cellError.message : renderContent(column as any, value, record, rowIndex, cellFormat))
             setTooltipContent(cellError ? cellError.message : '');
             handleMouseEnter(rowNumber, colIndex, event);
           },
@@ -2304,20 +2324,9 @@ const GridEdit = props => {
               isDragMouse.current = true;
             }
           }
-
-          // onClick={(event) => {
-          //
-          //   handleClickCell(event)
-          //
-          // }}
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, 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) &&
-
-        !isDragMouse.current && /*#__PURE__*/React.createElement("div", {
+        }, renderContent(column, value, record, rowIndex, cellFormat)), !isDragMouse.current && /*#__PURE__*/React.createElement("div", {
           className: 'dragging-point hidden',
           onMouseDown: e => {
             // e.stopPropagation()
@@ -2408,7 +2417,8 @@ const GridEdit = props => {
       items: toolbarItemsBottom ?? [],
       mode: 'scroll',
       onClick: ({}) => {
-        setEditingKey('');
+        editingKey.current = '';
+        // setEditingKey('')
       }
     }));
   };

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

@@ -58,6 +58,7 @@ const Group = props => {
       newExpandedKeys = [...mergedExpandedKeys];
     } else {
       newExpandedKeys = [...mergedExpandedKeys, key];
+      // gọi sự kiện expand
     }
     setInnerExpandedKeys(newExpandedKeys);
   }, [getRowKey, mergedExpandedKeys, dataSource]);