es-grid-template 1.7.37 → 1.7.39

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

@@ -1,6 +1,5 @@
-import * as React from "react";
-import type { ContextInfo } from "./type";
-import type { ContextMenuItem } from "./type";
+import * as React from 'react';
+import type { ContextInfo, ContextMenuItem } from './type';
 export declare const findItemByKey: (array: any[], key: string, value: any) => any;
 type Props<RecordType> = {
     rowData: RecordType | null;

package/es/grid-component/ContextMenu.js

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 // import type { MenuProps } from "antd";
-import { Dropdown, Menu } from "antd";
+import { Dropdown, Menu } from 'antd';
 export const findItemByKey = (array, key, value) => {
   for (let i = 0; i < array.length; i++) {
     const item = array[i];

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import 'react-resizable/css/styles.css';
-import type { GridTableProps } from "./type";
+import type { GridTableProps } from './type';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';

package/es/grid-component/InternalTable.js

@@ -1,45 +1,45 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import React, { createContext, Fragment, useCallback, useContext, useState } from 'react';
 import 'react-resizable/css/styles.css';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, isNullOrUndefined, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
 // updateData,
 updateOrInsert } from "./hooks";
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import GridEdit from "./table/GridEdit";
+import en from 'rc-master-ui/es/date-picker/locale/en_US';
+import vi from 'rc-master-ui/es/date-picker/locale/vi_VN';
 import Grid from "./table/Grid";
-import en from "rc-master-ui/es/date-picker/locale/en_US";
-import vi from "rc-master-ui/es/date-picker/locale/vi_VN";
-import enDr from "rc-master-ui/es/locales/en_US";
-import viDr from "rc-master-ui/es/locales/vi_VN";
+import GridEdit from "./table/GridEdit";
+import enDr from 'rc-master-ui/es/locales/en_US';
+import viDr from 'rc-master-ui/es/locales/vi_VN';
 // import useColumns from "./hooks/useColumns";
 
 import "./styles.scss";
 // import 'rc-master-ui/es/date-range-picker/styles/index.less'
 // import 'rc-master-ui/assets/index.css'
 
+import { SearchOutlined } from '@ant-design/icons';
+import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
+import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { Button, Space } from 'antd';
+import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
+import classNames from 'classnames';
+import { Select } from 'rc-master-ui';
+import { Tooltip } from 'react-tooltip';
+import Swal from 'sweetalert2';
+import withReactContent from 'sweetalert2-react-content';
 import { flatColumns2, renderContent, renderFilter } from "./hooks/columns";
-import Group from "./table/Group";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { Tooltip } from "react-tooltip";
-import classNames from "classnames";
 import HeaderContent from "./hooks/content/HeaderContent";
-import { ArrowDown, ArrowUp, FilterFill, SortCancel } from "becoxy-icons";
-import { Select } from "rc-master-ui";
-import { Button, Space } from "antd";
-import { SearchOutlined } from "@ant-design/icons";
-import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
-import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
+import Group from "./table/Group";
 // import {CSS} from "@dnd-kit/utilities";
-import { Resizable } from "react-resizable";
-import { faker } from "@faker-js/faker";
-import InfiniteTable from "./table/InfiniteTable";
-import useMergedState from "rc-util/es/hooks/useMergedState";
+import { faker } from '@faker-js/faker';
 import Modal from 'antd/es/modal/Modal';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import { Resizable } from 'react-resizable';
+import InfiniteTable from "./table/InfiniteTable";
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -213,9 +213,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] = useState(0);
@@ -401,7 +401,7 @@ const InternalTable = props => {
           // handleSearch()
           // close()
         }
-      }, t ? t("Clear") : 'Clear')));
+      }, t ? t('Clear') : 'Clear')));
     },
     filterIcon: filtered => /*#__PURE__*/React.createElement(FilterFill, {
       fontSize: 12
@@ -586,7 +586,7 @@ const InternalTable = props => {
             if (currentGroupColumn?.template) {
               return renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
             }
-            return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
+            return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ":", ' ', renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
           return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
@@ -658,7 +658,7 @@ const InternalTable = props => {
     if (tableRef.current && type === 'columnChoose') {
       tableRef.current.scrollTo({
         left: 0.1,
-        behavior: "smooth"
+        behavior: 'smooth'
       });
     }
     onChooseColumns?.({
@@ -699,17 +699,11 @@ const InternalTable = props => {
     setColumns(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,
@@ -958,7 +952,6 @@ const InternalTable = props => {
     } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
-
     // height={isFullScreen ? windowSize.innerHeight - 100 : propsHeight}
     ,
     height: propsHeight,
@@ -1008,10 +1001,10 @@ const InternalTable = props => {
     style: {
       maxWidth: '100%',
       height: '100%'
-    },
-    onClose: () => setIsFullScreen(false),
+    }
+    // onClose={() => setIsFullScreen(false)}
+    ,
     onCancel: () => setIsFullScreen(false)
-
     // destroyOnClose
     ,
     styles: {
@@ -1073,7 +1066,6 @@ const InternalTable = props => {
       y: scrollHeight1 - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
     ,
-
     height: windowSize.innerHeight - 35,
     scrollHeight: scrollHeight1,
     components: {

package/es/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/es/table-component/InternalTable.js

@@ -62,14 +62,8 @@ const InternalTable = props => {
     groupSetting,
     groupColumns,
     selectionSettings,
-    // infiniteScroll,
-    // wrapSettings,
-    // onFilter,
-    // expandable,
-    // contextMenuItems: propContextMenuItems,
-    // contextMenuHidden,
-    contextMenuClick,
-    contextMenuOpen,
+    // contextMenuClick,
+    // contextMenuOpen,
     height,
     ...rest
   } = props;
@@ -98,32 +92,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.useState(null);
   const [sorterStates, setSorterStates] = React.useState([]);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
@@ -193,81 +161,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.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     t: t,
     id: id,
@@ -294,7 +187,7 @@ const InternalTable = props => {
     // onContextMenu={onContextMenu}
     // contextMenuItems={contextMenuItems}
     ,
-    editAble: editAble,
+    editAble: isFullScreen ? false : editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,
     isFullScreen: isFullScreen,
@@ -313,8 +206,9 @@ const InternalTable = props => {
     style: {
       maxWidth: '100%',
       height: '100%'
-    },
-    onClose: () => setIsFullScreen(false),
+    }
+    // onClose={() => setIsFullScreen(false)}
+    ,
     onCancel: () => setIsFullScreen(false)
 
     // destroyOnClose

package/es/table-component/TableContainerEdit.js

@@ -810,9 +810,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(getSelectedCellMatrix(table, focusedCell, focusedCell));
+
+    // setStartCell(focusedCell)
+    // setEndCell(focusedCell)
+
+    // setRangeState(getSelectedCellMatrix(table, focusedCell, focusedCell))
+
     const duplicatedItems = [{
       ...duplicatedItem?.original,
       rowId: newGuid(),
@@ -836,6 +839,9 @@ const TableContainerEdit = props => {
   // thêm n dòng bên trên
   const handleInsertBefore = React.useCallback((item, n) => {
     const defaultRowValue = getDefaultValue(defaultValue);
+    setStartCell(focusedCell);
+    setEndCell(focusedCell);
+    setRangeState(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;
@@ -892,7 +898,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.useCallback((item, n) => {
@@ -1021,12 +1027,61 @@ const TableContainerEdit = props => {
       const filterData = flattenArray([...originData]);
       const rs = filterData.filter(it => !rowsFocus.includes(it[rowKey]));
       const newDaa = 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.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.useCallback(() => {
-    triggerChangeData?.([]);
-  }, [triggerChangeData]);
+  }, [commandSettings, t, triggerChangeData]);
   const handleDeleteContent = () => {
     if (startCell && endCell) {
       const tmpData = flattenArray([...dataSource]);
@@ -1103,7 +1158,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'));
             }
@@ -1450,8 +1505,8 @@ const TableContainerEdit = props => {
             options: newOptions
           }
         };
-        const rrr = updateArrayByKey([...columns], newElem, 'field');
-        triggerChangeColumns?.(rrr, 'click');
+        const rrr = updateArrayByKey([...propsColumns], newElem, 'field');
+        triggerChangeColumns?.(rrr, [], "cellClick");
       }
     };
     if (onCellClick) {

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

@@ -287,7 +287,7 @@ const EditableCell = props => {
         const minTimeValue = !isEmpty(column.minTime) ? dayjs(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 ? dayjs(maxTimeValue, timeFormat) : undefined;
         const minTime = minTimeValue ? dayjs(minTimeValue, timeFormat) : undefined;
         return /*#__PURE__*/React.createElement(TimePicker, {
@@ -337,7 +337,7 @@ const EditableCell = props => {
         }
         if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueSelectTable = !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 = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/React.createElement(AsyncTableSelect
         // id={`col${indexCol}-record${indexRow}`}
@@ -444,7 +444,7 @@ const EditableCell = props => {
         }
         if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueSelect = !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 = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/React.createElement(Select, {
           options: options,
@@ -530,7 +530,7 @@ const EditableCell = props => {
         }
         if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueAsyncSelect = !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 = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/React.createElement(AsyncSelect, {
           options: options,
@@ -652,7 +652,7 @@ const EditableCell = props => {
 
         const newTreeData = 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) {
@@ -661,7 +661,7 @@ const EditableCell = props => {
         }
         if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueTreeSelect = !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 = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/React.createElement(TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
@@ -800,7 +800,7 @@ const EditableCell = props => {
         });
 
       // case 'file':
-      //   const valueFile = record[column.dataIndex]
+      //   const valueFile = record[dataIndex]
       //   return (
       //
       //
@@ -815,7 +815,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)
       //         }}
@@ -875,7 +875,7 @@ const EditableCell = props => {
         });
 
       // case 'image':
-      //   let image = record[column.dataIndex]
+      //   let image = record[dataIndex]
       //   return (
       //     <ImageUpload
       //       id={`col${indexCol}-record${indexRow}`}
@@ -886,8 +886,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)
       //           }
@@ -966,11 +966,7 @@ const EditableCell = props => {
             textAlign: column.align,
             resize: 'none',
             height: '100%'
-          }
-
-          // @ts-ignore
-          // value={!isNullOrUndefined(record[column.dataIndex]) ? record[column.dataIndex] : ''}
-          ,
+          },
           disabled: isDisable(column, record) ?? false,
           className: classNames('be-cell-editing rounded-0 input-element'),
           placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',

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

@@ -2,7 +2,7 @@ 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 { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, flattenArray, flattenData,
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData,
 // getCellsByPosition,
 getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
 // import { nonActionColumn } from "../hook/constant";
@@ -692,6 +692,7 @@ const TableBodyCellEdit = props => {
   }
   const handleMouseDownIndex = rowId => {
     const allColumns = table.getVisibleLeafColumns();
+    const firstCOl = findFirst(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
     setStartCell?.({
@@ -702,6 +703,12 @@ const TableBodyCellEdit = props => {
       rowId,
       colId: endCol
     });
+    if (firstCOl) {
+      setFocusedCell?.({
+        rowId: cell.row.id,
+        colId: firstCOl.id
+      });
+    }
     setRangeState?.(getSelectedCellMatrix(table, {
       rowId,
       colId: startCol
@@ -1106,7 +1113,9 @@ const TableBodyCellEdit = props => {
       handleEdit(e);
       // setEditingKey?.(cell.row.id)
     }
-  })), !isSelecting && !isEditing && rowNumber === rangeState?.endRowIndex && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
+  })), !isSelecting && !isEditing && rowRange &&
+  // rowNumber === rangeState?.endRowIndex &&
+  cell.row.id === rowRange[rowRange?.length - 1] && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
     className: 'dragging-point',
     onMouseDown: e => {
       e.preventDefault();

package/es/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/es/table-component/hook/utils.js

@@ -1893,4 +1893,9 @@ export function isTree(arr) {
     if (!checkNode(item)) return false;
   }
   return true;
+}
+export function findFirst(items) {
+  const leftItem = items.find(item => item.getIsPinned() === 'left');
+  if (leftItem) return leftItem;
+  return null;
 }

package/lib/grid-component/ContextMenu.d.ts

@@ -1,6 +1,5 @@
-import * as React from "react";
-import type { ContextInfo } from "./type";
-import type { ContextMenuItem } from "./type";
+import * as React from 'react';
+import type { ContextInfo, ContextMenuItem } from './type';
 export declare const findItemByKey: (array: any[], key: string, value: any) => any;
 type Props<RecordType> = {
     rowData: RecordType | null;

package/lib/grid-component/InternalTable.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import 'react-resizable/css/styles.css';
-import type { GridTableProps } from "./type";
+import type { GridTableProps } from './type';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';