es-grid-template 1.7.37 → 1.7.39

package/lib/grid-component/InternalTable.js

@@ -6,39 +6,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.SELECTION_COLUMN = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _react = _interopRequireWildcard(require("react"));
 require("react-resizable/css/styles.css");
-var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _hooks = require("./hooks");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("dayjs/locale/es");
 require("dayjs/locale/vi");
-var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
-var _Grid = _interopRequireDefault(require("./table/Grid"));
 var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
 var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
+var _Grid = _interopRequireDefault(require("./table/Grid"));
+var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
 var _en_US2 = _interopRequireDefault(require("rc-master-ui/es/locales/en_US"));
 var _vi_VN2 = _interopRequireDefault(require("rc-master-ui/es/locales/vi_VN"));
 require("./styles.scss");
-var _columns = require("./hooks/columns");
-var _Group = _interopRequireDefault(require("./table/Group"));
-var _sweetalert = _interopRequireDefault(require("sweetalert2"));
-var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
-var _reactTooltip = require("react-tooltip");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _HeaderContent = _interopRequireDefault(require("./hooks/content/HeaderContent"));
-var _becoxyIcons = require("becoxy-icons");
-var _rcMasterUi = require("rc-master-ui");
-var _antd = require("antd");
 var _icons = require("@ant-design/icons");
-var _modifiers = require("@dnd-kit/modifiers");
 var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
 var _sortable = require("@dnd-kit/sortable");
-var _reactResizable = require("react-resizable");
+var _antd = require("antd");
+var _becoxyIcons = require("becoxy-icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcMasterUi = require("rc-master-ui");
+var _reactTooltip = require("react-tooltip");
+var _sweetalert = _interopRequireDefault(require("sweetalert2"));
+var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
+var _columns = require("./hooks/columns");
+var _HeaderContent = _interopRequireDefault(require("./hooks/content/HeaderContent"));
+var _Group = _interopRequireDefault(require("./table/Group"));
 var _faker = require("@faker-js/faker");
-var _InfiniteTable = _interopRequireDefault(require("./table/InfiniteTable"));
-var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var _Modal = _interopRequireDefault(require("antd/es/modal/Modal"));
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _reactResizable = require("react-resizable");
+var _InfiniteTable = _interopRequireDefault(require("./table/InfiniteTable"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import useColumns from "./hooks/useColumns";
@@ -221,9 +221,9 @@ const InternalTable = props => {
     const handleWindowResize = () => {
       setWindowSize(getWindowSize());
     };
-    window.addEventListener("resize", handleWindowResize);
+    window.addEventListener('resize', handleWindowResize);
     return () => {
-      window.removeEventListener("resize", handleWindowResize);
+      window.removeEventListener('resize', handleWindowResize);
     };
   }, []);
   const [scrollHeight, setHeight] = (0, _react.useState)(0);
@@ -409,7 +409,7 @@ const InternalTable = props => {
           // handleSearch()
           // close()
         }
-      }, t ? t("Clear") : 'Clear')));
+      }, t ? t('Clear') : 'Clear')));
     },
     filterIcon: filtered => /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
       fontSize: 12
