es-grid-template 1.7.28 → 1.7.30

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

@@ -1,7 +1,9 @@
 import { flexRender } from "@tanstack/react-table";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import ReactDOMServer from 'react-dom/server';
+
+// import ReactDOMServer from 'react-dom/server'
+
 import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, flattenArray, flattenData,
 // getCellsByPosition,
 getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
@@ -20,7 +22,9 @@ const renderCellIndex = props => {
     parrents,
     cell
   } = props;
-  return /*#__PURE__*/React.createElement("span", null, parrents.map(pr => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, parrents.map(pr => {
     return `${pr.index + 1}.`;
   }), cell.row.index + 1);
 };
@@ -42,7 +46,9 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/React.createElement(Command, {
       id: id,
       key: item.id,
@@ -59,13 +65,14 @@ const renderCommand = args => {
         });
       }
     });
-  }));
+  })));
 };
 const renderSelection = args => {
   const {
     row
   } = args.cell;
   return /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc_cell-content",
     style: {
 
       // paddingLeft: `${row.depth * 2}rem`,
@@ -116,7 +123,9 @@ const TableBodyCellEdit = props => {
     handleDeleteContent,
     reset,
     setValue,
-    handleAddMulti,
+    getValues,
+    handleCellChange,
+    // handleAddMulti,
     dataErrors,
     expanded,
     setExpanded,
@@ -125,9 +134,11 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-  const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
-  const hasValue = html.trim().length > 0;
+
+  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
+  // const hasValue = html.trim().length > 0;
+
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const canEdit = isEditable(cell.column.columnDef.meta, record);
@@ -140,12 +151,16 @@ const TableBodyCellEdit = props => {
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const selectRowIds = React.useMemo(() => {
+    return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
+  }, [endCell, startCell, table]);
   const isCellSelected = React.useMemo(() => {
     if (!startCell || !endCell) return false;
-    const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
+
+    // const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
     const colIds = getColIdsBetween(table, startCell.colId, endCell.colId);
-    return rowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
-  }, [cell.column.id, cell.row.id, endCell, startCell, table]);
+    return selectRowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
+  }, [cell.column.id, cell.row.id, endCell, selectRowIds, startCell, table]);
   const editType = typeof columnMeta.editType === 'function' ? columnMeta.editType(record) : columnMeta.editType;
   const {
     rowRange,
@@ -176,136 +191,6 @@ const TableBodyCellEdit = props => {
   const isLeftPaste = colIdxPaste === pasteRangeState.startColIndex;
   const isRightPaste = colIdxPaste === pasteRangeState.endColIndex;
   const parrents = cell.row.getParentRows();
-  if (cell.column.id === "#") {
-    return /*#__PURE__*/React.createElement("td", {
-      key: cell.id,
-      className: classNames(`${prefix}-grid-cell`, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
-      }),
-      style: {
-        display: 'flex',
-        height: '36px',
-        width: cell.column.getSize(),
-        ...getCommonPinningStyles(cell.column)
-      }
-    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
-      className: "ui-rc-table-row-expand-trigger",
-      style: {
-        paddingLeft: `${cell.row.depth * 25}px`
-      }
-    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
-      // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
-        const keys = Object.keys(expanded);
-        // @ts-ignore
-        const tmp = {
-          ...expanded
-        };
-        if (keys.includes(cell.row.id)) {
-          delete tmp[cell.row.id];
-          setExpanded(tmp);
-        } else {
-          setExpanded(old => ({
-            ...old,
-            [cell.row.id]: true
-          }));
-        }
-      },
-      style: {
-        cursor: "pointer"
-      },
-      className: "ui-rc-table-row-expand"
-    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-    }) : /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-    })) : /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-    }))), renderCellIndex({
-      parrents,
-      cell
-    }));
-  }
-  if (cell.column.id === "command") {
-    return /*#__PURE__*/React.createElement("td", {
-      key: cell.id,
-      className: classNames(`${prefix}-grid-cell`, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
-      }),
-      style: {
-        display: 'flex',
-        height: '36px',
-        width: cell.column.getSize(),
-        ...getCommonPinningStyles(cell.column)
-      }
-    }, renderCommand({
-      cell,
-      commandClick,
-      id,
-      data: originData
-    }));
-  }
-  if (cell.column.id === "selection_column") {
-    return /*#__PURE__*/React.createElement("td", {
-      key: cell.id,
-      className: classNames(`${prefix}-grid-cell cell-editable111 `, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
-      }),
-      style: {
-        display: 'flex',
-        height: '36px',
-        width: cell.column.getSize(),
-        ...getCommonPinningStyles(cell.column)
-      }
-    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
-      className: "ui-rc-table-row-expand-trigger",
-      style: {
-        paddingLeft: `${cell.row.depth * 25}px`
-      }
-    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
-      // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
-        const keys = Object.keys(expanded);
-        // @ts-ignore
-        const tmp = {
-          ...expanded
-        };
-        if (keys.includes(cell.row.id)) {
-          delete tmp[cell.row.id];
-          setExpanded(tmp);
-        } else {
-          setExpanded(old => ({
-            ...old,
-            [cell.row.id]: true
-          }));
-        }
-      },
-      style: {
-        cursor: "pointer"
-      },
-      className: "ui-rc-table-row-expand"
-    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-    }) : /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-    })) : /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-    }))), renderSelection({
-      cell
-    }));
-  }
   const triggerDragPaste = (pasteState, ctrlKey) => {
     const tmpCols = table.getVisibleLeafColumns();
     const rowPasteIds = getRowIdsBetween(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
@@ -437,33 +322,6 @@ const TableBodyCellEdit = props => {
     const rs = unFlattenData(rsFilterData);
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
-  function handleMouseDown(rowId, colId) {
-    console.log('aaaaaa');
-    setIsSelecting?.(true);
-    if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
-      setStartCell?.({
-        rowId,
-        colId
-      });
-      setEndCell?.({
-        rowId,
-        colId
-      });
-      setRangeState?.(getSelectedCellMatrix(table, {
-        rowId,
-        colId
-      }, {
-        rowId,
-        colId
-      }));
-    }
-    if (focusedCell?.rowId !== cell.row.id || focusedCell?.colId !== cell.column.id) {
-      setFocusedCell?.({
-        rowId: cell.row.id,
-        colId: cell.column.id
-      });
-    }
-  }
   function handleMouseEnter(rowId, colId) {
     if (isSelecting) {
       setEndCell?.({
@@ -662,6 +520,7 @@ const TableBodyCellEdit = props => {
           });
         }
       }
+      return;
     }
     if (e.key === 'ArrowRight') {
       e.preventDefault();
@@ -693,6 +552,7 @@ const TableBodyCellEdit = props => {
           align: 'center'
         });
       }
+      return;
     }
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
@@ -725,14 +585,246 @@ const TableBodyCellEdit = props => {
           align: 'center'
         });
       }
