es-grid-template 1.3.0 → 1.3.2

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

@@ -24,16 +24,19 @@ var _hooks = require("../hooks");
 var _Message = _interopRequireDefault(require("../../Message/Message"));
 var _rcMasterUi = require("rc-master-ui");
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _becoxyIcons = require("becoxy-icons");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import Command from "../Command";
 
+// import {ContextInfo, ContextMenuItem} from "../type";
 // import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
 
 _dayjs.default.extend(_customParseFormat.default);
 const toast = 'top-right';
 const GridEdit = props => {
   const {
+    id,
     tableRef,
     t,
     columns,
@@ -68,6 +71,7 @@ const GridEdit = props => {
     // selectedRowKeys,
     // defaultSelectedRowKeys
   } = selectionSettings || {};
+  const ref = (0, _react.useRef)(null);
   const isSelecting = (0, _react.useRef)(false);
   const startCell = (0, _react.useRef)(null);
   const childrenColumnName = 'children';
@@ -88,6 +92,7 @@ const GridEdit = props => {
   }];
   const [form] = _antd.Form.useForm();
   const [editingKey, setEditingKey] = (0, _react.useState)('');
+  const [isFilter, setIsFilter] = _react.default.useState(false);
   const [selectedCells, setSelectedCells] = (0, _react.useState)(new Set());
   const [pasteCells, setPasteCells] = (0, _react.useState)(new Set());
   const [cellEditing, setCellEditing] = (0, _react.useState)(null);
@@ -112,6 +117,33 @@ const GridEdit = props => {
   const rowsFocus = _react.default.useMemo(() => {
     return [...new Set(Array.from(selectedCells).map(item => parseInt(item.split('-')[0])))] ?? [];
   }, [selectedCells]);
+  const contextMenuItems = _react.default.useMemo(() => {
+    return [{
+      key: 'INSERT_BEFORE',
+      label: 'Thêm dòng bên trên',
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
+        fontSize: 14
+      })
+    }, {
+      key: 'INSERT_AFTER',
+      label: 'Thêm dòng bên dưới',
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_CONTENT',
+      label: 'Xóa nội dung',
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_ROWS',
+      label: 'Xóa dòng',
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
+        fontSize: 14
+      })
+    }];
+  }, []);
   const onTriggerExpand = _react.default.useCallback(record => {
     const key = getRowKey(record, dataSource.indexOf(record));
     let newExpandedKeys;
@@ -181,9 +213,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 = (0, _hooks.getDefaultValue)(defaultValue);
-    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
+    // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
+
     const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
     if (item.onClick) {
       item.onClick({
@@ -193,27 +228,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: (0, _hooks.newGuid)(),
+          isFilterState: true
+        } : {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: (0, _hooks.newGuid)()
+        } : isFilter ? {
+          id: undefined,
+          rowId: (0, _hooks.newGuid)(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: (0, _hooks.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: (0, _hooks.newGuid)(),
+          isFilterState: true
+        } : {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: (0, _hooks.newGuid)()
+        } : isFilter ? {
+          id: undefined,
+          rowId: (0, _hooks.newGuid)(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: (0, _hooks.newGuid)()
+        });
         const parent = (0, _hooks.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
@@ -223,9 +286,13 @@ const GridEdit = props => {
       }
     }
   };
-  const handleInsertAfter = item => {
+
+  //thêm 1 dòng bên dưới
+  const handleInsertAfter = (item, n) => {
     const defaultRowValue = (0, _hooks.getDefaultValue)(defaultValue);
-    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : (0, _hooks.newGuid)();
+
+    // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
+
     const record = (0, _hooks.flattenData)(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
 
     // const record = getRecordByKey()
@@ -238,25 +305,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: (0, _hooks.newGuid)(),
+          isFilterState: true
+        } : {
           ...defaultRowValue,
-          rowId,
-          parentId: null
+          id: undefined,
+          rowId: (0, _hooks.newGuid)()
+        } : isFilter ? {
+          id: undefined,
+          rowId: (0, _hooks.newGuid)(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: (0, _hooks.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: (0, _hooks.newGuid)(),
+          isFilterState: true
+        } : {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: (0, _hooks.newGuid)()
+        } : isFilter ? {
+          id: undefined,
+          rowId: (0, _hooks.newGuid)(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: (0, _hooks.newGuid)()
+        });
         const parent = (0, _hooks.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
@@ -308,12 +407,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 = (0, _columns.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 = (0, _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 !== '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,
@@ -321,6 +457,7 @@ const GridEdit = props => {
               return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
               }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+                overlayClassName: 'be-popup-container',
                 style: {
                   color: '#28c76f',
                   borderColor: '#28c76f'
@@ -370,6 +507,7 @@ const GridEdit = props => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
             }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -410,17 +548,25 @@ const GridEdit = props => {
         return {
           ...item,
           template: () => {
-            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'INSERT_BEFORE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_antd.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.default.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'))));
           }
         };
       }
@@ -428,17 +574,25 @@ const GridEdit = props => {
         return {
           ...item,
           template: () => {
-            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'INSERT_AFTER' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_antd.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.default.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'))));
           }
         };
       }
@@ -478,6 +632,24 @@ const GridEdit = props => {
           }
         };
       }
+      if (item.key === 'DELETE_ROWS') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_antd.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
       };
@@ -502,35 +674,55 @@ const GridEdit = props => {
   (0, _react.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 = (0, _react.useCallback)((record, row, col, e) => {
+    setEditingKey('');
     if (e.button === 2) {
       e.stopPropagation();
       return;
@@ -567,7 +759,7 @@ const GridEdit = props => {
     //   setSelectedCells(new Set([`${row}-${col}`]));
     //   setRowsSelected(new Set())
     // }
-  };
+  }, []);
 
   // const handlePointEnter = (e: any) => {
   //
@@ -772,25 +964,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();
@@ -823,7 +1005,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((0, _hooks.editAbleColumns)(columns).length, col) + 1; c <= Math.max((0, _hooks.editAbleColumns)(columns).length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
@@ -861,7 +1043,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 = (0, _hooks.editAbleColumns)(columns)[col - 1].field;
 
       // @ts-ignore
       return {
@@ -940,16 +1122,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
@@ -988,16 +1171,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
@@ -1296,7 +1480,7 @@ const GridEdit = props => {
             tabIndex: (rowIndex ?? 0) * columns.length + colIndex
           };
         },
-        render: (value, record, rowIndex) => {
+        render: (value, record) => {
           const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/_react.default.createElement("div", {
             className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {
@@ -1305,10 +1489,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.default.createElement("div", {
             className: 'ui-rc_content'
-          }, rowIndex + 1));
+          }, (0, _hooks.findItemPath)(dataSource, record, rowKey)));
         }
       };
     }
@@ -1322,6 +1507,10 @@ const GridEdit = props => {
       onCell: (record, rowIndex) => {
         const rowNumber = (0, _hooks.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') {
@@ -1387,6 +1576,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 === '') {
@@ -1406,6 +1598,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('');
@@ -1430,19 +1635,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 = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _classnames.default)('ui-rc_cell-content', {
             // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
-            selected: selectedCells.has(`${rowNumber}-${colIndex}`)
+            selected: selectedCells.has(`${rowNumber}-${colIndex}`),
+            disable: !(0, _hooks.isEditable)(column, record)
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: () => handleMouseEnter(rowNumber, colIndex),
           onMouseUp: handleMouseUp
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'ui-rc_content'
-        }, (0, _columns.renderContent)(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && (0, _hooks.getLastSelectCell)(selectedCells).row === rowNumber && (0, _hooks.getLastSelectCell)(selectedCells).col === colIndex && (0, _hooks.isEditable)(column, record) !== false && !isSelectDragging &&
+        }, (0, _columns.renderContent)(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && (0, _hooks.getLastSelectCell)(selectedCells).row === rowNumber && (0, _hooks.getLastSelectCell)(selectedCells).col === colIndex && (0, _hooks.isEditable)(column, record) && !isSelectDragging && rowIndex !== dataSource.length - 1 &&
         /*#__PURE__*/
         // showDraggingPoint &&
         _react.default.createElement("div", {
@@ -1503,11 +1731,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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     heightTable: height,
     style: {
       position: 'relative'
-    }
+    },
+    ref: ref
     // onMouseUp={handleMouseUp}
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
@@ -1529,7 +1772,7 @@ const GridEdit = props => {
           rowHoverBg: '#eb461912',
           rowSelectedBg: '#eb4619',
           rowSelectedHoverBg: '#eb4619',
-          cellFontSize: 12,
+          // cellFontSize: 12,
           cellFontSizeSM: 13,
           headerBg: '#ffffff',
           cellPaddingBlockSM: 7
@@ -1542,11 +1785,13 @@ const GridEdit = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
     t: t,
+    id: id,
     tableRef: tableRef,
     dataSource: dataSource,
     components: {
       ...components,
       body: {
+        // wrapper: () => <div></div>,
         cell: _EditableCell.default
         // cell: () =>  <EditableCell  />,
       }
@@ -1559,11 +1804,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: {
@@ -1603,13 +1852,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.default.createElement(_reactHotToast.Toaster, {
     position: toast,
     toastOptions: {