es-grid-template 1.9.65 → 1.9.66

package/es/ali-table/pipeline/features/columnCustom.js

@@ -8,7 +8,9 @@ import { booleanOperator, findItemPath, isEditable, isObjEmpty, nonActionColumn,
 } from "../../../grid-component/hooks";
 import classNames from 'classnames';
 import { Dropdown, Select, Space, Button } from 'rc-master-ui';
-import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, convertFilters, extendsObject, flattenArray, flattenData, getColIdsBetween1, getDefaultOperator, getDragRightData, getEditType, getKeys, getNextColumn, getNextColumn1, getPrevColumn, getRowIdsBetween3,
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, convertFilters, extendsObject,
+// flattenArray,
+flattenData, getColIdsBetween1, getDefaultOperator, getDragRightData, getEditType, getKeys, getNextColumn, getNextColumn1, getPrevColumn, getRowIdsBetween3,
 // getRowIndexMap,
 getSelectedCellMatrix1, getTypeFilter,
 // isObjEqual,
@@ -51,7 +53,10 @@ export function columnCustom(opts) {
     isDataTree,
     defaultSorter,
     defaultFilter,
+    rowIndexMap,
+    // Edit
     editAble,
+    isAddAble,
     rowEditable,
     setValue,
     reset,
@@ -64,11 +69,12 @@ export function columnCustom(opts) {
     handleSubmit,
     onSubmit,
     handleCellChange,
+    handleCellChangeAndAddRow,
     handleHeaderCellChange,
+    handleAddMulti,
     dataErrors,
     headerData,
     headerEditAble,
-    rowIndexMap,
     onCellClick
     // originData
 
@@ -83,7 +89,6 @@ export function columnCustom(opts) {
   const rowKey = 'rowId';
   return function columnResizeFeature(pipeline) {
     // State table
-
     const sizes = opts.sizes ?? pipeline.getStateAtKey(stateKeyResize) ?? opts.defaultSizes ?? [];
     const filterState = pipeline.getStateAtKey(stateKeyFilter) ?? defaultFilter ?? [];
     const visible = pipeline.getStateAtKey(stateKeyVisible) ?? '';
@@ -107,11 +112,16 @@ export function columnCustom(opts) {
     // const rowIdsHeader = Array.from({ length: deppthCols }, (_, index) => `field-${index}`)
 
     const allCols = [...leafColumns];
+    const defaultCellEditing = {
+      editing: false,
+      element: null,
+      rect: null
+    };
 
     // State for Edit
 
     const focusedCell = pipeline.getStateAtKey(stateKeyFocusedCell) ?? {};
-    const isEditing = pipeline.getStateAtKey(stateKeyIsEditing) ?? false;
+    const isEditing = pipeline.getStateAtKey(stateKeyIsEditing) ?? defaultCellEditing;
     const editCellSettings = pipeline.getStateAtKey(stateKeyEditCellSettings);
     const isSelecting = pipeline.getStateAtKey(stateKeyIsSelecting) ?? false;
     const isPasting = pipeline.getStateAtKey(stateKeyIsPasting) ?? false;
@@ -121,7 +131,7 @@ export function columnCustom(opts) {
     const endPasteCell = pipeline.getStateAtKey(stateKeyEndPasteCell) ?? undefined;
     const typePaste = pipeline.getStateAtKey(stateKeyTypePaste) ?? undefined;
     const rangeState = startCell && endCell ? getSelectedCellMatrix1(allRows, leafColumns, startCell, endCell) : undefined;
-    const rangePasteState = startPasteCell && endPasteCell ? getSelectedCellMatrix1(allRows, leafColumns, startPasteCell, endPasteCell, typePaste) : undefined;
+    const rangePasteState = startPasteCell && endPasteCell && typePaste ? getSelectedCellMatrix1(allRows, leafColumns, startPasteCell, endPasteCell, typePaste) : undefined;
     const nextColumn = focusedCell?.colId ? getNextColumn1(leafColumns, focusedCell?.colId) : undefined;
     const {
       rowRange,
@@ -131,6 +141,15 @@ export function columnCustom(opts) {
       endColIndex,
       endRowIndex
     } = rangeState ?? {};
+    const {
+      rowRange: rowPasteRange,
+      colRange: colPasteRange,
+      startColIndex: startPasteColIndex,
+      startRowIndex: startPasteRowIndex,
+      endColIndex: endPasteColIndex,
+      endRowIndex: endPasteRowIndex,
+      type: pasteType
+    } = rangePasteState ?? {};
     const rowPasteIds = getRowIdsBetween3(allRows, rowIndexMap, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
     const colPasteds = getColIdsBetween1(leafColumns, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
     const rowSelectIds = getRowIdsBetween3(allRows, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
@@ -306,8 +325,31 @@ export function columnCustom(opts) {
     //  Chức năng edit
 
     const handleEdit = (e, record, col, editType, isKeyDown, isHeader) => {
-      pipeline.setStateAtKey(stateKeyIsEditing, true);
       reset?.();
+      const cell = e.currentTarget;
+      pipeline.setStateAtKey(stateKeyIsEditing, {
+        editing: true,
+        element: cell,
+        rect: cell.getBoundingClientRect()
+      });
+
+      // editor = document.createElement('div')
+
+      // editor.className = 'cell-editor'
+
+      // editor.contentEditable = 'true'
+
+      // editor.style.left = `${rect.left}px`
+      // editor.style.top = `${rect.top}px`
+      // editor.style.width = `${rect.width}px`
+      // editor.style.height = `${rect.height}px`
+
+      // editor.innerText = cell.innerText
+
+      // document.body.appendChild(editor)
+
+      // editor.focus()
+
       if (!isObjEmpty(record)) {
         Object.entries(record).forEach(([name, value]) => {
           setValue?.(name, value);
@@ -351,7 +393,9 @@ export function columnCustom(opts) {
         });
         dataSelected.push(rowData);
       });
-      const copyRows = flattenData('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
+
+      // const copyRows = flattenData('children', dataSource).filter((it) => rowSelectIds.includes(it[rowKey]))
+      const copyRows = allRows.filter(it => rowSelectIds.includes(it[rowKey]));
       let newRange;
       if (pasteState.type === 'down') {
         // kéo xuóng
@@ -388,7 +432,7 @@ export function columnCustom(opts) {
       }
 
       // Cập nhật data mới
-      const newData = flattenArray(allRows);
+      const newData = allRows;
       const pastedRows = [];
       if (pasteState.type === 'down' || pasteState.type === 'up') {
         newRange.addedRows.forEach((rowValues, rowIndex1) => {
@@ -455,8 +499,8 @@ export function columnCustom(opts) {
         });
       }
 
-      // const rsFilterData = updateOrInsert(flattenArray(dataSource), newData)
-      const rsFilterData = updateOrInsert(dataSource, newData);
+      // const rsFilterData = updateOrInsert(dataSource, newData)
+      const rsFilterData = updateOrInsert(allRows, newData);
       const rs = unFlattenData(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
       pipeline.setStateAtKey(stateKeyEndCell, endPasteCell);
@@ -483,7 +527,7 @@ export function columnCustom(opts) {
       const newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowsPasteId.length) : addRowsDown(dataSelected, rowsPasteId.length);
 
       // Cập nhật data mới
-      const newData = flattenArray(dataSource);
+      const newData = allRows;
       const pastedRows = [];
       newRange.addedRows.forEach((rowValues, rowIndex1) => {
         const targetRow = pasteState?.startRowIndex + rowIndex1;
@@ -503,6 +547,8 @@ export function columnCustom(opts) {
         // Lưu dòng được paste
         pastedRows.push(newData[targetRow]);
       });
+
+      // const rsFilterData = updateOrInsert(dataSource, newData)
       const rsFilterData = updateOrInsert(dataSource, newData);
       const rs = unFlattenData(rsFilterData);
       triggerPaste?.(pastedRows, colsPastedId, rs, copyRows);
@@ -525,7 +571,7 @@ export function columnCustom(opts) {
             rowId,
             colId
           });
-          pipeline.setStateAtKey(stateKeyIsEditing, false);
+          pipeline.setStateAtKey(stateKeyIsEditing, defaultCellEditing);
         });
       } else {}
     };
@@ -777,7 +823,7 @@ export function columnCustom(opts) {
         // handleDeleteContent?.()
 
         if (startCell && endCell) {
-          const tmpData = flattenArray([...dataSource]);
+          const tmpData = allRows;
           const rs = tmpData.map((row, index) => {
             if (!rangeState?.rowRange.includes(row.rowId)) {
               return row;
@@ -888,98 +934,6 @@ export function columnCustom(opts) {
         return;
       }
 
-      // if (e.key === 'ArrowRight') {
-
-      //   // e.preventDefault();
-      //   // e.stopPropagation()
-
-      //   const nextCol = getNextColumn(leafColumns, column.field)
-
-      //   if (nextCol.column && !nextCol.isWrapped) {
-
-      //     const nextCellPosition = { rowId, colId: nextCol.column.field }
-
-      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
-
-      //   }
-
-      //   return
-      // }
-
-      // if (e.key === 'ArrowLeft') {
-
-      //   // e.preventDefault()
-      //   // e.stopPropagation()
-
-      //   const prevCol = getPrevColumn(leafColumns, column.field)
-
-      //   if (prevCol) {
-
-      //     const nextCellPosition = { rowId, colId: prevCol.field }
-      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
-
-      //   }
-      //   return
-      // }
-
-      // if (e.key === 'ArrowDown') {
-
-      //   // e.preventDefault()
-      //   // e.stopPropagation()
-
-      //   const nextRow = allRows[rowIndex + 1]
-
-      //   if (nextRow) {
-      //     const nextRowId = nextRow.rowId
-
-      //     const nextCellPosition = { rowId: nextRowId, colId }
-      //     // setFocusedCell?.({ rowId: nextRowId, colId });
-      //     // setStartCell?.({ rowId: nextRowId, colId });
-      //     // setEndCell?.({ rowId: nextRowId, colId });
-
-      //     // setRangeState?.(getSelectedCellMatrix(table, { rowId: nextRowId, colId }, { rowId: nextRowId, colId }))
-
-      //     // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
-      //     // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
-
-      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
-
-      //     // const rowElement: any = document.querySelector(`.ui-rc-grid-table-row[data-row-key="${nextRowId}"]`)
-
-      //     // const cellFocus = rowElement?.querySelector('.ui-rc-grid-cell')
-
-      //   }
-
-      //   return
-      // }
-
-      // if (e.key === 'ArrowUp') {
-
-      //   // e.preventDefault()
-      //   // e.stopPropagation()
-
-      //   const nextRow = allRows[rowIndex - 1]
-
-      //   if (nextRow) {
-      //     const nextRowId = nextRow.rowId
-
-      //     const nextCellPosition = { rowId: nextRowId, colId }
-
-      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
-
-      //   }
-
-      //   return
-      // }
-
       // if (e.key === 'Delete') {
       //   handleDeleteContent?.()
       //   return
@@ -997,7 +951,7 @@ export function columnCustom(opts) {
         handleEdit(e, record, column, editType, true, true);
       }
     };
-    const handleChange = (record, column, indexCol) => {
+    const handleChange = (record, column, indexCol, type) => {
       const currentRowIndex = allRows.findIndex(r => r.rowId === record.rowId);
       const formState = getValues();
       const itemState = getValues(column.field);
@@ -1013,10 +967,54 @@ export function columnCustom(opts) {
           option: newState,
           indexCol: indexCol,
           indexRow: currentRowIndex,
-          type: 'blur'
+          type: type ?? 'blur'
         });
       } else {}
     };
+    const handleChangeAndCreateRow = (record, column, indexCol) => {
+      const currentRowIndex = allRows.findIndex(r => r.rowId === record.rowId);
+      const formState = getValues();
+      const itemState = getValues(column.field);
+      const prevState = record[column.field];
+      const newState = itemState;
+      if (newState !== prevState) {
+        // vừa cell change + add new row
+        handleCellChangeAndAddRow?.({
+          key: record.rowId,
+          field: column.field,
+          record: formState,
+          prevState,
+          newState,
+          option: newState,
+          indexCol: indexCol,
+          indexRow: currentRowIndex,
+          type: 'blur'
+        });
+      } else {
+        // chỉ add new row
+
+        const newRowId = newGuid();
+        handleAddMulti?.({}, 1, newRowId);
+        const nextCellPosition = {
+          rowId: newRowId,
+          colId: column.field
+        };
+        pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition);
+        pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition);
+        pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition);
+        setTimeout(() => {
+          const row = document.querySelector(`.ui-rc-grid-table-row[data-row-key="${newRowId}"]`);
+          const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+          if (cellFocus) {
+            cellFocus.scrollIntoView({
+              behavior: "smooth",
+              block: "start"
+            });
+            cellFocus.focus();
+          }
+        }, 100);
+      }
+    };
     const handleHeaderChange = (record, column, indexCol) => {
       const currentRowIndex = allRows.findIndex(r => r.rowId === record.rowId);
       const formState = getValues();
@@ -1282,7 +1280,7 @@ export function columnCustom(opts) {
         [col.field]: headerData?.[col.field] ?? ''
       };
       const headerValue = headerData?.[col.field] ?? '';
-      const cellHeaderEditing = isEditing && headerRowId === focusedCell.rowId && col.field === focusedCell.colId;
+      const cellHeaderEditing = isEditing.editing && headerRowId === focusedCell.rowId && col.field === focusedCell.colId;
       const isCellSelect = headerRowId === focusedCell.rowId && startCell?.colId === col.field;
       const aa = getColumnsAtLevel(originCols, headerRowIndex);
       const aaEditAble = aa ? aa.filter(it => it.headerEditEnable) : undefined;
@@ -1387,7 +1385,7 @@ export function columnCustom(opts) {
           // @ts-ignore
           'data-col-key': col.field,
           ref: el => {
-            if (focusedCell?.rowId === headerRowId && focusedCell?.colId === col.field && !isEditing) {
+            if (focusedCell?.rowId === headerRowId && focusedCell?.colId === col.field && !isEditing.editing) {
               el?.focus({
                 preventScroll: true
               });
@@ -1432,7 +1430,7 @@ export function columnCustom(opts) {
             // chưa editing
 
             if (headerEditAble) {
-              if (!isEditing) {
+              if (!isEditing.editing) {
                 handleHeaderKeyDown(e, headerRowId, col.field, headerRowIndex, col, headerRecord, headerEditType ?? 'text');
               } else {
                 if (e.shiftKey && e.key === 'Enter') {
@@ -1454,7 +1452,7 @@ export function columnCustom(opts) {
                     // pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
 
                     handleHeaderChange(headerRecord, col, startIndex);
-                    pipeline.setStateAtKey(stateKeyIsEditing, false);
+                    pipeline.setStateAtKey(stateKeyIsEditing, defaultCellEditing);
 
                     // } 
                   }
@@ -1497,7 +1495,7 @@ export function columnCustom(opts) {
                       // }
                     }
                     handleHeaderChange(headerRecord, col, startIndex);
-                    pipeline.setStateAtKey(stateKeyIsEditing, false);
+                    pipeline.setStateAtKey(stateKeyIsEditing, defaultCellEditing);
                   }
                 }
               }
@@ -1517,21 +1515,23 @@ export function columnCustom(opts) {
           const canEdit = isEditable(col, record) && isRowEditable !== false;
           const editType = typeof col.editType === 'function' ? col.editType(record) : col.editType;
           const isInRange = colRange && rowRange && rowRange.includes(record.rowId) && colRange.includes(col.field);
-          const isInRangePaste = rangePasteState && rangePasteState?.rowRange?.includes(record.rowId) && rangePasteState?.colRange?.includes(col.field);
+          const isInRangePaste = colPasteRange && rowPasteRange && rowPasteRange?.includes(record.rowId) && colPasteRange.includes(col.field);
           const rowIdx = rowIds ? rowIds.indexOf(record.rowId) : -1;
           const colIdx = colIds ? colIds.indexOf(col.field) : -1;
-          const rowIdxPaste = rowIds?.indexOf(record.rowId);
-          const colIdxPaste = colIds?.indexOf(col.field);
+          const rowIdxPaste = rowIds ? rowIds?.indexOf(record.rowId) : -1;
+          const colIdxPaste = colIds ? colIds?.indexOf(col.field) : -1;
+          // const colIdsPaste = rangePasteState?.colRange?.includes(col.field)
+
           const isCellSelected = !startCell || !endCell ? false : selectRowIds.includes(record.rowId) && cols.includes(col.field);
           const isTop = rowIdx === startRowIndex;
           const isBottom = rowIdx === endRowIndex;
           const isLeft = colIdx === startColIndex;
           const isRight = colIdx === endColIndex;
-          const isTopPaste = rowIdxPaste === rangePasteState?.startRowIndex;
-          const isBottomPaste = rowIdxPaste === rangePasteState?.endRowIndex;
-          const isLeftPaste = colIdxPaste === rangePasteState?.startColIndex;
-          const isRightPaste = colIdxPaste === rangePasteState?.endColIndex;
-          const cellEditing = isEditing && record.rowId === focusedCell.rowId && col.field === focusedCell.colId;
+          const isTopPaste = rowIdxPaste === startPasteRowIndex;
+          const isBottomPaste = rowIdxPaste === endPasteRowIndex;
+          const isLeftPaste = colIdxPaste === startPasteColIndex;
+          const isRightPaste = colIdxPaste === endPasteColIndex;
+          const cellEditing = isEditing.editing && record.rowId === focusedCell.rowId && col.field === focusedCell.colId;
 
           //  content display
 
@@ -1557,7 +1557,7 @@ export function columnCustom(opts) {
             'data-tooltip-id': `${id}-tooltip-content`,
             'data-tooltip-content': message ?? tooltipContent,
             ref: el => {
-              if (focusedCell?.rowId === record.rowId && focusedCell?.colId === col.field && !isEditing) {
+              if (focusedCell?.rowId === record.rowId && focusedCell?.colId === col.field && !isEditing.editing) {
                 el?.focus({
                   preventScroll: true
                 });
@@ -1580,14 +1580,14 @@ export function columnCustom(opts) {
               disable: !canEdit,
               // isValid: !isEditing && rowError && rowError[col.field]?.field === col.field,
               [`${prefix}-grid-cell-selected`]: isCellSelected,
-              'cell-border-bottom': !isEditing && isInRange && isBottom,
-              'cell-border-right': !isEditing && isInRange && isRight,
-              'cell-border-top': !isEditing && isInRange && isTop,
-              'cell-border-left': !isEditing && isInRange && isLeft,
-              'cell-paste-border-bottom': isInRangePaste && isBottomPaste && (rangePasteState.endRowIndex ?? 0) > (endRowIndex ?? 0),
-              'cell-paste-border-right': isInRangePaste && isRightPaste,
-              'cell-paste-border-top': isInRangePaste && isTopPaste && (rangePasteState.endRowIndex ?? 0) < (endRowIndex ?? 0),
-              'cell-paste-border-left': isInRangePaste && isLeftPaste
+              'cell-border-bottom': !isEditing.editing && isInRange && isBottom,
+              'cell-border-right': !isEditing.editing && isInRange && isRight,
+              'cell-border-top': !isEditing.editing && isInRange && isTop,
+              'cell-border-left': !isEditing.editing && isInRange && isLeft,
+              'cell-paste-border-bottom': isInRangePaste && isBottomPaste && (pasteType === 'down' || pasteType === 'right' || pasteType === 'left'),
+              'cell-paste-border-right': isInRangePaste && isRightPaste && (pasteType === 'down' || pasteType === 'right' || pasteType === 'up'),
+              'cell-paste-border-top': isInRangePaste && isTopPaste && (pasteType === 'up' || pasteType === 'left' || pasteType === 'right'),
+              'cell-paste-border-left': isInRangePaste && isLeftPaste && (pasteType === 'down' || pasteType === 'left' || pasteType === 'up')
             }),
             onMouseDown: e => {
               prevCellProps?.onMouseDown?.(e);
@@ -1684,7 +1684,7 @@ export function columnCustom(opts) {
               prevCellProps?.onKeyDown?.(e);
 
               // chưa editing
-              if (!isEditing) {
+              if (!isEditing.editing) {
                 handleKeyDown(e, record.rowId, col.field, rowIndex, col, record, editType ?? 'text');
               } else {
                 if (e.shiftKey && e.key === 'Enter') {
@@ -1704,14 +1704,15 @@ export function columnCustom(opts) {
                       pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition);
                       pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition);
                       pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition);
-
-                      // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
-
                       handleChange(record, col, startIndex);
-                      pipeline.setStateAtKey(stateKeyIsEditing, false);
+                      pipeline.setStateAtKey(stateKeyIsEditing, defaultCellEditing);
                     } else {
-
-                      // handleChangeAndCreateRow()
+                      if (isAddAble) {
+                        handleChangeAndCreateRow(record, col, startIndex);
+                      } else {
+                        handleChange(record, col, startIndex, 'blur');
+                        pipeline.setStateAtKey(stateKeyIsEditing, defaultCellEditing);
+                      }
                     }
                   }
                   if (e.key === 'Tab') {
@@ -1748,7 +1749,7 @@ export function columnCustom(opts) {
                       }
                     }
                     handleChange(record, col, startIndex);
-                    pipeline.setStateAtKey(stateKeyIsEditing, false);
+                    pipeline.setStateAtKey(stateKeyIsEditing, defaultCellEditing);
                   }
                 }
               }
@@ -1768,11 +1769,9 @@ export function columnCustom(opts) {
               format: format,
               errors: errors,
               handleCellChange: handleCellChange,
-              handleNextCell: () => {},
               getValues: getValues,
               rowKey: 'rowId',
               control: control,
-              startCell: startCell,
               handleSubmit: handleSubmit,
               onSubmit: onSubmit
             }) : editAble ? /*#__PURE__*/React.createElement(React.Fragment, null, cellContent, !isSelecting && !cellEditing && rowRange &&
@@ -1793,7 +1792,7 @@ export function columnCustom(opts) {
               }
             }, /*#__PURE__*/React.createElement("span", {
               className: 'dot-point'
-            })), !isEditing && rowError && rowError[col.field]?.field === col.field && /*#__PURE__*/React.createElement("span", {
+            })), !isEditing.editing && rowError && rowError[col.field]?.field === col.field && /*#__PURE__*/React.createElement("span", {
               className: "isValid"
             })) : undefined
           });

package/es/ali-table/pipeline/features/treeSelect.js

@@ -224,7 +224,12 @@ export function treeSelect(opts) {
         // const isChecked = isRowChecked(rowKey, value, treeIndex, checkedStrategy, isDisabled)
         const isChecked = treeDataHelper.isChecked(rowKey);
         if (clickArea !== 'cell') {
-          return {};
+          return {
+            style: {
+              // cursor: 'not-allowed',
+              padding: 0
+            }
+          };
         }
 
         // const disabled = isNodeOrAncestorDisabled(rowKey, treeIndex, isDisabled)
@@ -232,13 +237,15 @@ export function treeSelect(opts) {
         if (disabled) {
           return {
             style: {
-              cursor: 'not-allowed'
+              cursor: 'not-allowed',
+              padding: 0
             }
           };
         }
         return mergeCellProps(prevCellProps, {
           style: {
-            cursor: 'pointer'
+            cursor: 'pointer',
+            padding: 0
           },
           onClick(e) {
             if (opts.stopClickEventPropagation) {

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

@@ -537,9 +537,6 @@ export type TableProps<RecordType = AnyObject> = {
      */
     validate?: any;
     onBlur?: (data: RecordType[]) => void;
-    toolbarItemTopRight?: ToolbarItem[];
-    toolbarItemsTop?: ToolbarItem[];
-    toolbarItemsBottom?: ToolbarItem[];
 };
 export type ExpandableConfig<RecordType> = {
     expandedRowKeys?: readonly Key[];

package/es/group-component/hook/utils.d.ts

@@ -196,10 +196,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/TableContainerEdit.js

@@ -254,6 +254,12 @@ const TableContainerEdit = props => {
 
   // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
 
+  const isAddAble = React.useMemo(() => {
+    if (!toolbarItems) {
+      return false;
+    }
+    return toolbarItems.find(it => it.key === 'ADD') ? true : false;
+  }, [toolbarItems]);
   const rowsFocus = React.useMemo(() => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
@@ -1038,12 +1044,6 @@ const TableContainerEdit = props => {
         }
       }
     }
-
-    // if (prevState && newState && prevState !== newState && changeType === 'enter') {
-
-    //   onSubmit(record)
-
-    // }
   };
   const handleDuplicate = React.useCallback(() => {
     // không tính tree
@@ -2254,7 +2254,8 @@ const TableContainerEdit = props => {
       rowEditable,
       onRowStyles,
       dataSourceFilter,
-      setIsExpandClick
+      setIsExpandClick,
+      isAddAble
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
     contextMenuItems: contextMenuItems,

package/es/table-component/body/TableBodyCellEdit.js

@@ -233,7 +233,8 @@ const TableBodyCellEdit = props => {
     pagination,
     handleAddMulti,
     setIsExpandClick,
-    format
+    format,
+    isAddAble
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const visibleColumns = table.getVisibleLeafColumns();
@@ -1391,7 +1392,9 @@ const TableBodyCellEdit = props => {
               });
               handleChange();
             } else {
-              handleChangeAndCreateRow();
+              if (isAddAble) {
+                handleChangeAndCreateRow();
+              }
             }
             setEditingKey?.('');
             reset?.();