es-grid-template 1.7.38 → 1.7.39

package/es/table-component/TableContainerEdit.js

@@ -4,7 +4,7 @@ import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findIt
 // sumSize,
 unFlattenData, updateArrayByKey, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useForm } from "react-hook-form";
+import { useForm } from 'react-hook-form';
 import { Button, Modal, Typography, Dropdown } from "antd";
 import Pagination from "rc-master-ui/es/pagination";
 import { numericFormatter, removeNumericFormat } from "react-numeric-component";
@@ -122,7 +122,7 @@ const TableContainerEdit = props => {
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
   const topToolbarRef = React.useRef(null);
-  const childrenColumnName = "children";
+  const childrenColumnName = 'children';
 
   // const visibleColumns = table.getVisibleLeafColumns()
 
@@ -133,73 +133,73 @@ const TableContainerEdit = props => {
 
   const defaultContext = React.useMemo(() => {
     return [{
-      key: "INSERT_BEFORE",
+      key: 'INSERT_BEFORE',
       // label: 'Thêm dòng bên trên',
       // label: `${t ? t(locale?.add_rows_before ?? 'Add rows before') : 'Add rows before'}`,
-      label: locale?.add_rows_before ?? "Add rows before",
+      label: locale?.add_rows_before ?? 'Add rows before',
       icon: /*#__PURE__*/React.createElement(Plus, {
         fontSize: 14
       }),
       children: [{
-        parentKey: "INSERT_BEFORE",
-        key: "INSERT_BEFORE_1",
-        label: locale?.add_1 ?? "Add 1 rows",
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_1',
+        label: locale?.add_1 ?? 'Add 1 rows',
         row: 1
       }, {
-        parentKey: "INSERT_BEFORE",
-        key: "INSERT_BEFORE_10",
-        label: locale?.add_10 ?? "Add 10 rows",
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_10',
+        label: locale?.add_10 ?? 'Add 10 rows',
         row: 10
       }, {
-        parentKey: "INSERT_BEFORE",
-        key: "INSERT_BEFORE_50",
-        label: locale?.add_50 ?? "Add 50 rows",
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_50',
+        label: locale?.add_50 ?? 'Add 50 rows',
         row: 50
       }, {
-        parentKey: "INSERT_BEFORE",
-        key: "INSERT_BEFORE_100",
-        label: locale?.add_100 ?? "Add 100 rows",
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_100',
+        label: locale?.add_100 ?? 'Add 100 rows',
         row: 100
       }, {
-        parentKey: "INSERT_BEFORE",
-        key: "INSERT_BEFORE_ADV",
-        label: locale?.custom ?? "Custom"
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_ADV',
+        label: locale?.custom ?? 'Custom'
       }]
     }, {
-      key: "INSERT_AFTER",
-      label: locale?.add_rows_after ?? "Add rows after",
+      key: 'INSERT_AFTER',
+      label: locale?.add_rows_after ?? 'Add rows after',
       icon: /*#__PURE__*/React.createElement(Plus, {
         fontSize: 14
       }),
       children: [{
-        parentKey: "INSERT_AFTER",
-        key: "INSERT_AFTER_1",
-        label: locale?.add_1 ?? "Add 1 rows",
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_1',
+        label: locale?.add_1 ?? 'Add 1 rows',
         row: 1
       }, {
-        parentKey: "INSERT_AFTER",
-        key: "INSERT_AFTER_10",
-        label: locale?.add_10 ?? "Add 10 rows",
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_10',
+        label: locale?.add_10 ?? 'Add 10 rows',
         row: 10
       }, {
-        parentKey: "INSERT_AFTER",
-        key: "INSERT_AFTER_50",
-        label: locale?.add_50 ?? "Add 50 rows",
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_50',
+        label: locale?.add_50 ?? 'Add 50 rows',
         row: 50
       }, {
-        parentKey: "INSERT_AFTER",
-        key: "INSERT_AFTER_100",
-        label: locale?.add_100 ?? "Add 100 rows",
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_100',
+        label: locale?.add_100 ?? 'Add 100 rows',
         row: 100
       }, {
-        parentKey: "INSERT_AFTER",
-        key: "INSERT_AFTER_ADV",
-        label: locale?.custom ?? "Custom"
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_ADV',
+        label: locale?.custom ?? 'Custom'
       }]
     }, {
-      key: "INSERT_CHILDREN",
+      key: 'INSERT_CHILDREN',
       // label: 'Insert item children',
-      label: locale?.add_children ?? "Add children",
+      label: locale?.add_children ?? 'Add children',
       icon: /*#__PURE__*/React.createElement(Plus, {
         fontSize: 14
       })
@@ -235,14 +235,14 @@ const TableContainerEdit = props => {
       //   }
       // ]
     }, {
-      key: "DELETE_CONTENT",
-      label: locale?.delete_content ?? "Delete content",
+      key: 'DELETE_CONTENT',
+      label: locale?.delete_content ?? 'Delete content',
       icon: /*#__PURE__*/React.createElement(Trash2, {
         fontSize: 14
       })
     }, {
-      key: "DELETE_ROWS",
-      label: locale?.delete_rows ?? "Delete rows",
+      key: 'DELETE_ROWS',
+      label: locale?.delete_rows ?? 'Delete rows',
       icon: /*#__PURE__*/React.createElement(Trash2, {
         fontSize: 14
       })
@@ -250,20 +250,20 @@ const TableContainerEdit = props => {
   }, [locale]);
   const itemsAdd = React.useMemo(() => {
     return [{
-      key: "10",
-      label: `10 ${t ? t("rows") : "rows"}`
+      key: '10',
+      label: `10 ${t ? t('rows') : 'rows'}`
     }, {
-      key: "50",
-      label: `50 ${t ? t("rows") : "rows"}`
+      key: '50',
+      label: `50 ${t ? t('rows') : 'rows'}`
     }, {
-      key: "100",
-      label: `100 ${t ? t("rows") : "rows"}`
+      key: '100',
+      label: `100 ${t ? t('rows') : 'rows'}`
     }];
   }, [t]);
   const contextMenuItems = React.useMemo(() => {
     const a = showDefaultContext !== false ? [...defaultContext] : [];
     const b = propsContext && propsContext.length > 0 ? [...propsContext, {
-      type: "divider"
+      type: 'divider'
     }] : [];
     return [...b, ...a];
   }, [defaultContext, propsContext, showDefaultContext]);
@@ -296,7 +296,7 @@ const TableContainerEdit = props => {
     //   return element?.getBoundingClientRect().width;
     // },
 
-    measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? element => element?.getBoundingClientRect().height : undefined,
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
     overscan: 0 //how many columns to render on each side off screen each way (adjust this for performance)
   });
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -318,7 +318,7 @@ const TableContainerEdit = props => {
     virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
     // virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
   }
-  const [editingKey, setEditingKey] = React.useState("");
+  const [editingKey, setEditingKey] = React.useState('');
   const [rangeState, setRangeState] = React.useState({
     startRowIndex: undefined,
     endRowIndex: undefined,
@@ -352,9 +352,7 @@ const TableContainerEdit = props => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
   const copySelectionToClipboard = React.useCallback(() => {
-    if (!startCell || !endCell) {
-      return;
-    }
+    if (!startCell || !endCell) return;
 
     // const allRows = table.getRowModel().rows;
     const allRows = table.getRowModel().flatRows;
@@ -365,20 +363,18 @@ const TableContainerEdit = props => {
     const dataToCopy = [];
     rowIds.forEach(rowId => {
       const row = allRows.find(r => r.id === rowId);
-      if (!row) {
-        return;
-      }
+      if (!row) return;
       const rowData = [];
       colIds.forEach(colId => {
         const cellll = row.getVisibleCells().find(c => c.column.id === colId);
         const value = cellll?.getValue();
-        rowData.push(value !== undefined ? String(value) : "");
+        rowData.push(value !== undefined ? String(value) : '');
       });
       dataToCopy.push(rowData);
     });
 
     // Convert to TSV string
-    const tsv = dataToCopy.map(row => row.join("\t")).join("\n");
+    const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
 
     // Copy to clipboard
     navigator.clipboard.writeText(tsv).then(() => {});
@@ -398,7 +394,7 @@ const TableContainerEdit = props => {
         onCellPaste.onPasted({
           pasteData: pastedRows,
           copyRows,
-          type: "onPaste",
+          type: 'onPaste',
           data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
@@ -406,7 +402,7 @@ const TableContainerEdit = props => {
         // không có callback
         onCellPaste.onPasted({
           pasteData: pastedRows,
-          type: "onPaste",
+          type: 'onPaste',
           copyRows,
           data: originData,
           pastedColumns: pastedColumnsArray
@@ -462,11 +458,11 @@ const TableContainerEdit = props => {
           }
           const columnTarget = allCols[targetCol];
           const columnOri = columnTarget.columnDef.meta ?? {};
-          const isEdit = typeof columnOri?.editEnable === "function" ? columnOri.editEnable(newData[targetRow]) : columnOri.editEnable;
+          const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(newData[targetRow]) : columnOri.editEnable;
           if (isEdit) {
             const columnKey = allCols[targetCol].id;
-            if (columnOri.type === "number" && isFormattedNumber(cellValue.trim())) {
-              const colFormat = typeof columnOri.format === "function" ? columnOri.format(record) : columnOri.format;
+            if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
+              const colFormat = typeof columnOri.format === 'function' ? columnOri.format(record) : columnOri.format;
               const valuePasteFormat = detectSeparators(cellValue.trim());
               const cellFormat = getFormat(colFormat, format);
               const thousandSeparator = valuePasteFormat?.thousandSeparator ?? cellFormat?.thousandSeparator;
@@ -524,7 +520,7 @@ const TableContainerEdit = props => {
           childData.push({
             id: undefined,
             rowId: newGuid(),
-            parentId: parent[rowKey ?? "id"]
+            parentId: parent[rowKey ?? 'id']
           });
         }
         rowValues.forEach((cellValue, colIndex) => {
@@ -538,7 +534,7 @@ const TableContainerEdit = props => {
           // const isEdit = typeof columnTarget.editEnable === 'function' ? columnTarget.editEnable(childData[targetRow]) : columnTarget.editEnable
 
           const columnOri = columnTarget.columnDef.meta ?? {};
-          const isEdit = typeof columnOri?.editEnable === "function" ? columnOri.editEnable(childData[targetRow]) : columnOri.editEnable;
+          const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(childData[targetRow]) : columnOri.editEnable;
           if (isEdit) {
             const columnKey = allCols[targetCol].id;
             childData[targetRow] = {
@@ -563,14 +559,12 @@ const TableContainerEdit = props => {
     }
   }, [dataSource, format, onCellPaste?.maxRowsPaste, originData, rowKey, startCell, table, triggerPaste]);
   const handlePasteToTable = React.useCallback(pasteData => {
-    if (!startCell) {
-      return;
-    }
+    if (!startCell) return;
 
     // const pastedRows = pasted.trim().split('\n').map(row => row.split('\t'));
 
     // Chuyển đổi dữ liệu từ clipboard thành mảng
-    const rowsPasted = pasteData.split("\n").filter(row => row !== "").map(row =>
+    const rowsPasted = pasteData.split("\n").filter(row => row !== '').map(row =>
     // const rows = pasteData.split("\n").map((row: any) =>
     row.replace(/\r/g, "").split("\t"));
     if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
@@ -579,17 +573,17 @@ const TableContainerEdit = props => {
       Modal.confirm({
         content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, {
           style: {
-            marginBottom: ".25rem",
+            marginBottom: '.25rem',
             fontSize: 14
           }
         }, "D\u1EEF li\u1EC7u sao ch\xE9p v\u01B0\u1EE3t qu\xE1 s\u1ED1 d\xF2ng cho ph\xE9p (500 d\xF2ng).Ph\u1EA7n m\u1EC1n s\u1EBD ch\u1EC9 l\u1EA5y 500 d\xF2ng \u0111\u1EA7u ti\xEAn."), /*#__PURE__*/React.createElement(Title, {
           level: 5,
           style: {
-            marginTop: ".75rem"
+            marginTop: '.75rem'
           }
         }, "B\u1EA1n c\xF3 mu\u1ED1n ti\u1EBFp t\u1EE5c sao ch\xE9p kh\xF4ng?")),
         centered: true,
-        className: "be-popup-container",
+        className: 'be-popup-container',
         onOk: () => {
           handlePasted(rowsPasted);
         }
@@ -606,32 +600,28 @@ const TableContainerEdit = props => {
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
   React.useEffect(() => {
     const handleKeyDown = e => {
-      console.log({
-        e
-      });
-      if (e.ctrlKey && e.key === "c" && startCell && endCell) {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell) {
         e.preventDefault();
         copySelectionToClipboard();
       }
     };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
   }, [startCell, endCell, table, copySelectionToClipboard]);
   React.useEffect(() => {
     const handlePaste = e => {
       if (startCell && !editingKey) {
         e.preventDefault(); // Chặn hành vi mặc định
-        const clipboardText = e.clipboardData?.getData("text/plain") ?? "";
+        const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
         handlePasteToTable(clipboardText);
       }
     };
-    window.addEventListener("paste", handlePaste);
-    return () => window.removeEventListener("paste", handlePaste);
+    window.addEventListener('paste', handlePaste);
+    return () => window.removeEventListener('paste', handlePaste);
   }, [startCell, endCell, table, handlePasteToTable, editingKey]);
   React.useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
-      console.log("event", event);
       const container = document.querySelector(".be-popup-container");
       const containerContextMenu = document.querySelector(".popup-context-menu");
       const tableBody = document.querySelector(`#${id} .ui-rc-grid-tbody`);
@@ -649,7 +639,7 @@ const TableContainerEdit = props => {
           onBlur?.(dataSource);
         }
         setTimeout(() => {
-          setEditingKey("");
+          setEditingKey('');
           // editingKey.current = ''
         });
         setEndCell(undefined);
@@ -659,12 +649,12 @@ const TableContainerEdit = props => {
     };
 
     // document.addEventListener('click', handleClickOutside)
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
     // document.addEventListener('touchstart', handleClickOutside)
 
     return () => {
       // document.removeEventListener('click', handleClickOutside)
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener('mousedown', handleClickOutside);
       // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [dataSource, editingKey, id, onBlur]);
@@ -675,9 +665,7 @@ const TableContainerEdit = props => {
     });
   }, [columnSizingState, columnVirtualizer]);
   React.useEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
+    if (!containerRef.current) return;
     const containerWidth = containerRef.current.offsetWidth - 1;
     const totalWidth = table.getTotalSize();
     if (totalWidth && totalWidth < containerWidth) {
@@ -709,7 +697,7 @@ const TableContainerEdit = props => {
       errors
     }
   } = useForm({
-    mode: "onChange",
+    mode: 'onChange',
     resolver: validate ? yupResolver(validate) : undefined
   });
   const onSubmit = formData => {
@@ -729,7 +717,7 @@ const TableContainerEdit = props => {
         triggerChangeData?.(rs);
       }
     } catch (errInfo) {
-      console.log("Validate Failed:", errInfo);
+      console.log('Validate Failed:', errInfo);
     }
   };
   const handleCellChange = args => {
@@ -744,7 +732,7 @@ const TableContainerEdit = props => {
       indexRow,
       key
     } = args;
-    if (changeType === "blur") {
+    if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
         const callbackRecord = callbackData;
         Object.entries(callbackRecord).forEach(([name, value]) => {
@@ -757,7 +745,7 @@ const TableContainerEdit = props => {
           onCellChange({
             field,
             indexCol,
-            type: "onChange",
+            type: 'onChange',
             value: newState,
             option,
             indexRow,
@@ -771,7 +759,7 @@ const TableContainerEdit = props => {
           onCellChange({
             field,
             indexCol,
-            type: "onChange",
+            type: 'onChange',
             option,
             value: newState,
             indexRow,
@@ -785,7 +773,7 @@ const TableContainerEdit = props => {
         }
       }
     }
-    if (prevState && newState && prevState !== newState && changeType === "enter") {
+    if (prevState && newState && prevState !== newState && changeType === 'enter') {
       onSubmit(record);
     }
   };
@@ -822,9 +810,12 @@ const TableContainerEdit = props => {
     // const duplicatedItems = rowsFocus.map(index => ({ ...newData[index], rowId: newGuid(), id: undefined, isDuplicate: true }))
 
     const duplicatedItem = table.getRowModel().flatRows.find(it => it.id === focusedCell?.rowId);
-    setStartCell(focusedCell);
-    setEndCell(focusedCell);
-    setRangeState(getSelectedCellMatrix(table, focusedCell, focusedCell));
+
+    // setStartCell(focusedCell)
+    // setEndCell(focusedCell)
+
+    // setRangeState(getSelectedCellMatrix(table, focusedCell, focusedCell))
+
     const duplicatedItems = [{
       ...duplicatedItem?.original,
       rowId: newGuid(),
@@ -848,6 +839,9 @@ const TableContainerEdit = props => {
   // thêm n dòng bên trên
   const handleInsertBefore = React.useCallback((item, n) => {
     const defaultRowValue = getDefaultValue(defaultValue);
+    setStartCell(focusedCell);
+    setEndCell(focusedCell);
+    setRangeState(getSelectedCellMatrix(table, focusedCell, focusedCell));
 
     // const record: any = table.getRowModel().rows.find((it) => it.id === rowsFocus[rowsFocus.length - 1])?.original
     const record = table.getRowModel().flatRows.find(it => it.id === rowsFocus[rowsFocus.length - 1])?.original;
@@ -904,7 +898,7 @@ const TableContainerEdit = props => {
         triggerChangeData?.(newDataSource);
       }
     }
-  }, [defaultValue, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
+  }, [defaultValue, focusedCell, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
 
   //thêm 1 dòng bên dưới
   const handleInsertAfter = React.useCallback((item, n) => {
@@ -1035,16 +1029,16 @@ const TableContainerEdit = props => {
       const newDaa = unFlattenData(rs);
       if (commandSettings && commandSettings.confirmDialog) {
         MySwal.fire({
-          title: t ? t("Confirm") : "Confirm",
-          text: t ? t("Do you want to delete item?") : "Do you want to delete item?",
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
           // icon: 'warning',
           allowOutsideClick: false,
           showCancelButton: true,
-          confirmButtonText: t ? t("Delete") : "Delete",
-          cancelButtonText: t ? t("Cancel") : "Cancel",
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
           customClass: {
-            confirmButton: "be-button btn-primary",
-            cancelButton: "be-button btn-danger ms-1"
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
           },
           buttonsStyling: false
         }).then(async result => {
@@ -1053,14 +1047,41 @@ const TableContainerEdit = props => {
           } else if (result.dismiss === MySwal.DismissReason.cancel) {}
         });
       } else {
-        // không hiện dialog
+        // không hiện dialog  
         triggerChangeData?.([...newDaa]);
       }
     }
-  }, [originData, rowKey, rowsFocus, triggerChangeData]);
-  const handleDeleteAll = React.useCallback(() => {
-    triggerChangeData?.([]);
-  }, [triggerChangeData]);
+  }, [commandSettings, originData, rowKey, rowsFocus, t, triggerChangeData]);
+  const handleDeleteAll = React.useCallback(item => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (commandSettings && commandSettings.confirmDialog) {
+        MySwal.fire({
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
+          // icon: 'warning',
+          allowOutsideClick: false,
+          showCancelButton: true,
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
+          customClass: {
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
+          },
+          buttonsStyling: false
+        }).then(async result => {
+          if (result.value) {
+            triggerChangeData?.([]);
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        triggerChangeData?.([]);
+      }
+    }
+  }, [commandSettings, t, triggerChangeData]);
   const handleDeleteContent = () => {
     if (startCell && endCell) {
       const tmpData = flattenArray([...dataSource]);
@@ -1075,17 +1096,17 @@ const TableContainerEdit = props => {
           const column = table.getVisibleFlatColumns().find(it => it.id === colId)?.columnDef.meta;
           const columnIndex = table.getVisibleFlatColumns().findIndex(it => it.id === colId);
           if (isEditable(column, row)) {
-            updatedRow[colId] = "";
+            updatedRow[colId] = '';
             handleCellChange({
               key: row[rowKey],
               field: column.field ?? column.dataIndex,
               record: updatedRow,
               prevState: row[column.field],
-              newState: "",
-              option: "",
+              newState: '',
+              option: '',
               indexCol: columnIndex,
               indexRow: index,
-              type: "blur"
+              type: 'blur'
             });
           }
         }
@@ -1097,35 +1118,35 @@ const TableContainerEdit = props => {
   };
   const toolbarItemsBottom = React.useMemo(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
-      return toolbarItems?.filter(it => it.position === "Bottom" && it.visible !== false && it.key !== "DUPLICATE" && it.key !== "INSERT_BEFORE" && it.key !== "INSERT_AFTER" && it.key !== "DELETE_ROWS" && it.key !== "INSERT_CHILDREN").map(item => {
-        if (item.key === "ADD") {
+      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
+        if (item.key === 'ADD') {
           return {
             ...item,
             template: () => {
-              return /*#__PURE__*/React.createElement(Fragment, null, item.key === "ADD" && /*#__PURE__*/React.createElement("div", {
+              return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
                 className: classNames(`be-toolbar-item`, item?.className)
               }, /*#__PURE__*/React.createElement(Dropdown.Button, {
-                overlayClassName: "be-popup-container",
-                trigger: ["click"],
+                overlayClassName: 'be-popup-container',
+                trigger: ['click'],
                 style: {
-                  color: "#28c76f",
-                  borderColor: "#28c76f"
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
                 },
-                className: "toolbar-button toolbar-dropdown-button",
+                className: 'toolbar-button toolbar-dropdown-button',
                 menu: {
                   items: itemsAdd,
                   onClick: e => handleAddMulti(item, Number(e.key))
                 }
               }, /*#__PURE__*/React.createElement("span", {
                 style: {
-                  color: "#28c76f"
+                  color: '#28c76f'
                 },
                 onClick: () => handleAddMulti(item, 1)
-              }, item.label ? t ? t(item.label) : item.label : t ? t("Add item") : "Add item"))));
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
             }
           };
         }
-        if (item.key === "DELETE") {
+        if (item.key === 'DELETE') {
           return {
             ...item,
             template: () => {
@@ -1133,13 +1154,13 @@ const TableContainerEdit = props => {
                 className: classNames(`be-toolbar-item`, item?.className)
               }, /*#__PURE__*/React.createElement(Button, {
                 style: {
-                  color: "#eb4619",
-                  borderColor: "#eb4619"
+                  color: '#eb4619',
+                  borderColor: '#eb4619'
                 },
-                variant: "outlined",
-                onClick: handleDeleteAll,
+                variant: 'outlined',
+                onClick: () => handleDeleteAll(item),
                 className: "d-flex toolbar-button"
-              }, item.label ? t ? t(item.label) : item.label : t ? t("Delete all item") : "Delete all item"));
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
             }
           };
         }
@@ -1148,104 +1169,104 @@ const TableContainerEdit = props => {
         };
       });
     }
-    return toolbarItems?.filter(it => it.position === "Bottom" && it.visible !== false).map(item => {
-      if (item.key === "ADD") {
+    return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
+      if (item.key === 'ADD') {
         return {
           ...item,
           template: () => {
-            return /*#__PURE__*/React.createElement(Fragment, null, item.key === "ADD" && /*#__PURE__*/React.createElement("div", {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
               className: classNames(`be-toolbar-item`, item?.className)
             }, /*#__PURE__*/React.createElement(Dropdown.Button, {
-              overlayClassName: "be-popup-container",
+              overlayClassName: 'be-popup-container',
               style: {
-                color: "#28c76f",
-                borderColor: "#28c76f"
+                color: '#28c76f',
+                borderColor: '#28c76f'
               },
-              className: "toolbar-button toolbar-dropdown-button",
+              className: 'toolbar-button toolbar-dropdown-button',
               menu: {
                 items: itemsAdd,
                 onClick: e => handleAddMulti(item, Number(e.key))
               }
             }, /*#__PURE__*/React.createElement("span", {
               style: {
-                color: "#28c76f"
+                color: '#28c76f'
               },
               onClick: () => handleAddMulti(item, 1)
-            }, item.label ? t ? t(item.label) : item.label : t ? t("Add item") : "Add item"))));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
           }
         };
       }
-      if (item.key === "DUPLICATE") {
+      if (item.key === 'DUPLICATE') {
         return {
           ...item,
           template: () => {
-            return /*#__PURE__*/React.createElement(Fragment, null, item.key === "DUPLICATE" && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
               className: classNames(`be-toolbar-item`, item?.className)
             }, /*#__PURE__*/React.createElement(Button, {
               style: {
-                color: "#28c76f",
-                borderColor: "#28c76f"
+                color: '#28c76f',
+                borderColor: '#28c76f'
               },
-              variant: "outlined",
+              variant: 'outlined',
               onClick: handleDuplicate,
               className: "d-flex toolbar-button"
-            }, item.label ? t ? t(item.label) : item.label : t ? t("Duplicate") : "Duplicate")));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
           }
         };
       }
-      if (item.key === "INSERT_BEFORE") {
+      if (item.key === 'INSERT_BEFORE') {
         return {
           ...item,
           template: () => {
             return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
               className: classNames(`be-toolbar-item`, item?.className)
             }, /*#__PURE__*/React.createElement(Dropdown.Button, {
-              overlayClassName: "be-popup-container",
+              overlayClassName: 'be-popup-container',
               style: {
-                color: "#28c76f",
-                borderColor: "#28c76f"
+                color: '#28c76f',
+                borderColor: '#28c76f'
               },
-              className: "toolbar-button toolbar-dropdown-button",
+              className: 'toolbar-button toolbar-dropdown-button',
               menu: {
                 items: itemsAdd,
                 onClick: e => handleInsertBefore(item, Number(e.key))
               }
             }, /*#__PURE__*/React.createElement("span", {
               style: {
-                color: "#28c76f"
+                color: '#28c76f'
               },
               onClick: () => handleInsertBefore(item, 1)
-            }, item.label ? t ? t(item.label) : item.label : t ? t("Insert item before") : "Insert item before"))));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
           }
         };
       }
-      if (item.key === "INSERT_AFTER") {
+      if (item.key === 'INSERT_AFTER') {
         return {
           ...item,
           template: () => {
             return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
               className: classNames(`be-toolbar-item`, item?.className)
             }, /*#__PURE__*/React.createElement(Dropdown.Button, {
-              overlayClassName: "be-popup-container",
+              overlayClassName: 'be-popup-container',
               style: {
-                color: "#28c76f",
-                borderColor: "#28c76f"
+                color: '#28c76f',
+                borderColor: '#28c76f'
               },
-              className: "toolbar-button toolbar-dropdown-button",
+              className: 'toolbar-button toolbar-dropdown-button',
               menu: {
                 items: itemsAdd,
                 onClick: e => handleInsertAfter(item, Number(e.key))
               }
             }, /*#__PURE__*/React.createElement("span", {
               style: {
-                color: "#28c76f"
+                color: '#28c76f'
               },
               onClick: () => handleInsertAfter(item, 1)
-            }, item.label ? t ? t(item.label) : item.label : t ? t("Insert item after") : "Insert item after"))));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
           }
         };
       }
-      if (item.key === "INSERT_CHILDREN") {
+      if (item.key === 'INSERT_CHILDREN') {
         return {
           ...item,
           template: () => {
@@ -1253,17 +1274,17 @@ const TableContainerEdit = props => {
               className: classNames(`be-toolbar-item`, item?.className)
             }, /*#__PURE__*/React.createElement(Button, {
               style: {
-                color: "#28c76f",
-                borderColor: "#28c76f"
+                color: '#28c76f',
+                borderColor: '#28c76f'
               },
-              variant: "outlined",
+              variant: 'outlined',
               onClick: () => handleInsertChild(item),
               className: "d-flex toolbar-button"
-            }, item.label ? t ? t(item.label) : item.label : t ? t("Insert item children") : "Insert item children")));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
           }
         };
       }
-      if (item.key === "DELETE") {
+      if (item.key === 'DELETE') {
         return {
           ...item,
           template: () => {
@@ -1271,17 +1292,17 @@ const TableContainerEdit = props => {
               className: classNames(`be-toolbar-item`, item?.className)
             }, /*#__PURE__*/React.createElement(Button, {
               style: {
-                color: "#eb4619",
-                borderColor: "#eb4619"
+                color: '#eb4619',
+                borderColor: '#eb4619'
               },
-              variant: "outlined",
+              variant: 'outlined',
               onClick: handleDeleteAll,
               className: "d-flex toolbar-button"
-            }, item.label ? t ? t(item.label) : item.label : t ? t("Delete all item") : "Delete all item"));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
           }
         };
       }
-      if (item.key === "DELETE_ROWS") {
+      if (item.key === 'DELETE_ROWS') {
         return {
           ...item,
           template: () => {
@@ -1289,13 +1310,13 @@ const TableContainerEdit = props => {
               className: classNames(`be-toolbar-item`, item?.className)
             }, /*#__PURE__*/React.createElement(Button, {
               style: {
-                color: "#eb4619",
-                borderColor: "#eb4619"
+                color: '#eb4619',
+                borderColor: '#eb4619'
               },
-              variant: "outlined",
+              variant: 'outlined',
               onClick: () => handleDeleteRows(item),
               className: "d-flex toolbar-button"
-            }, t ? `${t("Delete")} ${rowsFocus.length} ${t("row")}` : `Delete ${rowsFocus.length} item`));
+            }, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
           }
         };
       }
@@ -1312,20 +1333,20 @@ const TableContainerEdit = props => {
       index
     } = args;
     const tmpData = [...dataSource];
-    if (idCommand === "DELETE") {
+    if (idCommand === 'DELETE') {
       // bật modal confirm
       if (commandSettings && commandSettings.confirmDialog) {
         MySwal.fire({
-          title: t ? t("Confirm") : "Confirm",
-          text: t ? t("Do you want to delete item?") : "Do you want to delete item?",
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
           // icon: 'warning',
           allowOutsideClick: false,
           showCancelButton: true,
-          confirmButtonText: t ? t("Delete") : "Delete",
-          cancelButtonText: t ? t("Cancel") : "Cancel",
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
           customClass: {
-            confirmButton: "be-button btn-primary",
-            cancelButton: "be-button btn-danger ms-1"
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
           },
           buttonsStyling: false
         }).then(async result => {
@@ -1427,9 +1448,10 @@ const TableContainerEdit = props => {
     }
   };
   const triggerContextMenuClick = args => {
-    if (args.item?.parentKey && args.item.parentKey === "INSERT_BEFORE") {
-      if (args.item.key === "INSERT_BEFORE_ADV") {
+    if (args.item?.parentKey && args.item.parentKey === 'INSERT_BEFORE') {
+      if (args.item.key === 'INSERT_BEFORE_ADV') {
         // mở Modal
+
         // setOpenModalAddRow((prev) => (
         //   {
         //     ...prev,
@@ -1442,8 +1464,9 @@ const TableContainerEdit = props => {
       }
       return;
     }
-    if (args.item?.parentKey && args.item.parentKey === "INSERT_AFTER") {
-      if (args.item.key === "INSERT_AFTER_ADV") {
+    if (args.item?.parentKey && args.item.parentKey === 'INSERT_AFTER') {
+      if (args.item.key === 'INSERT_AFTER_ADV') {
+
         // setOpenModalAddRow((prev) => (
         //   {
         //     ...prev,
@@ -1456,15 +1479,15 @@ const TableContainerEdit = props => {
       }
       return;
     }
-    if (args.item.key === "INSERT_CHILDREN") {
+    if (args.item.key === 'INSERT_CHILDREN') {
       handleInsertChild(args.item);
       return;
     }
-    if (args.item.key === "DELETE_ROWS") {
+    if (args.item.key === 'DELETE_ROWS') {
       handleDeleteRows(args.item);
       return;
     }
-    if (args.item.key === "DELETE_CONTENT") {
+    if (args.item.key === 'DELETE_CONTENT') {
       handleDeleteContent();
       return;
     }
@@ -1472,7 +1495,6 @@ const TableContainerEdit = props => {
   };
   const handleCellClick = (rowNumber, record, column, rowId, cellValue) => {
     const cellClickCallback = newOptions => {
-      console.log("newOptions", newOptions);
       if (newOptions) {
         const newElem = {
           ...column,
@@ -1483,7 +1505,7 @@ const TableContainerEdit = props => {
             options: newOptions
           }
         };
-        const rrr = updateArrayByKey([...propsColumns], newElem, "field");
+        const rrr = updateArrayByKey([...propsColumns], newElem, 'field');
         triggerChangeColumns?.(rrr, [], "cellClick");
       }
     };
@@ -1499,55 +1521,55 @@ const TableContainerEdit = props => {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
-    //  id={id}
+    ref: containerRef,
+    id: id
   }, (showToolbar !== false || fullScreen !== false || showColumnChoose) && /*#__PURE__*/React.createElement("div", {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      gap: ".75rem"
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
-      overflow: "hidden"
+      overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== "Bottom"),
-    mode: "scroll"
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
   })), /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      gap: ".75rem"
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
     }
-  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === "topRight" && /*#__PURE__*/React.createElement(Pagination, _extends({
+  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
     showSizeChanger: true,
     responsive: true,
-    size: "small",
-    rootClassName: "top-pagination",
+    size: 'small',
+    rootClassName: 'top-pagination',
     showTotal: (total, range) =>
     // @ts-ignore
-    `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? "items") : "items"}`
-  }, pagination)), typeof actionTemplate === "function" ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+    `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t("Minimized") : "Minimized"
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
   }) : /*#__PURE__*/React.createElement(Maximize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t("Full screen") : "Full screen"
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
   })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
     columns: columns,
     originColumns: propsColumns,
@@ -1598,7 +1620,7 @@ const TableContainerEdit = props => {
       setIsPasting,
       setEndPasteCell,
       setStartPasteCell,
-      //
+      // 
       control,
       // trigger,
       errors,
@@ -1611,8 +1633,7 @@ const TableContainerEdit = props => {
       handleAddMulti,
       dataErrors,
       windowSize,
-      handleCellClick,
-      isFullScreen
+      handleCellClick
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,
@@ -1626,9 +1647,7 @@ const TableContainerEdit = props => {
     contextMenuClick: triggerContextMenuClick,
     contextMenuHidden: contextMenuHidden,
     contextMenuOpen: contextMenuOpen,
-    editAble: editAble
-    // editAble={false}
-    ,
+    editAble: editAble,
     showEmptyText: showEmptyText,
     summary: summary,
     dataSource: dataSource,
@@ -1643,30 +1662,30 @@ const TableContainerEdit = props => {
   }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "ui-rc-toolbar-bottom"
+    className: 'ui-rc-toolbar-bottom'
     // style={{ border: '0 1px 1px 1px solid #e0e0e0' }}
     ,
     style: {
-      borderBottom: "1px solid #e0e0e0",
-      borderRight: "1px solid #e0e0e0",
-      borderLeft: "1px solid #e0e0e0"
+      borderBottom: '1px solid #e0e0e0',
+      borderRight: '1px solid #e0e0e0',
+      borderLeft: '1px solid #e0e0e0'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
     style: {
-      width: "100%"
+      width: '100%'
     },
     items: toolbarItemsBottom ?? [],
-    mode: "scroll",
+    mode: 'scroll',
     onClick: ({}) => {
-      setEditingKey("");
+      setEditingKey('');
     }
   })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}
   , _extends({}, pagination, {
-    rootClassName: "pagination-template",
+    rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,
-    size: "small",
+    size: 'small',
     total: pagination.total,
     pageSize: pagination.onChange ? pagination?.pageSize : table.getState().pagination.pageSize,
     pageSizeOptions: [20, 50, 100, 1000, 10000],
@@ -1679,11 +1698,11 @@ const TableContainerEdit = props => {
       }
     },
     showTotal: (total, range) => `${numericFormatter((range[0] ?? 0).toString(), {
-      thousandSeparator: "."
+      thousandSeparator: '.'
     })}-${numericFormatter((range[1] ?? 0).toString(), {
-      thousandSeparator: "."
+      thousandSeparator: '.'
     })} / ${numericFormatter((total ?? 0).toString(), {
-      thousandSeparator: "."
+      thousandSeparator: '.'
     })} items`
   }))));
 };