es-grid-template 1.2.9 → 1.3.1

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import classNames from "classnames";
 import { Button, Dropdown, Form } from "antd";
@@ -13,7 +13,7 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, findItemPath, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 // import Command from "../Command";
 
@@ -26,6 +26,7 @@ dayjs.extend(customParseFormat);
 const toast = 'top-right';
 const GridEdit = props => {
   const {
+    id,
     tableRef,
     t,
     columns,
@@ -60,6 +61,7 @@ const GridEdit = props => {
     // selectedRowKeys,
     // defaultSelectedRowKeys
   } = selectionSettings || {};
+  const ref = useRef(null);
   const isSelecting = useRef(false);
   const startCell = useRef(null);
   const childrenColumnName = 'children';
@@ -494,35 +496,53 @@ const GridEdit = props => {
   useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
-      const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
+
+      // const tableId = id ? document.getElementById(id) : undefined
+      // const tableBodies = document.getElementsByClassName("ui-rc-table-tbody");
       const container = document.querySelector(".be-popup-container");
+      const tableBody = document.querySelector(`#${id} .ui-rc-table-tbody`);
       // const containerHidden = document.querySelector(".be-popup-container.ant-picker-dropdown-hidden")
 
       // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
-      const itemContainer = document.querySelector(".ui-rc-toolbar-selection-overflow-item");
+      const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
       const isInsideContainer = element.closest(".be-popup-container") && container;
-      const isInsideToolbar = element.closest(".ui-rc-toolbar-selection-overflow-item") && itemContainer;
+      const isInsideToolbar = element.closest(`#${id} .ui-rc-toolbar-selection-overflow-item`) && itemContainer;
       if (isInsideContainer || isInsideToolbar) {
+        // console.log('ooooooooooooo')
         return;
       }
-      if (tableBodies.length > 0) {
-        const tableBody = tableBodies[0]; // Chọn tbody đầu tiên (nếu có nhiều)
-
-        if (!tableBody.contains(event.target)) {
-          setEditingKey('');
-          isSelecting.current = false;
-          startCell.current = null;
-          setSelectedCells(new Set());
-          setRowsSelected(new Set());
-        } else {}
+
+      // if (ref.current && !ref.current.contains(event.target)) {
+      // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
+      if (ref.current && tableBody && !tableBody.contains(event.target)) {
+        setEditingKey('');
+        isSelecting.current = false;
+        startCell.current = null;
+        setSelectedCells(new Set());
+        setRowsSelected(new Set());
       }
+
+      // if (tableBodies.length > 0) {
+      //   const tableBody = tableBodies[0]; // Chọn tbody đầu tiên (nếu có nhiều)
+      //
+      //   if (!tableBody.contains(event.target as Node)) {
+      //     setEditingKey('')
+      //     isSelecting.current = false;
+      //     startCell.current = null;
+      //     setSelectedCells(new Set())
+      //     setRowsSelected(new Set())
+      //   } else {
+      //
+      //   }
+      // }
     };
     document.addEventListener("click", handleClickOutside);
     return () => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  const handleMouseDown = (record, row, col, e) => {
+  const handleMouseDown = useCallback((record, row, col, e) => {
+    setEditingKey('');
     if (e.button === 2) {
       e.stopPropagation();
       return;
@@ -559,7 +579,7 @@ const GridEdit = props => {
     //   setSelectedCells(new Set([`${row}-${col}`]));
     //   setRowsSelected(new Set())
     // }
-  };
+  }, []);
 
   // const handlePointEnter = (e: any) => {
   //
@@ -853,7 +873,7 @@ const GridEdit = props => {
     const selectedArray = Array.from(selectedCells).map(key => {
       const [row, col] = key.split("-").map(Number);
       // @ts-ignore
-      const columnKey = columns[col].field;
+      const columnKey = editAbleColumns(columns)[col - 1].field;
 
       // @ts-ignore
       return {
@@ -932,16 +952,17 @@ const GridEdit = props => {
             // Không vượt quá số cột
             return;
           }
-
-          // @ts-ignore
-          const columnKey = columns[targetCol].field;
-
-          // @ts-ignore
-          newData[targetRow] = {
-            ...newData[targetRow],
-            [columnKey]: cellValue.trim()
-          };
-          pastedColumns.add(columnKey);
+          if (columns[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = columns[targetCol].field;
+
+            // @ts-ignore
+            newData[targetRow] = {
+              ...newData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
+          }
         });
 
         // Lưu dòng được paste
@@ -980,16 +1001,17 @@ const GridEdit = props => {
             // Không vượt quá số cột
             return;
           }
-
-          // @ts-ignore
-          const columnKey = columns[targetCol].field;
-
-          // @ts-ignore
-          childData[targetRow] = {
-            ...childData[targetRow],
-            [columnKey]: cellValue.trim()
-          };
-          pastedColumns.add(columnKey);
+          if (columns[targetCol].editEnable) {
+            // @ts-ignore
+            const columnKey = columns[targetCol].field;
+
+            // @ts-ignore
+            childData[targetRow] = {
+              ...childData[targetRow],
+              [columnKey]: cellValue.trim()
+            };
+            pastedColumns.add(columnKey);
+          }
         });
 
         // Lưu dòng được paste
@@ -1288,7 +1310,7 @@ const GridEdit = props => {
             tabIndex: (rowIndex ?? 0) * columns.length + colIndex
           };
         },
-        render: (value, record, rowIndex) => {
+        render: (value, record) => {
           const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/React.createElement("div", {
             className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
@@ -1297,10 +1319,11 @@ const GridEdit = props => {
             }),
             onMouseDown: event => handleMouseDownColIndex(rowNumber, colIndex, event),
             onMouseEnter: event => handleMouseEnterColIndex(rowNumber, colIndex, event),
-            onClick: () => handleClickRowHeader(rowNumber, colIndex)
+            onClick: () => handleClickRowHeader(rowNumber, colIndex),
+            onMouseUp: handleMouseUp
           }, /*#__PURE__*/React.createElement("div", {
             className: 'ui-rc_content'
-          }, rowIndex + 1));
+          }, findItemPath(dataSource, record, rowKey)));
         }
       };
     }
@@ -1314,6 +1337,10 @@ const GridEdit = props => {
       onCell: (record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
         return {
+          // onKeyPress: () => {
+          //
+          // },
+
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
@@ -1427,14 +1454,15 @@ const GridEdit = props => {
         return /*#__PURE__*/React.createElement("div", {
           className: classNames('ui-rc_cell-content', {
             // selected: selectedCells.has(`${record[rowKey]}-${colIndex}`)
-            selected: selectedCells.has(`${rowNumber}-${colIndex}`)
+            selected: selectedCells.has(`${rowNumber}-${colIndex}`),
+            disable: !isEditable(column, record)
           }),
           onMouseDown: event => handleMouseDown(record, rowNumber, colIndex, event),
           onMouseEnter: () => handleMouseEnter(rowNumber, colIndex),
           onMouseUp: handleMouseUp
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && isEditable(column, record) !== false && !isSelectDragging &&
+        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && isEditable(column, record) && !isSelectDragging &&
         /*#__PURE__*/
         // showDraggingPoint &&
         React.createElement("div", {
@@ -1500,7 +1528,8 @@ const GridEdit = props => {
     style: {
       position: 'relative'
     },
-    onMouseUp: handleMouseUp
+    ref: ref
+    // onMouseUp={handleMouseUp}
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
       rowKey,
@@ -1521,7 +1550,7 @@ const GridEdit = props => {
           rowHoverBg: '#eb461912',
           rowSelectedBg: '#eb4619',
           rowSelectedHoverBg: '#eb4619',
-          cellFontSize: 12,
+          // cellFontSize: 12,
           cellFontSizeSM: 13,
           headerBg: '#ffffff',
           cellPaddingBlockSM: 7
@@ -1534,11 +1563,13 @@ const GridEdit = props => {
     }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
+    id: id,
     tableRef: tableRef,
     dataSource: dataSource,
     components: {
       ...components,
       body: {
+        // wrapper: () => <div></div>,
         cell: EditableCell
         // cell: () =>  <EditableCell  />,
       }
@@ -1551,11 +1582,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: {

package/lib/grid-component/ColumnsGroup/ColumnsGroup.js

@@ -43,7 +43,7 @@ const ColumnsGroup = props => {
     return rsCol.map(it => ({
       ...it,
       value: it.field,
-      label: t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title
+      label: t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText
     }));
   }, [rsCol, t]);
 
@@ -146,7 +146,7 @@ const ColumnsGroup = props => {
       ,
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
-        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
       }
       // hideSelectedOptions
     })), /*#__PURE__*/_react.default.createElement("div", {
@@ -175,7 +175,7 @@ const ColumnsGroup = props => {
       ,
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
-        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
       }
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: 'mb-1',
@@ -202,7 +202,7 @@ const ColumnsGroup = props => {
       ,
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
-        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
       }
     }))), /*#__PURE__*/_react.default.createElement(BoxAction, {
       className: 'px-1'

package/lib/grid-component/ConvertColumnTable.js

@@ -113,6 +113,7 @@ const ConvertColumnTable = props => {
     locale,
     t,
     buddhistLocale,
+    dataSource,
     dataSourceFilter: propDataSourceFilter,
     format,
     sortMultiple,

package/lib/grid-component/EditableCell.js

@@ -126,7 +126,7 @@ const EditableCell = props => {
               });
             }
           },
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate
@@ -166,7 +166,7 @@ const EditableCell = props => {
           },
           showTime: true,
           value: date,
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate,
@@ -217,7 +217,7 @@ const EditableCell = props => {
             height: '100%'
           },
           picker: editType,
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDateValue1,
           minDate: minDateValue1,
@@ -234,7 +234,7 @@ const EditableCell = props => {
             height: '100%'
           },
           picker: editType,
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxWeekValue,
           minDate: minWeekValue,
@@ -254,6 +254,7 @@ const EditableCell = props => {
             format: timeFormat,
             type: 'mask'
           },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           maxDate: maxTime,
           minDate: minTime,
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
@@ -327,7 +328,7 @@ const EditableCell = props => {
           defaultOpen: column.field === cellEditing?.column.field
           // autoFocus={true}
           ,
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           rowKey: keySelect,
@@ -407,7 +408,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
@@ -461,7 +462,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
@@ -531,7 +532,7 @@ const EditableCell = props => {
             overflow: 'auto'
           },
           treeData: newTreeData,
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           treeDefaultExpandAll: true,
           defaultOpen: column.field === cellEditing?.column.field
           // autoFocus={true}
@@ -745,6 +746,7 @@ const EditableCell = props => {
           customInput: _antd.Input
           // valueIsNumericString={true}
           ,
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
           autoComplete: 'off',
           className: (0, _classnames.default)('be-cell-editing  rounded-0 input-element', {
             'is-invalid': isInvalid,
@@ -788,6 +790,7 @@ const EditableCell = props => {
           ,
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           className: (0, _classnames.default)('be-cell-editing rounded-0 input-element'),
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
           value: !(0, _hooks.isNullOrUndefined)(value) ? value : '',
           onBlur: () => {
             const formState = getValues();

package/lib/grid-component/InternalTable.js

@@ -130,9 +130,20 @@ const InternalTable = props => {
     const newColumns = (0, _hooks.updateArrayByKey)(columns, newColumn, 'field');
     setColumns(newColumns);
   };
+
+  // ============================ RowKey ============================
+  const getRowKey = _react.default.useMemo(() => {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+    // @ts-ignore
+    return record => record?.[rowKey];
+  }, [rowKey]);
   const [transformSelectionColumns] = (0, _useColumns.default)({
     locale,
     t,
+    rowKey,
+    dataSource: mergerdData,
     buddhistLocale,
     dataSourceFilter: propDataSourceFilter,
     format,
@@ -146,15 +157,6 @@ const InternalTable = props => {
     return transformSelectionColumns(columns);
   }, [columns, transformSelectionColumns]);
 
-  // ============================ RowKey ============================
-  const getRowKey = _react.default.useMemo(() => {
-    if (typeof rowKey === 'function') {
-      return rowKey;
-    }
-    // @ts-ignore
-    return record => record?.[rowKey];
-  }, [rowKey]);
-
   // const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
   const triggerChangeColumns = (newColumns, type) => {
     setColumns(newColumns);
@@ -334,10 +336,12 @@ const InternalTable = props => {
     const handlePasteCallback = callbackData => {
       const newDataUpdate = (0, _hooks.updateData)(dataSource, callbackData, rowKey);
       triggerChangeData(newDataUpdate);
-      onCellPaste?.dataChange?.(newDataUpdate);
+
+      // onCellPaste?.dataChange?.(newDataUpdate)
     };
     if (onCellPaste && onCellPaste.onPasted) {
       if (onCellPaste.onPasted.length > 1) {
+        // có callback
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
@@ -345,6 +349,7 @@ const InternalTable = props => {
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
       } else {
+        // không có callback
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
@@ -352,8 +357,11 @@ const InternalTable = props => {
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
         triggerChangeData(newData);
-        onCellPaste.dataChange?.(newData);
+
+        // onCellPaste.dataChange?.(newData)
       }
+    } else {
+      triggerChangeData(newData);
     }
   };
   const TableComponent = groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;

package/lib/grid-component/TableGrid.js

@@ -309,6 +309,7 @@ const TableGrid = props => {
   }), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table, (0, _extends2.default)({
     ref: tableRef
   }, rest, {
+    // id={newGuid()}
     locale: {
       ...locale,
       emptyText: showEmptyText !== false ? /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {

package/lib/grid-component/hooks/useColumns.d.ts

@@ -1,7 +1,8 @@
 import type { AnyObject, IGroupSetting } from "../type";
 export declare const SELECTION_COLUMN: {};
-interface UseColumnsConfig {
+interface UseColumnsConfig<RecordType> {
     t?: any;
+    dataSource: RecordType[];
     buddhistLocale?: any;
     dataSourceFilter?: any;
     locale?: any;
@@ -11,6 +12,7 @@ interface UseColumnsConfig {
     groupAble?: boolean;
     groupSetting?: IGroupSetting;
     groupColumns?: string[];
+    rowKey?: any;
 }
-declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig) => readonly [any];
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
 export default useColumns;

package/lib/grid-component/hooks/useColumns.js

@@ -50,7 +50,9 @@ const useColumns = config => {
     handleResize,
     groupAble,
     groupColumns,
-    groupSetting
+    groupSetting,
+    dataSource,
+    rowKey
   } = config;
 
   // ====================== Selections ======================
@@ -149,8 +151,8 @@ const useColumns = config => {
   const transformColumns = (0, _react.useCallback)(columns => {
     // >>>>>>>>>>> Support selection
     const cloneColumns = [...columns];
-    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
-    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
 
     // ===================== Render =====================
 
@@ -192,7 +194,10 @@ const useColumns = config => {
             onCell: () => ({
               className: 'cell-number'
             }),
-            render: (_, __, rowIndex) => rowIndex + 1
+            render: (val, record) => {
+              // return rowIndex + 1
+              return (0, _utils.findItemPath)(dataSource, record, rowKey);
+            }
           };
         }
         if (col.key === 'command') {

package/lib/grid-component/hooks/utils.d.ts

@@ -71,3 +71,4 @@ export declare const checkChild: (inputArray: any[]) => boolean;
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
 export declare const isArraysEqual: (arr1: any[], arr2: any[]) => boolean;
 export declare const editAbleColumns: <T>(columns: ColumnsTable<T>) => ColumnTable<T>[];
+export declare const findItemPath: (tree: any[], targetItem: any, rowKey: any) => any;

package/lib/grid-component/hooks/utils.js

@@ -8,7 +8,7 @@ exports.addRowIdArray = void 0;
 exports.addRows8 = addRows8;
 exports.editAbleColumns = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = void 0;
 exports.findAllChildrenKeys = findAllChildrenKeys;
-exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemByKey = void 0;
+exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.removeColumns = exports.parseBooleanToValue = exports.newGuid = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isEditable = exports.isDisable = exports.isColor = exports.isArraysEqual = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -850,4 +850,26 @@ exports.isArraysEqual = isArraysEqual;
 const editAbleColumns = columns => {
   return columns.filter(col => col.field !== '#' && col.field !== 'index' && col.field !== 'command' && col.visible !== false);
 };
-exports.editAbleColumns = editAbleColumns;
+exports.editAbleColumns = editAbleColumns;
+const findItemPath = (tree, targetItem, rowKey) => {
+  let result = null;
+  function dfs(nodes, path = []) {
+    for (let i = 0; i < nodes.length; i++) {
+      const currentPath = [...path, i + 1];
+      const node = nodes[i];
+      if (node?.[rowKey] === targetItem?.[rowKey]) {
+        result = currentPath.join('.');
+        return true;
+      }
+      if (node?.children) {
+        if (dfs(node.children, currentPath)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  dfs(tree);
+  return result;
+};
+exports.findItemPath = findItemPath;

package/lib/grid-component/styles.scss

@@ -133,6 +133,21 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
   .#{$prefix}-table-tbody {
 
+
+    .#{$prefix}-table-cell {
+      line-height: 22px;
+
+      .ui-rc-table-cell-content {
+        line-height: 22px;
+      }
+
+      &.#{$prefix}-table-cell-fix-left-last {
+        .#{$prefix}-table-cell-content {
+        }
+      }
+
+    }
+
     .#{$prefix}-table-row {
 
       &.#{$prefix}-table-row-selected {
@@ -212,6 +227,10 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
     .#{$prefix}-table-cell {
 
+      .ui-rc-table-cell-content {
+        line-height: 22px;
+      }
+
       &.#{$prefix}-table-cell-fix-left-last {
         .#{$prefix}-table-cell-content {
           //overflow: visible;
@@ -604,6 +623,10 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       background-color: $cell-selected-bg;
     }
 
+    .ui-rc_cell-content.disable {
+      background-color: #f0f0f0;
+    }
+
     .ui-rc_cell-content--index {
       &.focus {
         background-color: $cell-index-focus-bg;
@@ -688,6 +711,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
               transition: 0.3s;
               white-space: nowrap;
               overflow: hidden;
+              line-height: 22px;
             }
           }
         }