es-grid-template 1.5.0 → 1.5.2

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

@@ -207,6 +207,7 @@ const GridEdit = props => {
     showDefaultContext,
     validate,
     setTooltipContent,
+    onBlur,
     ...rest
   } = props;
   const ref = useRef(null);
@@ -223,6 +224,8 @@ const GridEdit = props => {
   // quét vùng chọn
   const isDragMouse = useRef(false);
   const isMouseDown = useRef(false);
+  const editingKey = useRef('');
+  const cellEditing = useRef({});
 
   // quét vùng được paste - tiếp tục hiển thị con trỏ crosshair
   // const isPasteDragging = useRef(false);
@@ -368,7 +371,9 @@ const GridEdit = props => {
   // }, [])
 
   const [form] = Form.useForm();
-  const [editingKey, setEditingKey] = useState('');
+
+  // const [editingKey, setEditingKey] = useState<string | number>('')
+
   const [dataErrors, setDataErrors] = useState([]);
   const [isFilter, setIsFilter] = React.useState(false);
   const [rangeCells, setRangeCells] = useState(new Set());
@@ -377,7 +382,9 @@ const GridEdit = props => {
     type: ''
   });
   const [rowsAdd, setRowsAdd] = useState(1);
-  const [cellEditing, setCellEditing] = useState(null);
+
+  // const [cellEditing, setCellEditing] = useState<any>(null)
+
   const [isPasteDragging, setIsPasteDragging] = useState(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
 
   const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(() => {
@@ -490,10 +497,11 @@ const GridEdit = props => {
     // onRemoveBorderSelectedCell(selectedCells.current, id)
     //
 
-    setTimeout(() => {
-      // onAddBgSelectedCell(selectedCells.current, id)
-      // onAddBorderSelectedCell(selectedCells.current, id)
-    }, 10);
+    // setTimeout(() => {
+    // onAddBgSelectedCell(selectedCells.current, id)
+    // onAddBorderSelectedCell(selectedCells.current, id)
+    // }, 10)
+
     const defaultRowValue = getDefaultValue(defaultValue);
     // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
 
@@ -681,10 +689,11 @@ const GridEdit = props => {
     }
   }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
   const handleDeleteRows = React.useCallback(item => {
-    setTimeout(() => {
-      // onAddBgSelectedCell(selectedCells.current, id)
-      // onAddBorderSelectedCell(selectedCells.current, id)
-    });
+    // setTimeout(() => {
+    // onAddBgSelectedCell(selectedCells.current, id)
+    // onAddBorderSelectedCell(selectedCells.current, id)
+    // })
+
     if (item.onClick) {
       item.onClick({
         toolbar: item
@@ -716,7 +725,9 @@ const GridEdit = props => {
         const rowIndex = Number(rowIndexStr);
         const colIndex = Number(colIndexStr);
         const field = colIndexToField[colIndex];
-        if (newData[rowIndex] && field && field in newData[rowIndex]) {
+        const column = flatColumns2(visibleCols)[colIndex];
+        const rowData = flattenData(childrenColumnName, dataSource)[rowIndex];
+        if (newData[rowIndex] && field && field in newData[rowIndex] && isEditable(column, rowData)) {
           // @ts-ignore
           newData[rowIndex][field] = '';
         }
@@ -947,9 +958,13 @@ const GridEdit = props => {
     mode: 'onChange',
     resolver: validate ? yupResolver(validate) : undefined
   });
-  const isEditing = React.useCallback(record => {
-    return record[rowKey] === editingKey;
-  }, [editingKey, rowKey]);
+
+  // const isEditing = React.useCallback((record: RecordType) => {
+  //   return record[rowKey as any] === editingKey.current
+  // }, [editingKey, rowKey])
+
+  // console.log('isEditing', isEditing)
+
   React.useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
@@ -976,9 +991,12 @@ const GridEdit = props => {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
 
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
-        // setEditingKey('')
+        if (editingKey.current) {
+          onBlur?.(dataSource);
+        }
         setTimeout(() => {
-          setEditingKey('');
+          // setEditingKey('')
+          editingKey.current = '';
         });
         isSelecting.current = false;
         startCell.current = null;
@@ -996,13 +1014,14 @@ const GridEdit = props => {
 
     // document.addEventListener('click', handleClickOutside)
     document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
+    // document.addEventListener('touchstart', handleClickOutside)
+
     return () => {
       // document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
+      // document.removeEventListener('touchstart', handleClickOutside)
     };
-  }, [id]);
+  }, [dataSource, id, onBlur]);
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
     const tmpCols = {
@@ -1412,12 +1431,14 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
-    if (editingKey && editingKey === record[rowKey]) {
+    if (editingKey && editingKey.current === record[rowKey]) {
       return;
     }
-    if (record[rowKey] !== editingKey && editingKey !== '') {
+    if (record[rowKey] !== editingKey.current && editingKey.current !== '') {
       setTimeout(() => {
-        setEditingKey('');
+        //   setEditingKey('')
+        editingKey.current = '';
+        onBlur?.(dataSource);
       });
     }
 
@@ -1653,8 +1674,9 @@ const GridEdit = props => {
       e.stopPropagation();
       return;
     }
-    if (editingKey) {
-      setEditingKey('');
+    if (editingKey.current) {
+      editingKey.current = '';
+      // setEditingKey('')
     }
     isSelectingRow.current = true;
     rowStart.current = {
@@ -1870,12 +1892,20 @@ const GridEdit = props => {
   const handleEdit = (record, col, editType, e) => {
     onRemoveBorderSelectedCell(selectedCells.current, id);
     setTooltipContent('');
+
     // @ts-ignore
-    setEditingKey(record[rowKey]);
-    setCellEditing({
+    // setEditingKey(record[rowKey])
+    editingKey.current = record[rowKey];
+
+    // setCellEditing({
+    //   row: record,
+    //   column: col
+    // })
+
+    cellEditing.current = {
       row: record,
       column: col
-    });
+    };
     reset();
 
     // const formattedRecord = { ...record };
@@ -1949,7 +1979,7 @@ const GridEdit = props => {
     }
   };
   const handleFocusCell = (rowIndex, colIndex, col, scrollType, e, isTimeout) => {
-    const isEdit = editingKey !== '';
+    const isEdit = editingKey.current !== '';
     const cellEdit = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowIndex}"].cell-editing[data-col-index="${colIndex}"]`);
     const cell = document.querySelector(`.ui-rc-table-row .cell-editable[data-row-index="${rowIndex}"].cell-editable[data-col-index="${colIndex}"]`);
     const updateSelection = () => {
@@ -1993,7 +2023,8 @@ const GridEdit = props => {
           scrollToCell(rowIndex, colIndex, editingCell, 'horizontal');
         }
         if (scrollType === 'vertical' && cellEditable) {
-          setEditingKey('');
+          // setEditingKey('')
+          editingKey.current = '';
           updateSelection();
           scrollToCell(rowIndex, colIndex, cellEdit, 'vertical');
           if (e?.key !== 'Tab') {
@@ -2042,13 +2073,13 @@ const GridEdit = props => {
           return {
             'data-row-index': rowNumber,
             onPaste: event => {
-              if (editingKey === '') {
+              if (editingKey.current === '') {
                 handlePaste(record, colIndex + 1, rowNumber, event);
                 event.preventDefault();
               }
             },
             onCopy: e => {
-              if (editingKey === '') {
+              if (editingKey.current === '') {
                 handleCopy(e);
                 e.preventDefault();
               }
@@ -2089,7 +2120,7 @@ const GridEdit = props => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key === 'Control' && event.ctrlKey) {} else {
               if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-                if (record[rowKey] !== editingKey && isEditable(column, record)) {
+                if (record[rowKey] !== editingKey.current && isEditable(column, record)) {
                   // ~~ khi editingKey = ''
                   event.preventDefault();
                   event.stopPropagation();
@@ -2112,7 +2143,7 @@ const GridEdit = props => {
                   if (event.key === 'Enter') {
                     event.preventDefault();
                     event.stopPropagation();
-                    if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
+                    if (editingKey && editingKey.current !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
                       handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                     } else {
                       // // focus cell hiện tại và tắt edit
@@ -2128,7 +2159,7 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'Tab') {
-                if (editingKey) {} else {
+                if (editingKey.current) {} else {
                   if (colIndex + 1 !== visibleCols.length) {
                     handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                   } else {
@@ -2138,7 +2169,7 @@ const GridEdit = props => {
                 }
               }
               if (event.key === 'ArrowRight' && colIndex + 1 !== visibleCols.length) {
-                if (editingKey !== '') {} else {
+                if (editingKey.current !== '') {} else {
                   handleFocusCell(rowNumber, colIndex + 1, column, 'horizontal', event);
                 }
               }
@@ -2147,47 +2178,51 @@ const GridEdit = props => {
                   event.stopPropagation();
                   event.preventDefault();
                 } else {
-                  if (editingKey !== '') {} else {
+                  if (editingKey.current !== '') {} else {
                     handleFocusCell(rowNumber, colIndex - 1, column, 'horizontal', event);
                   }
                 }
               }
               if (event.key === 'ArrowDown' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length) {
-                if (isEditing(record) && (getEditType(column, record) === 'treeSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'asyncSelect')) {
+                // if (isEditing(record) && (
+                if (record[rowKey] === editingKey.current && (getEditType(column, record) === 'treeSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'asyncSelect')) {
                   event.stopPropagation();
                 } else {
                   handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
                 }
               }
               if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
-                if (isEditing(record) && (getEditType(column, record) === 'asyncSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'treeSelect')) {
+                if (record[rowKey] === editingKey.current && (getEditType(column, record) === 'asyncSelect' || getEditType(column, record) === 'select' || getEditType(column, record) === 'selectTable' || getEditType(column, record) === 'treeSelect')) {
                   event.stopPropagation();
                 } else {
                   handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
                 }
               }
               if (event.key === 'Delete') {
+                if (!isEditable(column, record)) {}
                 handleDeleteContent();
               }
               if (event.key === 'Escape') {
-                setEditingKey('');
+                // setEditingKey('')
+                editingKey.current = '';
               }
             }
           },
           onPaste: event => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handlePaste(record, colIndex, rowNumber, event);
               event.preventDefault();
             }
           },
           onCopy: e => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handleCopy(e);
               e.preventDefault();
             }
           },
           onDoubleClick: event => {
-            if (!isEditing(record) && record[rowKey] !== editingKey && isEditable(column, record)) {
+            // if (!isEditing(record) && record[rowKey] !== editingKey.current && isEditable(column as any, record)) {
+            if (!(record[rowKey] === editingKey.current) && record[rowKey] !== editingKey.current && isEditable(column, record)) {
               handleEdit(record, column, getEditType(column, record), event);
 
               // onRemoveBgSelectedCell(selectedCells.current, id)
@@ -2212,26 +2247,21 @@ const GridEdit = props => {
             }
           },
           onClick: () => {
-            if (record[rowKey] !== editingKey && editingKey !== '') {
+            if (record[rowKey] !== editingKey.current && editingKey.current !== '') {
               // setEditingKey('')
             } else {
-              if (record[rowKey] !== editingKey) {
+              if (record[rowKey] !== editingKey.current) {
                 onAddBorderSelectedCell(selectedCells.current, id);
               }
-              if (editingKey) {
+              if (editingKey.current) {
                 handleCellClick(rowNumber, record, column);
               }
             }
           },
           // className: isEditing(record) ? `rc-ui-cell-editable cell-editing ${!isEditable(column as any, record) ? 'disable' : ''}` : `rc-ui-cell-editable cell-editable ${!isEditable(column as any, record) ? 'disable' : ''}`,
           className: classNames('rc-ui-cell-editable', {
-            'cell-editing': isEditing(record),
-            'cell-editable': !isEditing(record),
-            // selected: isSelectedCell(rangeCells,rowIndex, colIndex),
-            // 'cell-border-bottom': isRangeCell(rangeCells, 'bottom',rowIndex, colIndex),
-            // 'cell-border-right': isRangeCell(rangeCells, 'right',rowIndex, colIndex),
-            // 'cell-border-top': isRangeCell(rangeCells, 'top',rowIndex, colIndex),
-            // 'cell-border-left': isRangeCell(rangeCells, 'left',rowIndex, colIndex),
+            'cell-editing': record[rowKey] === editingKey.current,
+            'cell-editable': !(record[rowKey] === editingKey.current),
             disable: !isEditable(column, record)
           }),
           record,
@@ -2243,9 +2273,11 @@ const GridEdit = props => {
           title: getValueCell(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          'data-tooltip-id': "tooltip-cell-content",
-          editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
-          cellEditing,
+          // 'data-tooltip-id': "tooltip-cell-content",
+          'data-tooltip-id': `${id}-tooltip-cell-content`,
+          // editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column as any, record),
+          editing: record.rowId === editingKey.current && rowEditable?.(record) !== false && isEditable(column, record),
+          cellEditing: cellEditing.current,
           t,
           tabIndex: (rowIndex ?? 0) * visibleCols.length + colIndex,
           style: isPasteDragging ? {
@@ -2260,13 +2292,13 @@ const GridEdit = props => {
             handleClickColHeader(column, colIndex);
           },
           onCopy: e => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handleCopy(e);
               e.preventDefault();
             }
           },
           onPaste: event => {
-            if (editingKey === '') {
+            if (editingKey.current === '') {
               handlePaste(dataSource[0], colIndex, 0, event);
               event.preventDefault();
             }
@@ -2282,18 +2314,12 @@ const GridEdit = props => {
         const cellFormat = getFormat(colFormat, format);
         const rowError = dataErrors.find(it => it.index === rowNumber);
         const cellError = rowError && column.field && rowError[column.field]?.field === column.field ? rowError[column.field] : null;
-
-        // const aaa =  dataErrors.find((it) => column?.field && it[column.field].field === column.field && it.index === rowNumber)
-        // const aaa =  column.field && rowError && rowError[column.field]?.field === column?.field
-
         return /*#__PURE__*/React.createElement("div", {
           className: classNames('ui-rc_cell-content', {
-            // disable: !isEditable(column as any, record)
             isValid: column.field && rowError && rowError[column.field]?.field === column?.field
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: event => {
-            // setTooltipContent(cellError ? cellError.message : renderContent(column as any, value, record, rowIndex, cellFormat))
             setTooltipContent(cellError ? cellError.message : '');
             handleMouseEnter(rowNumber, colIndex, event);
           },
@@ -2304,20 +2330,9 @@ const GridEdit = props => {
               isDragMouse.current = true;
             }
           }
-
-          // onClick={(event) => {
-          //
-          //   handleClickCell(event)
-          //
-          // }}
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, cellFormat)),
-        // selectedCells.current && selectedCells.current.size > 0 && getLastSelectCell(selectedCells.current).row === rowNumber &&
-        // getLastSelectCell(selectedCells.current).col === colIndex &&
-        // isEditable(column as any, record) &&
-
-        !isDragMouse.current && /*#__PURE__*/React.createElement("div", {
+        }, renderContent(column, value, record, rowIndex, cellFormat)), !isDragMouse.current && /*#__PURE__*/React.createElement("div", {
           className: 'dragging-point hidden',
           onMouseDown: e => {
             // e.stopPropagation()
@@ -2408,7 +2423,8 @@ const GridEdit = props => {
       items: toolbarItemsBottom ?? [],
       mode: 'scroll',
       onClick: ({}) => {
-        setEditingKey('');
+        editingKey.current = '';
+        // setEditingKey('')
       }
     }));
   };
@@ -2481,6 +2497,7 @@ const GridEdit = props => {
     id: id
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
+      id: id ?? '',
       rowKey,
       form,
       format,

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

@@ -20,10 +20,12 @@ const Group = props => {
     groupAble,
     expandable,
     dataSource,
+    rowKey,
     getRowKey,
     groupSetting,
     groupColumns,
     triggerGroupColumns,
+    onExpandClick,
     ...rest
   } = props;
   const {
@@ -58,9 +60,16 @@ const Group = props => {
       newExpandedKeys = [...mergedExpandedKeys];
     } else {
       newExpandedKeys = [...mergedExpandedKeys, key];
+      // gọi sự kiện expand
+
+      onExpandClick?.({
+        expandedKeys: newExpandedKeys,
+        key: key,
+        rowData: record
+      });
     }
     setInnerExpandedKeys(newExpandedKeys);
-  }, [getRowKey, mergedExpandedKeys, dataSource]);
+  }, [getRowKey, dataSource, mergedExpandedKeys, onExpandClick]);
   const handleExpandAllGroup = () => {
     setInnerExpandedKeys(findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? []);
   };
@@ -107,6 +116,7 @@ const Group = props => {
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
     id: id,
+    rowKey: rowKey,
     columns: columns,
     style: {
       ...style,

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

@@ -84,6 +84,9 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
+export type LoadOptionsArgs = {
+    rowData?: any;
+};
 export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title' | 'format' | 'commandItems'> & {
     field?: string;
     key?: any;
@@ -195,6 +198,12 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onCellClick?: (args: ICellClick, callback?: any) => void;
     rowEditable?: (rowData: RecordType) => boolean;
     validate?: any;
+    onBlur?: (data: RecordType[]) => void;
+    onExpandClick?: (args: {
+        expandedKeys: string[];
+        key: string;
+        rowData: any;
+    }) => void;
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

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

@@ -19,6 +19,7 @@ export interface IContext<RecordType> {
     getValues?: any;
     handleCellChange?: (args: ContextCellChange<RecordType>) => void;
     getRowKey?: GetRowKey<RecordType>;
+    id: string;
 }
 export type ContextCellChange<RecordType = AnyObject> = {
     key: string | keyof RecordType | GetRowKey<RecordType>;

package/es/grid-component/useContext.js

@@ -3,5 +3,6 @@ import { createContext } from 'react';
 // import {AnyObject} from "antd/es/_util/type";
 
 export const TableContext = /*#__PURE__*/createContext({
-  rowKey: 'id'
+  rowKey: 'rowId',
+  id: ''
 });

package/lib/grid-component/ColumnsChoose.js

@@ -498,7 +498,7 @@ const ColumnsChoose = props => {
       autoExpandParent: autoExpandParent
       // treeData={treeData}
       ,
-      treeData: columns,
+      treeData: columns.filter(it => !columnsGroup?.includes(it.field)),
       defaultExpandAll: true,
       checkable: true
       // onSelect={(keys, info) => {

package/lib/grid-component/EditableCell.js

@@ -63,7 +63,8 @@ const EditableCell = props => {
     getValues,
     handleCellChange,
     getRowKey,
-    errors
+    errors,
+    id
   } = (0, _react.useContext)(_useContext.TableContext);
   const datePickerRef = _react.default.useRef(null);
   const dateTimePickerRef = _react.default.useRef(null);
@@ -162,7 +163,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'datetime':
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker
@@ -218,7 +219,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'month':
       case 'quarter':
@@ -244,7 +245,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'week':
         const weekFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
@@ -264,7 +265,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'time':
         const timeFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
@@ -291,7 +292,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'selectTable':
         const rr = selectColumns ?? [];
@@ -329,6 +330,7 @@ const EditableCell = props => {
           options: options,
           defaultOptions: options,
           value: valueSelectTable,
+          rowData: record,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -398,7 +400,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'select':
         let valueSelect = value;
@@ -456,7 +458,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'asyncSelect':
         let valueAsyncSelect = value;
@@ -553,7 +555,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'treeSelect':
         // let valueTreeSelect
@@ -626,7 +628,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'checkbox':
         return /*#__PURE__*/_react.default.createElement("div", {
@@ -849,7 +851,7 @@ const EditableCell = props => {
             }
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         }));
       default:
         return /*#__PURE__*/_react.default.createElement(_antd.Input, {
@@ -912,7 +914,7 @@ const EditableCell = props => {
           onChange: onChange,
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
     }
   };

package/lib/grid-component/GridStyle.js

@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})(["height:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined);
+})(["height:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{&:has(.ui-rc-table-tbody-virtual-scrollbar-horizontal){padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{min-height:", ";}.ui-rc-table-body{&:has(.ui-rc-table-placeholder){height:", ";}table{height:100%;.ui-rc-table-placeholder{vertical-align:top;}}}.ui-rc-table-placeholder{}}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll - 1}px` : undefined);