es-grid-template 1.7.36 → 1.7.38

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,7 +352,9 @@ 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;
@@ -363,18 +365,20 @@ 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(() => {});
@@ -394,7 +398,7 @@ const TableContainerEdit = props => {
         onCellPaste.onPasted({
           pasteData: pastedRows,
           copyRows,
-          type: 'onPaste',
+          type: "onPaste",
           data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
@@ -402,7 +406,7 @@ const TableContainerEdit = props => {
         // không có callback
         onCellPaste.onPasted({
           pasteData: pastedRows,
-          type: 'onPaste',
+          type: "onPaste",
           copyRows,
           data: originData,
           pastedColumns: pastedColumnsArray
@@ -458,11 +462,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;
@@ -520,7 +524,7 @@ const TableContainerEdit = props => {
           childData.push({
             id: undefined,
             rowId: newGuid(),
-            parentId: parent[rowKey ?? 'id']
+            parentId: parent[rowKey ?? "id"]
           });
         }
         rowValues.forEach((cellValue, colIndex) => {
@@ -534,7 +538,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] = {
@@ -559,12 +563,14 @@ 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)) {
@@ -573,17 +579,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);
         }
@@ -600,28 +606,32 @@ const TableContainerEdit = props => {
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
   React.useEffect(() => {
     const handleKeyDown = e => {
-      if (e.ctrlKey && e.key === 'c' && startCell && endCell) {
+      console.log({
+        e
+      });
+      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`);
@@ -639,7 +649,7 @@ const TableContainerEdit = props => {
           onBlur?.(dataSource);
         }
         setTimeout(() => {
-          setEditingKey('');
+          setEditingKey("");
           // editingKey.current = ''
         });
         setEndCell(undefined);
@@ -649,12 +659,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]);
@@ -664,24 +674,21 @@ const TableContainerEdit = props => {
       columnVirtualizer.measure();
     });
   }, [columnSizingState, columnVirtualizer]);
-
-  // React.useEffect(() => {
-  //   if (!containerRef.current) return;
-
-  //   const containerWidth = containerRef.current.offsetWidth - 2;
-  //   const totalWidth = table.getTotalSize();
-
-  //   if (totalWidth && totalWidth < containerWidth) {
-  //     const factor = containerWidth / totalWidth;
-
-  //     table.setColumnSizing(
-  //       table.getAllLeafColumns().reduce((acc, col) => {
-  //         acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
-  //         return acc;
-  //       }, {} as Record<string, number>)
-  //     );
-  //   }
-  // }, [table.getTotalSize(), windowSize.innerWidth])
+  React.useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const containerWidth = containerRef.current.offsetWidth - 1;
+    const totalWidth = table.getTotalSize();
+    if (totalWidth && totalWidth < containerWidth) {
+      const factor = containerWidth / totalWidth;
+      table.setColumnSizing(table.getAllLeafColumns().reduce((acc, col) => {
+        acc[col.id] = (col.getSize() || col.columnDef.size || 150) * factor;
+        return acc;
+      }, {}));
+    }
+  }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing]);
+  // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
 
   React.useEffect(() => {
     const totalHeight = minHeight ?? height;
@@ -702,7 +709,7 @@ const TableContainerEdit = props => {
       errors
     }
   } = useForm({
-    mode: 'onChange',
+    mode: "onChange",
     resolver: validate ? yupResolver(validate) : undefined
   });
   const onSubmit = formData => {
@@ -722,7 +729,7 @@ const TableContainerEdit = props => {
         triggerChangeData?.(rs);
       }
     } catch (errInfo) {
-      console.log('Validate Failed:', errInfo);
+      console.log("Validate Failed:", errInfo);
     }
   };
   const handleCellChange = args => {
@@ -737,7 +744,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]) => {
@@ -750,7 +757,7 @@ const TableContainerEdit = props => {
           onCellChange({
             field,
             indexCol,
-            type: 'onChange',
+            type: "onChange",
             value: newState,
             option,
             indexRow,
@@ -764,7 +771,7 @@ const TableContainerEdit = props => {
           onCellChange({
             field,
             indexCol,
-            type: 'onChange',
+            type: "onChange",
             option,
             value: newState,
             indexRow,
@@ -778,7 +785,7 @@ const TableContainerEdit = props => {
         }
       }
     }
-    if (prevState && newState && prevState !== newState && changeType === 'enter') {
+    if (prevState && newState && prevState !== newState && changeType === "enter") {
       onSubmit(record);
     }
   };
@@ -1026,7 +1033,29 @@ const TableContainerEdit = props => {
       const filterData = flattenArray([...originData]);
       const rs = filterData.filter(it => !rowsFocus.includes(it[rowKey]));
       const newDaa = unFlattenData(rs);
-      triggerChangeData?.([...newDaa]);
+      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?.([...newDaa]);
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // không hiện dialog
+        triggerChangeData?.([...newDaa]);
+      }
     }
   }, [originData, rowKey, rowsFocus, triggerChangeData]);
   const handleDeleteAll = React.useCallback(() => {
@@ -1046,17 +1075,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"
             });
           }
         }
@@ -1068,35 +1097,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: () => {
@@ -1104,13 +1133,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: 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"));
             }
           };
         }
@@ -1119,104 +1148,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: () => {
@@ -1224,17 +1253,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: () => {
@@ -1242,17 +1271,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: () => {
@@ -1260,13 +1289,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`));
           }
         };
       }
@@ -1283,20 +1312,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 => {
@@ -1398,10 +1427,9 @@ 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,
@@ -1414,9 +1442,8 @@ 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,
@@ -1429,15 +1456,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;
     }
@@ -1445,6 +1472,7 @@ const TableContainerEdit = props => {
   };
   const handleCellClick = (rowNumber, record, column, rowId, cellValue) => {
     const cellClickCallback = newOptions => {
+      console.log("newOptions", newOptions);
       if (newOptions) {
         const newElem = {
           ...column,
@@ -1455,8 +1483,8 @@ const TableContainerEdit = props => {
             options: newOptions
           }
         };
-        const rrr = updateArrayByKey([...columns], newElem, 'field');
-        triggerChangeColumns?.(rrr, 'click');
+        const rrr = updateArrayByKey([...propsColumns], newElem, "field");
+        triggerChangeColumns?.(rrr, [], "cellClick");
       }
     };
     if (onCellClick) {
@@ -1471,55 +1499,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,
@@ -1570,7 +1598,7 @@ const TableContainerEdit = props => {
       setIsPasting,
       setEndPasteCell,
       setStartPasteCell,
-      // 
+      //
       control,
       // trigger,
       errors,
@@ -1583,7 +1611,8 @@ const TableContainerEdit = props => {
       handleAddMulti,
       dataErrors,
       windowSize,
-      handleCellClick
+      handleCellClick,
+      isFullScreen
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,
@@ -1597,7 +1626,9 @@ const TableContainerEdit = props => {
     contextMenuClick: triggerContextMenuClick,
     contextMenuHidden: contextMenuHidden,
     contextMenuOpen: contextMenuOpen,
-    editAble: editAble,
+    editAble: editAble
+    // editAble={false}
+    ,
     showEmptyText: showEmptyText,
     summary: summary,
     dataSource: dataSource,
@@ -1612,30 +1643,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],
@@ -1648,11 +1679,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`
   }))));
 };