+      return;
     }
     if (e.key === 'Delete') {
       handleDeleteContent?.();
+      return;
     }
     if (e.key === 'Enter') {
       handleEdit(e);
+      return;
+    }
+    if (e.key.length === 1) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleEdit(e);
+      // setValue(cell.column.id, editType === 'numeric' ? (!isNaN(Number(e.key)) ? Number(e.key) : '') : e.key)
     }
   }
+  function handleMouseDown(rowId, colId) {
+    setIsSelecting?.(true);
+    if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
+      setStartCell?.({
+        rowId,
+        colId
+      });
+      setEndCell?.({
+        rowId,
+        colId
+      });
+      setRangeState?.(getSelectedCellMatrix(table, {
+        rowId,
+        colId
+      }, {
+        rowId,
+        colId
+      }));
+    }
+    if (focusedCell?.rowId !== cell.row.id || focusedCell?.colId !== cell.column.id) {
+      setFocusedCell?.({
+        rowId: cell.row.id,
+        colId: cell.column.id
+      });
+    }
+  }
+  const handleMouseDownIndex = rowId => {
+    const allColumns = table.getVisibleLeafColumns();
+    const startCol = allColumns[0].id;
+    const endCol = allColumns[allColumns.length - 1].id;
+    setStartCell?.({
+      rowId,
+      colId: startCol
+    });
+    setEndCell?.({
+      rowId,
+      colId: endCol
+    });
+    setRangeState?.(getSelectedCellMatrix(table, {
+      rowId,
+      colId: startCol
+    }, {
+      rowId,
+      colId: endCol
+    }));
+  };
+  if (cell.column.id === "#") {
+    return /*#__PURE__*/React.createElement("td", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right',
+        // [`${prefix}-grid-cell-index-selected`]: rowRange?.includes(cell.row.id),
+        [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(cell.row.id)
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        userSelect: 'none',
+        width: cell.column.getSize(),
+        // minWidth: cell.column.getSize(),
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      },
+      onMouseDown: () => {
+        if (record[rowKey] === editingKey) {
+          setFocusedCell?.({
+            rowId: cell.row.id,
+            colId: cell.column.id
+          });
+        } else {
+          handleMouseDownIndex(cell.row.id);
+          if (editingKey) {
+            setTimeout(() => {
+              setEditingKey?.('');
+              reset?.();
+            });
+          }
+
+          // reset?.()
+        }
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+      // onClick: row.getToggleExpandedHandler(),
+      onClick: () => {
+        const keys = Object.keys(expanded);
+        // @ts-ignore
+        const tmp = {
+          ...expanded
+        };
+        if (keys.includes(cell.row.id)) {
+          delete tmp[cell.row.id];
+          setExpanded(tmp);
+        } else {
+          setExpanded(old => ({
+            ...old,
+            [cell.row.id]: true
+          }));
+        }
+      },
+      style: {
+        cursor: "pointer"
+      },
+      className: "ui-rc-table-row-expand"
+    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), renderCellIndex({
+      parrents,
+      cell
+    }));
+  }
+  if (cell.column.id === "command") {
+    return /*#__PURE__*/React.createElement("td", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        width: cell.column.getSize(),
+        // minWidth: cell.column.getSize(),
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, renderCommand({
+      cell,
+      commandClick,
+      id,
+      data: originData
+    }));
+  }
+  if (cell.column.id === "selection_column") {
+    return /*#__PURE__*/React.createElement("td", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell cell-editable111 `, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        width: cell.column.getSize(),
+        // minWidth: cell.column.getSize(),
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+      // onClick: row.getToggleExpandedHandler(),
+      onClick: () => {
+        const keys = Object.keys(expanded);
+        // @ts-ignore
+        const tmp = {
+          ...expanded
+        };
+        if (keys.includes(cell.row.id)) {
+          delete tmp[cell.row.id];
+          setExpanded(tmp);
+        } else {
+          setExpanded(old => ({
+            ...old,
+            [cell.row.id]: true
+          }));
+        }
+      },
+      style: {
+        cursor: "pointer"
+      },
+      className: "ui-rc-table-row-expand"
+    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), renderSelection({
+      cell
+    }));
+  }
+  const handleChange = () => {
+    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
+    const formState = getValues();
+    const itemState = getValues(cell.column.id);
+    const prevState = record[cell.column.id];
+    const newState = itemState;
+    if (newState !== prevState) {
+      handleCellChange?.({
+        key: cell.row.id,
+        field: cell.column.id,
+        record: formState,
+        prevState,
+        newState,
+        option: newState,
+        indexCol: cell.column.getIndex(),
+        indexRow: currentRowIndex,
+        type: 'blur'
+      });
+    }
+  };
   return /*#__PURE__*/React.createElement("td", {
     key: cell.id,
     ref: el => {
@@ -745,8 +837,11 @@ const TableBodyCellEdit = props => {
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
     "data-row-key": cell.row.id,
-    "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-html": !isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent)),
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
+    // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
+    ,
+    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? ''],
     className: classNames(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -769,6 +864,8 @@ const TableBodyCellEdit = props => {
     style: {
       display: 'flex',
       width: cell.column.getSize(),
+      // minWidth: cell.column.getSize(),
+      // maxWidth: cell.column.getSize(),
       height: '36px',
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
@@ -782,10 +879,14 @@ const TableBodyCellEdit = props => {
       } else {
         handleMouseDown(cell.row.id, cell.column.id);
         if (editingKey) {
-          setTimeout(() => {
-            setEditingKey?.('');
-            reset?.();
-          });
+          // setTimeout(() => {
+          //   setEditingKey?.('')
+          //   reset?.()
+          // })
+
+          handleChange();
+          setEditingKey?.('');
+          reset?.();
         }
 
         // reset?.()
@@ -812,8 +913,6 @@ const TableBodyCellEdit = props => {
           if (e.key === 'Enter') {
             e.preventDefault();
             e.stopPropagation();
-            setEditingKey?.('');
-            reset?.();
             const currentRowIndex = allRows.findIndex(r => r.id === cell.row.id);
             const nextRow = allRows[currentRowIndex + 1];
             if (nextRow) {
@@ -836,47 +935,38 @@ const TableBodyCellEdit = props => {
                 rowId: nextRow.id,
                 colId: cell.column.id
               }));
-
-              // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
-            } else {
-              const newRowId = newGuid();
-              handleAddMulti?.({}, 1, newRowId);
-              setFocusedCell?.({
-                rowId: newRowId,
-                colId: cell.column.id
-              });
-              setStartCell?.({
-                rowId: newRowId,
-                colId: cell.column.id
+              rowVirtualizer.scrollToIndex(nextRow.index, {
+                align: 'center'
               });
-              setEndCell?.({
-                rowId: newRowId,
-                colId: cell.column.id
-              });
-              setTimeout(() => {
-                setRangeState?.(getSelectedCellMatrix(table, {
-                  rowId: newRowId,
-                  colId: cell.column.id
-                }, {
-                  rowId: newRowId,
-                  colId: cell.column.id
-                }));
-                // rowVirtualizer.scrollToIndex(101)
-              }, 0);
-            }
-            if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
-
-              // handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event)
             } else {
-              // // focus cell hiện tại và tắt edit
-              // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
-              // setEditingKey('')
 
-              // thêm dòng mới
+              // const newRowId = newGuid()
+              // handleAddMulti?.({}, 1, newRowId)
+
+              // setFocusedCell?.({ rowId: newRowId, colId: cell.column.id });
 
-              // handleAddSingle()
-              // handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true)
+              // setStartCell?.({ rowId: newRowId, colId: cell.column.id });
+              // setEndCell?.({ rowId: newRowId, colId: cell.column.id });
+
+              // setTimeout(() => {
+              //   setRangeState?.(getSelectedCellMatrix(table, { rowId: newRowId, colId: cell.column.id }, { rowId: newRowId, colId: cell.column.id }))
+              //   // rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'end', })
+
+              // })
+
+              // setTimeout(() => {
+
+              //   rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'center', })
+
+              // }, 100)
             }
+            handleChange();
+            setEditingKey?.('');
+            reset?.();
+
+            // setTimeout(() => {
+
+            // })
           }
         }
       }
@@ -950,6 +1040,8 @@ const TableBodyCellEdit = props => {
     onDoubleClick: handlePointDoubleClick
   }, /*#__PURE__*/React.createElement("span", {
     className: 'dot-point'
-  })));
+  })), !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id && /*#__PURE__*/React.createElement("span", {
+    className: "isValid"
+  }));
 };
 export default TableBodyCellEdit;

package/es/table-component/footer/TableFooterRow.js

@@ -21,8 +21,6 @@ const TableFooterRow = ({
   // const a  =  table.getVisibleFlatColumns()
   const visibleColumns = table.getVisibleLeafColumns();
 
-  // console.log('a', a)
-
   // const 
 
   return /*#__PURE__*/React.createElement("tr", {

package/es/table-component/header/TableHeadCell.js

@@ -218,6 +218,7 @@ const TableHeadCell = props => {
     style: {
       // display: 'flex',
       width: header.getSize(),
+      // width: 'inherit',
       minWidth: header.getSize(),
       maxWidth: header.getSize(),
       ...getCommonPinningStyles(header.column),

package/es/table-component/hook/utils.js

@@ -42,7 +42,7 @@ export const getCommonPinningStyles = column => {
     // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    width: column.getSize(),
+    // width: column.getSize(),
     zIndex: isPinned ? 2 : 0
     // border: '1px solid #e5e7eb',
     // borderTop: 0,
@@ -309,7 +309,7 @@ export function getFixedFields(columns, type) {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
-      if ((col.fixed ?? col.fixedType) === type && col.field) {
+      if ((col.fixed ?? col.fixedType) === type && col.field && col.visible !== false) {
         result.push(col.field);
       }
       if (col.children && col.children.length > 0) {