@@ -594,7 +594,7 @@ const InternalTable = props => {
             if (currentGroupColumn?.template) {
               return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
             }
-            return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
+            return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ":", ' ', (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
           return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
@@ -666,7 +666,7 @@ const InternalTable = props => {
     if (tableRef.current && type === 'columnChoose') {
       tableRef.current.scrollTo({
         left: 0.1,
-        behavior: "smooth"
+        behavior: 'smooth'
       });
     }
     onChooseColumns?.({
@@ -707,17 +707,11 @@ const InternalTable = props => {
     setColumns((0, _hooks.updateColumnsByGroup)(mergedColumns, groupedColumns));
     if (groupSetting) {
       if (groupSetting.client === false) {
-
         // setIsTree(true)
-
         // setGroupOpen([])
-
         // const dt = ungroupArray(dataSource)
-
         // const rs = groupArrayByColumns2(dt, [...value])
-
         // setResource([...rs])
-
         // if (groupSetting.onGroup) {
         //   groupSetting.onGroup({
         //     columnGrouped: value,
@@ -966,7 +960,6 @@ const InternalTable = props => {
     } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
-
     // height={isFullScreen ? windowSize.innerHeight - 100 : propsHeight}
     ,
     height: propsHeight,
@@ -1016,10 +1009,10 @@ const InternalTable = props => {
     style: {
       maxWidth: '100%',
       height: '100%'
-    },
-    onClose: () => setIsFullScreen(false),
+    }
+    // onClose={() => setIsFullScreen(false)}
+    ,
     onCancel: () => setIsFullScreen(false)
-
     // destroyOnClose
     ,
     styles: {
@@ -1081,7 +1074,6 @@ const InternalTable = props => {
       y: scrollHeight1 - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
     ,
-
     height: windowSize.innerHeight - 35,
     scrollHeight: scrollHeight1,
     components: {

package/lib/grid-component/hooks/content/TooltipContent.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactElement, ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
+import React from "react";
 type Props = {
     t?: any;
     content?: any;

package/lib/table-component/InternalTable.js

@@ -68,14 +68,8 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     selectionSettings,
-    // infiniteScroll,
-    // wrapSettings,
-    // onFilter,
-    // expandable,
-    // contextMenuItems: propContextMenuItems,
-    // contextMenuHidden,
-    contextMenuClick,
-    contextMenuOpen,
+    // contextMenuClick,
+    // contextMenuOpen,
     height,
     ...rest
   } = props;
@@ -104,32 +98,6 @@ const InternalTable = props => {
       window.removeEventListener('resize', handleWindowResize);
     };
   }, []);
-
-  // const local = lang && lang === 'en' ? en : vi
-  // const dateRangeLocale = lang && lang === 'en' ? enDr : viDr
-
-  // const buddhistLocale: PickerLocale = {
-  //   ...local,
-  //   lang: {
-  //     ...local.lang
-  //   }
-  // }
-
-  // const menuRef = React.useRef<any>(null)
-  // const viewportWidth = windowSize.innerWidth
-  // const viewportHeight = windowSize.innerHeight
-
-  // const [menuVisible, setMenuVisible] = React.useState(false)
-  // const [selectedRowData, setSelectedRowData] = React.useState<RecordType | null>(null)
-  // const [position, setPosition] = React.useState<{
-  //   x: number | undefined
-  //   y: number | undefined
-  //   viewportWidth: number
-  //   viewportHeight: number
-  // }>({ x: 0, y: 0, viewportWidth, viewportHeight })
-
-  // const [tooltipContent, setTooltipContent] = useState<any>('')
-
   const [filterStates, setFilterState] = _react.default.useState(null);
   const [sorterStates, setSorterStates] = _react.default.useState([]);
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
@@ -199,81 +167,6 @@ const InternalTable = props => {
       setColumnsHiddenKeys(rsss);
     }
   };
-
-  // const contextMenuItems = React.useMemo(() => {
-  //   if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
-  //     const hiddenItems = contextMenuHidden({
-  //       rowInfo: {
-  //         rowData: selectedRowData
-  //       }
-  //     })
-
-  //     return propContextMenuItems.filter(item => !(hiddenItems as string[]).includes(item?.key as string))
-  //   }
-
-  //   if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
-  //     return propContextMenuItems.filter(item => !(contextMenuHidden as string[]).includes(item?.key as string))
-  //   }
-
-  //   return propContextMenuItems
-  // }, [propContextMenuItems, contextMenuHidden, selectedRowData])
-
-  // const onContextMenu = (data: RecordType) => (event: any) => {
-  //   event.preventDefault() // Ngăn chặn menu mặc định của trình duyệt
-
-  //   setSelectedRowData(data)
-
-  //   contextMenuOpen?.({
-  //     rowInfo: {
-  //       rowData: data
-  //     },
-  //     event
-  //   })
-
-  //   setMenuVisible(true)
-
-  //   // Đợi DOM cập nhật và lấy kích thước menu
-  //   setTimeout(() => {
-  //     const menuElement = menuRef.current // Lấy menu từ DOM
-  //     const menuWidth = menuElement?.offsetWidth || 200 // Mặc định 200px nếu chưa render
-  //     const menuHeight = menuElement?.offsetHeight // Mặc định 450px nếu chưa render
-
-  //     // Điều chỉnh vị trí menu
-  //     let x = event.clientX
-  //     let y = event.clientY
-
-  //     if (x + menuWidth > viewportWidth) {
-  //       x = x - menuWidth - 10 // Cách cạnh phải 10px
-  //     }
-
-  //     if (y + menuHeight > viewportHeight) {
-  //       if (y < menuHeight) {
-  //         y = 10
-  //       } else {
-  //         y = y - 10 - menuHeight // Cách cạnh dưới 10px
-  //       }
-  //     }
-
-  //     setPosition(prevState => ({ ...prevState, x, y }))
-  //   }, 100)
-
-  //   if (!menuVisible) {
-  //     document.addEventListener(`click`, function onClickOutside(e) {
-  //       const element: any = e.target
-  //       const menuContainer = document.querySelector('.popup-context-menu')
-
-  //       const isInsideContainer = element.closest('.popup-context-menu') && menuContainer
-
-  //       if (isInsideContainer) {
-  //         return
-  //       }
-  //       setMenuVisible(false)
-  //       setPosition(prevState => ({ ...prevState, x: undefined, y: undefined }))
-  //       document.removeEventListener(`click`, onClickOutside)
-  //     })
-  //   }
-  // }
-
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
     t: t,
     id: id,
@@ -300,7 +193,7 @@ const InternalTable = props => {
     // onContextMenu={onContextMenu}
     // contextMenuItems={contextMenuItems}
     ,
-    editAble: editAble,
+    editAble: isFullScreen ? false : editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,
     isFullScreen: isFullScreen,
@@ -319,8 +212,9 @@ const InternalTable = props => {
     style: {
       maxWidth: '100%',
       height: '100%'
-    },
-    onClose: () => setIsFullScreen(false),
+    }
+    // onClose={() => setIsFullScreen(false)}
+    ,
     onCancel: () => setIsFullScreen(false)
 
     // destroyOnClose

package/lib/table-component/TableContainerEdit.js

@@ -817,9 +817,12 @@ const TableContainerEdit = props => {
     // const duplicatedItems = rowsFocus.map(index => ({ ...newData[index], rowId: newGuid(), id: undefined, isDuplicate: true }))
 
     const duplicatedItem = table.getRowModel().flatRows.find(it => it.id === focusedCell?.rowId);
-    setStartCell(focusedCell);
-    setEndCell(focusedCell);
-    setRangeState((0, _utils.getSelectedCellMatrix)(table, focusedCell, focusedCell));
+
+    // setStartCell(focusedCell)
+    // setEndCell(focusedCell)
+
+    // setRangeState(getSelectedCellMatrix(table, focusedCell, focusedCell))
+
     const duplicatedItems = [{
       ...duplicatedItem?.original,
       rowId: (0, _utils.newGuid)(),
@@ -843,6 +846,9 @@ const TableContainerEdit = props => {
   // thêm n dòng bên trên
   const handleInsertBefore = _react.default.useCallback((item, n) => {
     const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
+    setStartCell(focusedCell);
+    setEndCell(focusedCell);
+    setRangeState((0, _utils.getSelectedCellMatrix)(table, focusedCell, focusedCell));
 
     // const record: any = table.getRowModel().rows.find((it) => it.id === rowsFocus[rowsFocus.length - 1])?.original
     const record = table.getRowModel().flatRows.find(it => it.id === rowsFocus[rowsFocus.length - 1])?.original;
@@ -899,7 +905,7 @@ const TableContainerEdit = props => {
         triggerChangeData?.(newDataSource);
       }
     }
-  }, [defaultValue, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
+  }, [defaultValue, focusedCell, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
 
   //thêm 1 dòng bên dưới
   const handleInsertAfter = _react.default.useCallback((item, n) => {
@@ -1028,12 +1034,61 @@ const TableContainerEdit = props => {
       const filterData = (0, _utils.flattenArray)([...originData]);
       const rs = filterData.filter(it => !rowsFocus.includes(it[rowKey]));
       const newDaa = (0, _utils.unFlattenData)(rs);
-      triggerChangeData?.([...newDaa]);
+      if (commandSettings && commandSettings.confirmDialog) {
+        MySwal.fire({
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
+          // icon: 'warning',
+          allowOutsideClick: false,
+          showCancelButton: true,
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
+          customClass: {
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
+          },
+          buttonsStyling: false
+        }).then(async result => {
+          if (result.value) {
+            triggerChangeData?.([...newDaa]);
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // không hiện dialog  
+        triggerChangeData?.([...newDaa]);
+      }
+    }
+  }, [commandSettings, originData, rowKey, rowsFocus, t, triggerChangeData]);
+  const handleDeleteAll = _react.default.useCallback(item => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (commandSettings && commandSettings.confirmDialog) {
+        MySwal.fire({
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
+          // icon: 'warning',
+          allowOutsideClick: false,
+          showCancelButton: true,
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
+          customClass: {
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
+          },
+          buttonsStyling: false
+        }).then(async result => {
+          if (result.value) {
+            triggerChangeData?.([]);
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        triggerChangeData?.([]);
+      }
     }
-  }, [originData, rowKey, rowsFocus, triggerChangeData]);
-  const handleDeleteAll = _react.default.useCallback(() => {
-    triggerChangeData?.([]);
-  }, [triggerChangeData]);
+  }, [commandSettings, t, triggerChangeData]);
   const handleDeleteContent = () => {
     if (startCell && endCell) {
       const tmpData = (0, _utils.flattenArray)([...dataSource]);
@@ -1110,7 +1165,7 @@ const TableContainerEdit = props => {
                   borderColor: '#eb4619'
                 },
                 variant: 'outlined',
-                onClick: handleDeleteAll,
+                onClick: () => handleDeleteAll(item),
                 className: "d-flex toolbar-button"
               }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
             }
@@ -1457,8 +1512,8 @@ const TableContainerEdit = props => {
             options: newOptions
           }
         };
-        const rrr = (0, _utils.updateArrayByKey)([...columns], newElem, 'field');
-        triggerChangeColumns?.(rrr, 'click');
+        const rrr = (0, _utils.updateArrayByKey)([...propsColumns], newElem, 'field');
+        triggerChangeColumns?.(rrr, [], "cellClick");
       }
     };
     if (onCellClick) {

package/lib/table-component/body/EditableCell.js

@@ -289,7 +289,7 @@ const EditableCell = props => {
         const minTimeValue = !(0, _utils.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
 
         // @ts-ignore
-        // const timeValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.dataIndex], timeFormat) : null
+        // const timeValue = !isEmpty(record[dataIndex]) ? dayjs(record[dataIndex], timeFormat) : null
         const maxTime = maxTimeValue ? (0, _dayjs.default)(maxTimeValue, timeFormat) : undefined;
         const minTime = minTimeValue ? (0, _dayjs.default)(minTimeValue, timeFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_antd.TimePicker, {
@@ -339,7 +339,7 @@ const EditableCell = props => {
         }
         if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueSelectTable = !(0, _utils.isNullOrUndefined)(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+          valueSelectTable = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/_react.default.createElement(_asyncTableSelect.AsyncTableSelect
         // id={`col${indexCol}-record${indexRow}`}
@@ -446,7 +446,7 @@ const EditableCell = props => {
         }
         if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueSelect = !(0, _utils.isNullOrUndefined)(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+          valueSelect = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
           options: options,
@@ -532,7 +532,7 @@ const EditableCell = props => {
         }
         if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueAsyncSelect = !(0, _utils.isNullOrUndefined)(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+          valueAsyncSelect = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
           options: options,
@@ -654,7 +654,7 @@ const EditableCell = props => {
 
         const newTreeData = (0, _utils.convertLabelToTitle)(optionsTree);
         // @ts-ignore
-        // const valueTreeSelect = column?.editSelectSettings?.isMulti ? (Array.isArray(record[column.dataIndex]) ? record[column.dataIndex] : []) : record[column.dataIndex]
+        // const valueTreeSelect = column?.editSelectSettings?.isMulti ? (Array.isArray(record[dataIndex]) ? record[dataIndex] : []) : record[dataIndex]
 
         let valueTreeSelect = value;
         if (fieldValue) {
@@ -663,7 +663,7 @@ const EditableCell = props => {
         }
         if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueTreeSelect = !(0, _utils.isNullOrUndefined)(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+          valueTreeSelect = !(0, _utils.isNullOrUndefined)(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
@@ -802,7 +802,7 @@ const EditableCell = props => {
         });
 
       // case 'file':
-      //   const valueFile = record[column.dataIndex]
+      //   const valueFile = record[dataIndex]
       //   return (
       //
       //
@@ -817,7 +817,7 @@ const EditableCell = props => {
       //           const newValue = Array.isArray(val) ? val.map((it: any) => it) : val
       //           const newrecordData = {
       //             ...record,
-      //             [column.dataIndex]: newValue
+      //             [dataIndex]: newValue
       //           }
       //           handleCellChange(val, newValue, newrecordData, col, indexRow, indexCol)
       //         }}
@@ -877,7 +877,7 @@ const EditableCell = props => {
         });
 
       // case 'image':
-      //   let image = record[column.dataIndex]
+      //   let image = record[dataIndex]
       //   return (
       //     <ImageUpload
       //       id={`col${indexCol}-record${indexRow}`}
@@ -888,8 +888,8 @@ const EditableCell = props => {
       //         const checkKey = checkKeyDown(val, col, indexRow + 1, indexCol + 1)
       //         if (checkKey === 'ArrecordDown' || checkKey === 'ArrecordUp' || checkKey === 'Enter') {
       //           let newVal = ''
-      //           if (newVal != record[column.dataIndex]) {
-      //             record[column.dataIndex] = path
+      //           if (newVal != record[dataIndex]) {
+      //             record[dataIndex] = path
       //             // handleDataChange(path, record, col, indexRow, indexCol)
       //             handleCellChange(path, record, col, indexRow, indexCol)
       //           }
@@ -968,11 +968,7 @@ const EditableCell = props => {
             textAlign: column.align,
             resize: 'none',
             height: '100%'
-          }
-
-          // @ts-ignore
-          // value={!isNullOrUndefined(record[column.dataIndex]) ? record[column.dataIndex] : ''}
-          ,
+          },
           disabled: (0, _utils.isDisable)(column, record) ?? false,
           className: (0, _classnames.default)('be-cell-editing rounded-0 input-element'),
           placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',

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

@@ -698,6 +698,7 @@ const TableBodyCellEdit = props => {
   }
   const handleMouseDownIndex = rowId => {
     const allColumns = table.getVisibleLeafColumns();
+    const firstCOl = (0, _utils.findFirst)(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
     setStartCell?.({
@@ -708,6 +709,12 @@ const TableBodyCellEdit = props => {
       rowId,
       colId: endCol
     });
+    if (firstCOl) {
+      setFocusedCell?.({
+        rowId: cell.row.id,
+        colId: firstCOl.id
+      });
+    }
     setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
       rowId,
       colId: startCol
@@ -1112,7 +1119,9 @@ const TableBodyCellEdit = props => {
       handleEdit(e);
       // setEditingKey?.(cell.row.id)
     }
-  })), !isSelecting && !isEditing && rowNumber === rangeState?.endRowIndex && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/_react.default.createElement("div", {
+  })), !isSelecting && !isEditing && rowRange &&
+  // rowNumber === rangeState?.endRowIndex &&
+  cell.row.id === rowRange[rowRange?.length - 1] && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/_react.default.createElement("div", {
     className: 'dragging-point',
     onMouseDown: e => {
       e.preventDefault();

package/lib/table-component/hook/utils.d.ts

@@ -135,3 +135,4 @@ export declare const convertToObjTrue: (arr: any) => {
 };
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function isTree(arr: any[]): boolean;
+export declare function findFirst(items: Column<any>[]): Column<any, unknown>;

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

@@ -20,6 +20,7 @@ exports.convertFilters = exports.convertDayjsToDate = exports.convertDateToDayjs
 exports.convertFormat = convertFormat;
 exports.extendsObject = exports.detectSeparators = exports.customWeekStartEndFormat = exports.convertToObjTrue = exports.convertToObj = exports.convertLabelToTitle = void 0;
 exports.filterDataByColumns = filterDataByColumns;
+exports.findFirst = findFirst;
 exports.getAllVisibleKeys1 = exports.getAllVisibleKeys = exports.getAllRowKey = exports.genPresets = exports.flattenData = exports.flattenArray = exports.flatColumns2 = exports.findItemByKey = void 0;
 exports.getCellsByPosition = getCellsByPosition;
 exports.getColIdsBetween = getColIdsBetween;
@@ -1993,4 +1994,9 @@ function isTree(arr) {
     if (!checkNode(item)) return false;
   }
   return true;
+}
+function findFirst(items) {
+  const leftItem = items.find(item => item.getIsPinned() === 'left');
+  if (leftItem) return leftItem;
+  return null;
 }