es-grid-template 1.3.0 → 1.3.2

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import classNames from "classnames";
 import { Button, Dropdown, Form } from "antd";
@@ -13,19 +13,22 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 // import Command from "../Command";
 
 import { Toolbar, ConfigProvider } from "rc-master-ui";
 import classnames from "classnames";
 import useMergedState from "rc-util/es/hooks/useMergedState";
+import { Plus, Trash2 } from "becoxy-icons";
+// import {ContextInfo, ContextMenuItem} from "../type";
 // import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
 
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
 const GridEdit = props => {
   const {
+    id,
     tableRef,
     t,
     columns,
@@ -60,6 +63,7 @@ const GridEdit = props => {
     // selectedRowKeys,
     // defaultSelectedRowKeys
   } = selectionSettings || {};
+  const ref = useRef(null);
   const isSelecting = useRef(false);
   const startCell = useRef(null);
   const childrenColumnName = 'children';
@@ -80,6 +84,7 @@ const GridEdit = props => {
   }];
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
+  const [isFilter, setIsFilter] = React.useState(false);
   const [selectedCells, setSelectedCells] = useState(new Set());
   const [pasteCells, setPasteCells] = useState(new Set());
   const [cellEditing, setCellEditing] = useState(null);
@@ -104,6 +109,33 @@ const GridEdit = props => {
   const rowsFocus = React.useMemo(() => {
     return [...new Set(Array.from(selectedCells).map(item => parseInt(item.split('-')[0])))] ?? [];
   }, [selectedCells]);
+  const contextMenuItems = React.useMemo(() => {
+    return [{
+      key: 'INSERT_BEFORE',
+      label: 'Thêm dòng bên trên',
+      icon: /*#__PURE__*/React.createElement(Plus, {
+        fontSize: 14
+      })
+    }, {
+      key: 'INSERT_AFTER',
+      label: 'Thêm dòng bên dưới',
+      icon: /*#__PURE__*/React.createElement(Plus, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_CONTENT',
+      label: 'Xóa nội dung',
+      icon: /*#__PURE__*/React.createElement(Trash2, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_ROWS',
+      label: 'Xóa dòng',
+      icon: /*#__PURE__*/React.createElement(Trash2, {
+        fontSize: 14
+      })
+    }];
+  }, []);
   const onTriggerExpand = React.useCallback(record => {
     const key = getRowKey(record, dataSource.indexOf(record));
     let newExpandedKeys;
@@ -173,9 +205,12 @@ const GridEdit = props => {
     const rs = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
     triggerChangeData?.(rs, 'DUPLICATE');
   };
-  const handleInsertBefore = item => {
+
+  // thêm n dòng bên trên
+  const handleInsertBefore = (item, n) => {
     const defaultRowValue = getDefaultValue(defaultValue);
-    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+    // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
+
     const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
     if (item.onClick) {
       item.onClick({
@@ -185,27 +220,55 @@ const GridEdit = props => {
       if (!record?.parentId) {
         // Cập nhật data mới
         const newData = [...dataSource];
-        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
-        newData.splice(index, 0, {
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? isFilter ? {
           ...defaultRowValue,
-          rowId,
-          parentId: null,
-          id: undefined
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid()
+        } : isFilter ? {
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: newGuid()
         });
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index, 0, ...newRows);
         triggerChangeData?.(newData, 'INSERT_BEFORE');
       } else {
         const newData = [...dataSource];
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? isFilter ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid()
+        } : isFilter ? {
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: newGuid()
+        });
         const parent = findItemByKey(newData, rowKey, record.parentId);
 
         // Cập nhật childData mới
         const childData = parent?.children ? [...parent.children] : [];
         const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
-        childData.splice(index, 0, {
-          ...defaultRowValue,
-          rowId,
-          parentId: record.parentId,
-          id: undefined
-        });
+        childData.splice(index, 0, ...newRows);
         const newRowData = {
           ...parent,
           children: childData
@@ -215,9 +278,13 @@ const GridEdit = props => {
       }
     }
   };
-  const handleInsertAfter = item => {
+
+  //thêm 1 dòng bên dưới
+  const handleInsertAfter = (item, n) => {
     const defaultRowValue = getDefaultValue(defaultValue);
-    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+
+    // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
+
     const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
 
     // const record = getRecordByKey()
@@ -230,25 +297,57 @@ const GridEdit = props => {
       if (!record?.parentId) {
         // Cập nhật data mới
         const newData = [...dataSource];
-        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
-        newData.splice(index + 1, 0, {
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? isFilter ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
           ...defaultRowValue,
-          rowId,
-          parentId: null
+          id: undefined,
+          rowId: newGuid()
+        } : isFilter ? {
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: newGuid()
         });
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+
+        // newData.splice(index + 1, 0, { ...defaultRowValue, rowId, parentId: null })
+        newData.splice(index + 1, 0, ...newRows);
         triggerChangeData?.(newData, 'INSERT_AFTER');
       } else {
         const newData = [...dataSource];
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? isFilter ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid()
+        } : isFilter ? {
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: newGuid()
+        });
         const parent = findItemByKey(newData, rowKey, record.parentId);
 
         // Cập nhật childData mới
         const childData = parent?.children ? [...parent.children] : [];
         const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
-        childData.splice(index + 1, 0, {
-          ...defaultRowValue,
-          rowId,
-          parentId: record.parentId
-        });
+        childData.splice(index + 1, 0, ...newRows);
         const newRowData = {
           ...parent,
           children: childData
@@ -300,12 +399,49 @@ const GridEdit = props => {
       setInnerExpandedKeys(newExpandedKeys);
     }
   };
+  const handleDeleteRows = item => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const newData = [...dataSource];
+      const indexesToDelete = [...rowsFocus];
+
+      // Sắp xếp giảm dần để xóa từ cuối lên đầu
+      indexesToDelete.sort((a, b) => b - a).forEach(index => {
+        newData.splice(index, 1);
+      });
+      triggerChangeData?.([...newData], 'DELETE_ROWS');
+    }
+  };
   const handleDeleteAll = () => {
     triggerChangeData?.([], 'INSERT_BEFORE');
   };
+  const handleDeleteContent = () => {
+    if (selectedCells.size > 0) {
+      const newData = [...dataSource];
+
+      // colIndex => field
+      const colIndexToField = flatColumns2(columns).map(col => col.field);
+
+      // Duyệt qua mỗi ô cần xóa
+      for (const cell of selectedCells) {
+        const [rowIndexStr, colIndexStr] = cell.split("-");
+        const rowIndex = Number(rowIndexStr);
+        const colIndex = Number(colIndexStr);
+        const field = colIndexToField[colIndex];
+        if (newData[rowIndex] && field && field in newData[rowIndex]) {
+          // @ts-ignore
+          newData[rowIndex][field] = '';
+        }
+      }
+      triggerChangeData?.([...newData], 'DELETE_CONTENT');
+    }
+  };
   const toolbarItemsBottom = 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 !== 'INSERT_CHILDREN').map(item => {
+      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,
@@ -313,6 +449,7 @@ const GridEdit = props => {
               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',
                 style: {
                   color: '#28c76f',
                   borderColor: '#28c76f'
@@ -362,6 +499,7 @@ const GridEdit = props => {
             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',
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -402,17 +540,25 @@ const GridEdit = props => {
         return {
           ...item,
           template: () => {
-            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'INSERT_BEFORE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
               className: classnames(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/React.createElement(Button, {
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
               },
-              variant: 'outlined',
-              onClick: () => handleInsertBefore(item),
-              className: "d-flex toolbar-button"
-            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')));
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertBefore(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertBefore(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
           }
         };
       }
@@ -420,17 +566,25 @@ const GridEdit = props => {
         return {
           ...item,
           template: () => {
-            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'INSERT_AFTER' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
               className: classnames(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/React.createElement(Button, {
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
               },
-              variant: 'outlined',
-              onClick: () => handleInsertAfter(item),
-              className: "d-flex toolbar-button"
-            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')));
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertAfter(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertAfter(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
           }
         };
       }
@@ -470,6 +624,24 @@ const GridEdit = props => {
           }
         };
       }
+      if (item.key === 'DELETE_ROWS') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: () => handleDeleteRows(item),
+              className: "d-flex toolbar-button"
+            }, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
+          }
+        };
+      }
       return {
         ...item
       };
@@ -494,35 +666,55 @@ const GridEdit = props => {
   useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
-      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
+
+      // const tableId = id ? document.getElementById(id) : undefined
+      // const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const container = document.querySelector(".be-popup-container");
+      const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody`);
       // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
 
       // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
-      const itemContainer = document.querySelector(".ui-rc-toolbar-selection-overflow-item");
+      const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
+      const itemHeader = document.querySelector(`#${id} .ui-rc-table-thead`);
       const isInsideContainer = element.closest(".be-popup-container") && container;
-      const isInsideToolbar = element.closest(".ui-rc-toolbar-selection-overflow-item") && itemContainer;
-      if (isInsideContainer || isInsideToolbar) {
+      const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
+      const isInsideHeader = itemHeader && itemHeader.contains(event.target);
+      if (isInsideContainer || isInsideToolbar || isInsideHeader) {
         return;
       }
-      if (tableBodies.length > 0) {
-        const tableBody = tableBodies[0]; // Chọn tbody đầu tiên (nếu có nhiều)
-
-        if (!tableBody.contains(event.target)) {
-          setEditingKey('');
-          isSelecting.current = false;
-          startCell.current = null;
-          setSelectedCells(new Set());
-          setRowsSelected(new Set());
-        } else {}
+
+      // if (ref.current && !ref.current.contains(event.target)) {
+      // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
+
+      if (ref.current && tableBody && !tableBody.contains(event.target)) {
+        setEditingKey('');
+        isSelecting.current = false;
+        startCell.current = null;
+        setSelectedCells(new Set());
+        setRowsSelected(new Set());
       }
+
+      // if (tableBodies.length > 0) {
+      //   const tableBody = tableBodies[0]; // Chọn tbody đầu tiên (nếu có nhiều)
+      //
+      //   if (!tableBody.contains(event.target as Node)) {
+      //     setEditingKey('')
+      //     isSelecting.current = false;
+      //     startCell.current = null;
+      //     setSelectedCells(new Set())
+      //     setRowsSelected(new Set())
+      //   } else {
+      //
+      //   }
+      // }
     };
     document.addEventListener("click", handleClickOutside);
     return () => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  const handleMouseDown = (record, row, col, e) => {
+  const handleMouseDown = useCallback((record, row, col, e) => {
+    setEditingKey('');
     if (e.button === 2) {
       e.stopPropagation();
       return;
@@ -559,7 +751,7 @@ const GridEdit = props => {
     //   setSelectedCells(new Set([`${row}-${col}`]));
     //   setRowsSelected(new Set())
     // }
-  };
+  }, []);
 
   // const handlePointEnter = (e: any) => {
   //
@@ -764,25 +956,15 @@ const GridEdit = props => {
     }
     setSelectedCells(newSelectedCells);
   };
-
-  // const handleClickColHeader = (column: ColumnTable, indexColumn: number) => {
-  //
-  //   const newSelectedCells = new Set();
-  //
-  //   for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
-  //     for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
-  //       newSelectedCells.add(`${r}-${c}`)
-  //     }
-  //   }
-  //
-  //   // console.log('newSelectedCells', newSelectedCells)
-  //   // setSelectedCells(newSelectedCells)
-  //
-  //   setSelectedCells(new Set(newSelectedCells));
-  //   // forceUpdate();
-  //   setUpdateKey((prev) => prev + 1); // Cập nhật key để trigger re-render
-  // }
-
+  const handleClickColHeader = (column, indexColumn) => {
+    const newSelectedCells = new Set();
+    for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
+      for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+    setSelectedCells(new Set(newSelectedCells));
+  };
   const handleMouseDownColIndex = (row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
@@ -815,7 +997,7 @@ const GridEdit = props => {
     }
     const newSelectedCells = new Set();
     for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
-      for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
+      for (let c = Math.min(editAbleColumns(columns).length, col) + 1; c <= Math.max(editAbleColumns(columns).length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
@@ -853,7 +1035,7 @@ const GridEdit = props => {
     const selectedArray = Array.from(selectedCells).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
-      const columnKey = columns[col].field;
+      const columnKey = editAbleColumns(columns)[col - 1].field;
 
       // @ts-ignore
       return {
@@ -932,16 +1114,17 @@ const GridEdit = props => {
             // Không vượt quá số cột
             return;
           }
-
-          // @ts-ignore
-          const columnKey = columns[targetCol].field;
-
-          // @ts-ignore
-          newData[targetRow] = {
-            ...newData[targetRow],
-            [columnKey]: cellValue.trim()
-          };
-          pastedColumns.add(columnKey);
+          if (columns[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = columns[targetCol].field;
+
+            // @ts-ignore
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
+          }
         });
 
         // Lưu dòng được paste
@@ -980,16 +1163,17 @@ const GridEdit = props => {
             // Không vượt quá số cột
             return;
           }
-
-          // @ts-ignore
-          const columnKey = columns[targetCol].field;
-
-          // @ts-ignore
-          childData[targetRow] = {
-            ...childData[targetRow],
-            [columnKey]: cellValue.trim()
-          };
-          pastedColumns.add(columnKey);
+          if (columns[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = columns[targetCol].field;
+
+            // @ts-ignore
+            childData[targetRow] = {
+              ...childData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
+          }
         });
 
         // Lưu dòng được paste
@@ -1288,7 +1472,7 @@ const GridEdit = props => {
             tabIndex: (rowIndex ?? 0) * columns.length + colIndex
           };
         },
-        render: (value, record, rowIndex) => {
+        render: (value, record) => {
           const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/React.createElement("div", {
             className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
@@ -1297,10 +1481,11 @@ const GridEdit = props => {
             }),
             onMouseDown: event => handleMouseDownColIndex(rowNumber, colIndex, event),
             onMouseEnter: event => handleMouseEnterColIndex(rowNumber, colIndex, event),
-            onClick: () => handleClickRowHeader(rowNumber, colIndex)
+            onClick: () => handleClickRowHeader(rowNumber, colIndex),
+            onMouseUp: handleMouseUp
           }, /*#__PURE__*/React.createElement("div", {
             className: 'ui-rc_content'
-          }, rowIndex + 1));
+          }, findItemPath(dataSource, record, rowKey)));
         }
       };
     }
@@ -1314,6 +1499,10 @@ const GridEdit = props => {
       onCell: (record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
         return {
+          // onKeyPress: () => {
+          //
+          // },
+
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
@@ -1379,6 +1568,9 @@ const GridEdit = props => {
             if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
               handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
             }
+            if (event.key === 'Delete') {
+              handleDeleteContent();
+            }
           },
           onPaste: event => {
             if (editingKey === '') {
@@ -1398,6 +1590,19 @@ const GridEdit = props => {
               handleCellClick(rowNumber, record, column);
             }
           },
+          onContextMenu: () => {
+            // isSelecting.current = true;
+            // startCell.current = { row: rowNumber, col: colIndex };
+
+            if (selectedCells.size === 0) {
+              setStartSelectedCell({
+                row: rowNumber,
+                col: colIndex
+              });
+              setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
+              setRowsSelected(new Set());
+            }
+          },
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
@@ -1422,19 +1627,42 @@ const GridEdit = props => {
           } : {}
         };
       },
+      onHeaderCell: () => {
+        return {
+          onClick: () => {
+            handleClickColHeader(column, colIndex);
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(dataSource[0], colIndex, 0, event);
+              event.preventDefault();
+            }
+          },
+          style: {
+            userSelect: 'none'
+          }
+        };
+      },
       render: (value, record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/React.createElement("div", {
           className: classNames('ui-rc_cell-content', {
             // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
-            selected: selectedCells.has(`${rowNumber}-${colIndex}`)
+            selected: selectedCells.has(`${rowNumber}-${colIndex}`),
+            disable: !isEditable(column, record)
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: () => handleMouseEnter(rowNumber, colIndex),
           onMouseUp: handleMouseUp
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && isEditable(column, record) !== false && !isSelectDragging &&
+        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && isEditable(column, record) && !isSelectDragging && rowIndex !== dataSource.length - 1 &&
         /*#__PURE__*/
         // showDraggingPoint &&
         React.createElement("div", {
@@ -1495,11 +1723,26 @@ const GridEdit = props => {
   const onSelectChange = keys => {
     setMergedSelectedKeys(keys);
   };
+  const contextMenuClick = args => {
+    if (args.item.key === 'INSERT_BEFORE') {
+      handleInsertAfter(args.item, 1);
+    }
+    if (args.item.key === 'INSERT_AFTER') {
+      handleInsertBefore(args.item, 1);
+    }
+    if (args.item.key === 'DELETE_ROWS') {
+      handleDeleteRows(args.item);
+    }
+    if (args.item.key === 'DELETE_CONTENT') {
+      handleDeleteContent();
+    }
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
       position: 'relative'
-    }
+    },
+    ref: ref
     // onMouseUp={handleMouseUp}
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
@@ -1521,7 +1764,7 @@ const GridEdit = props => {
           rowHoverBg: '#eb461912',
           rowSelectedBg: '#eb4619',
           rowSelectedHoverBg: '#eb4619',
-          cellFontSize: 12,
+          // cellFontSize: 12,
           cellFontSizeSM: 13,
           headerBg: '#ffffff',
           cellPaddingBlockSM: 7
@@ -1534,11 +1777,13 @@ const GridEdit = props => {
     }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
+    id: id,
     tableRef: tableRef,
     dataSource: dataSource,
     components: {
       ...components,
       body: {
+        // wrapper: () => <div></div>,
         cell: EditableCell
         // cell: () =>  <EditableCell  />,
       }
@@ -1551,11 +1796,15 @@ const GridEdit = props => {
       target: 'sorter-icon'
     },
     format: format,
-    toolbarItems: toolbarItems,
+    toolbarItems: toolbarItems
+    // selectionSettings={selectionSettings ? {...selectionSettings, checkboxOnly: true} : undefined}
+    ,
     selectionSettings: selectionSettings ? {
       ...selectionSettings,
       checkboxOnly: true
-    } : undefined,
+    } : {
+      checkboxOnly: true
+    },
     rowHoverable: false,
     bottomToolbar: bottomToolbar,
     expandable: {
@@ -1595,13 +1844,18 @@ const GridEdit = props => {
       }
     },
     triggerChangeColumns: triggerChangeColumns,
+    clickHeaderToSort: false,
     rowSelection: columns && columns.length === 0 ? undefined : {
       type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
       onChange: onSelectChange,
       selectedRowKeys: mergedSelectedKeys,
       preserveSelectedRowKeys: true
-    }
+    },
+    isFilter: isFilter,
+    setIsFilter: setIsFilter,
+    contextMenuItems: contextMenuItems,
+    contextMenuClick: contextMenuClick
   })))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {