es-grid-template 1.8.62 → 1.8.64

package/es/grid-component/InternalTable.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 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, sumByField, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
+import { addRowIdArray, booleanOperator, checkDecimalSeparator, checkThousandSeparator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, isNullOrUndefined, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, sumByField, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
 // updateData,
 updateOrInsert } from "./hooks";
 import ReactDOMServer from 'react-dom/server';
@@ -33,7 +33,7 @@ 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, Modal } from "antd";
+import { Button, Modal, 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";
@@ -42,6 +42,9 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
 import useMergedState from "rc-util/es/hooks/useMergedState";
+import { numericFormatter } from 'react-numeric-component';
+// import Modal from 'antd/es/modal/Modal'
+
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -80,9 +83,6 @@ const ResizableTitle = props => {
     ...restProps
   } = props;
   const dragState = useContext(DragIndexContext);
-
-  // const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: props.id });
-
   const style = {
     ...props.style,
     borderBottom: '1px solid #e0e0e0',
@@ -263,10 +263,10 @@ const InternalTable = props => {
     if (totalHeight) {
       const table = document.querySelector(`#${id}`);
       const title = table?.querySelector(`.ui-rc-table-title`);
+      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
       const paginationE = table?.querySelector(`.ui-rc-pagination`);
       const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
       const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
       const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (theadRef ? theadRef.current.clientHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? 40 : 0) - (tableScrollRight ? 10 : 0);
       setHeight(hhh > 0 ? hhh : 0);
     }
@@ -423,26 +423,28 @@ const InternalTable = props => {
         dataIndex: column.field ?? column.dataIndex,
         key: column.field ?? column.key,
         // title: () => (<HeaderContent column={{...column} as any} t={t}/>),
-        title: /*#__PURE__*/React.createElement(SortableHeaderCell, {
-          columnKey: column.field
-        }, /*#__PURE__*/React.createElement(HeaderContent, {
+        title:
+        /*#__PURE__*/
+        // <SortableHeaderCell columnKey={column.field}>
+        React.createElement(HeaderContent, {
           column: {
             ...column
           },
           t: t,
           id: id,
           wrapSettings: wrapSettings
-        })),
+        })
+        // </SortableHeaderCell>
+        ,
         // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-        ellipsis: column.ellipsis !== false || wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-        // ellipsis: false,
-        // ellipsis: column.ellipsis !== false,
-
+        // ellipsis: column.ellipsis !== false || (wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both'),
+        ellipsis: false,
         align: column.textAlign ?? column.align,
         fixed: column.fixedType ?? column.fixed,
         isSummary: column.isSummary ?? column.haveSum,
         hidden: column.hidden ?? column.visible === false
       };
+      const headerTooltip = t ? t?.(column.headerTooltip ?? column.columnGroupText ?? column.headerText) : column.headerTooltip ?? column.columnGroupText ?? column.headerText;
       if (transformedColumn.field === '#') {
         return {
           ...transformedColumn,
@@ -544,10 +546,18 @@ const InternalTable = props => {
         },
         onHeaderCell: () => ({
           id: `${column.field}`,
-          width: column.width,
+          // width: column.width,
+
+          'data-tooltip-id': `${id}-tooltip-header`,
+          'data-tooltip-content': headerTooltip,
           onResize: handleResize?.(column),
-          className: `${column.headerTextAlign === 'center' ? 'head-align-center' : column.headerTextAlign === 'right' ? 'head-align-right' : ''}
-           ${wrapSettings && wrapSettings.wrapMode === 'Content' ? 'ui-rc-table-cell-ellipsis' : ''}`
+          className: classNames('', {
+            'head-align-center': column.headerTextAlign === 'center',
+            'head-align-right': column.headerTextAlign === 'right',
+            'ui-rc-table-cell-ellipsis': !wrapSettings || !!(wrapSettings && wrapSettings.wrapMode === 'Content'),
+            // mặc định = true
+            'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
+          })
         }),
         onCell: (data, index) => {
           const tooltipContent = isOpenTooltip === false ? '' : column?.tooltipDescription ? typeof column.tooltipDescription === 'function' ? column.tooltipDescription({
@@ -556,14 +566,16 @@ const InternalTable = props => {
           }) : column.tooltipDescription : column.template && typeof column.template !== 'function' ? column.template : data[column.field ?? ''];
           return {
             id: `${column.field}`,
-            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 3 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
+            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? groupSetting?.groupColumnSpan ?? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
             // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
             ...transformedColumn?.onCell?.(data, index),
             className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
               'cell-group': groupColumns && data.children,
-              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field
+              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field,
+              'ui-rc-table-cell-ellipsis': !wrapSettings || wrapSettings && (wrapSettings.wrapMode === 'Header' || wrapSettings.wrapMode !== 'Both'),
+              // mặc định = true
+              'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Content' || wrapSettings.wrapMode === 'Both')
             }),
-            // 'data-tooltip-id': "tooltip-cell-content"
             'data-tooltip-id': `${id}-tooltip-cell-content`,
             "data-tooltip-html": ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent)),
             onMouseEnter: e => {
@@ -603,8 +615,20 @@ const InternalTable = props => {
             return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
           if (groupAble && record.children && column.sumGroup === true && column.type === 'number') {
+            const thousandSeparator = cellFormat?.thousandSeparator;
+            const decimalSeparator = cellFormat?.decimalSeparator;
+            const dec = cellFormat?.decimalScale;
+            const numericFormatProps = {
+              thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+              decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+              allowNegative: cellFormat?.allowNegative ?? true,
+              prefix: cellFormat?.prefix,
+              suffix: cellFormat?.suffix,
+              decimalScale: dec,
+              fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+            };
             const sumValue = sumByField(filterDataByColumns4(record.children, [], []), column?.field);
-            return /*#__PURE__*/React.createElement(React.Fragment, null, sumValue);
+            return /*#__PURE__*/React.createElement(React.Fragment, null, numericFormatter(sumValue.toString(), numericFormatProps));
           }
           return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
@@ -634,13 +658,14 @@ const InternalTable = props => {
           id: id,
           wrapSettings: wrapSettings
         })),
-        // ellipsis: column.ellipsis !== false,
-        ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        ellipsis: false,
+        // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+
         align: column.textAlign ?? column.align,
         fixed: column.fixedType ?? column.fixed,
         isSummary: column.isSummary ?? column.haveSum,
-        hidden: column.hidden ?? column.visible === false,
-        defaultSortOrder: 'ascend'
+        hidden: column.hidden ?? column.visible === false
+        // defaultSortOrder: 'ascend'
       };
 
       // Xử lý đệ quy cho children
@@ -927,12 +952,14 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
-  const CustomThead = theadProps => {
+  const CustomThead = headerProps => {
     const {
-      children
-    } = theadProps;
+      children,
+      className
+    } = headerProps;
     return /*#__PURE__*/React.createElement("thead", {
-      ref: theadRef
+      ref: theadRef,
+      className: className
     }, children);
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
@@ -958,7 +985,10 @@ const InternalTable = props => {
     ,
     dataSource: filterDataByColumns4(mergedData, filterStates, mergedFilterKeys),
     format: format,
-    columns: mergedColumns,
+    columns: mergedColumns
+
+    // showSorterTooltip={false}
+    ,
     showSorterTooltip: {
       target: 'sorter-icon'
     },

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

@@ -285,6 +285,7 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: RecordType, row: Row<RecordType>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    fullScreenTitle?: ReactNode | (() => ReactNode);
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;
@@ -314,6 +315,7 @@ export interface CommandItem {
 export type IGroupSetting = {
     client?: boolean;
     onGroup?: (props: IOnGroup) => void;
+    groupColumnSpan?: number;
     hiddenColumnGroup?: boolean;
     showGroupIcon?: boolean;
     unClearableLevel?: 1 | 2 | 3 | undefined;

package/es/table-component/InternalTable.js

@@ -200,10 +200,7 @@ const InternalTable = props => {
     triggerSorter: setSorterStates,
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
-    expanded: expanded
-    // onContextMenu={onContextMenu}
-    // contextMenuItems={contextMenuItems}
-    ,
+    expanded: expanded,
     editAble: isFullScreen ? false : editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,

package/es/table-component/TableContainer.js

@@ -185,10 +185,6 @@ const TableContainer = props => {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: 'center'
-    }
-  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -239,7 +235,11 @@ const TableContainer = props => {
     t: t,
     columnsGroup: groupColumns,
     triggerChangeColumns: triggerChangeColumns
-  })))), /*#__PURE__*/React.createElement(TableContext.Provider, {
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title)), /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
       t,
       locale,

package/es/table-component/TableContainerEdit.js

@@ -358,6 +358,9 @@ const TableContainerEdit = props => {
   const [isPasting, setIsPasting] = React.useState(false);
   // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = React.useState(0);
+
+  // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
+
   const rowsFocus = React.useMemo(() => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
@@ -396,7 +399,7 @@ const TableContainerEdit = props => {
   }, [startCell, endCell, table]);
   const triggerChangeData = React.useCallback(newData => {
     onDataChange?.(newData);
-  }, [onDataChange]);
+  }, [onDataChange, dataSource]);
   const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const rsFilterData = updateOrInsert(flattenArray([...originData]), callbackData);
@@ -955,6 +958,30 @@ const TableContainerEdit = props => {
     mode: 'onChange',
     resolver: validate ? yupResolver(validate) : undefined
   });
+  const handleAddMulti = React.useCallback((item, n, newId) => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const defaultRowValue = getDefaultValue(defaultValue);
+      const newRows = Array.from({
+        length: n
+      }).map(() => defaultRowValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId: n === 1 && newId ? newId : newGuid()
+      } : {
+        id: undefined,
+        rowId: n === 1 && newId ? newId : newGuid()
+      });
+      const kkk = getAllRowKey(newRows) ?? [];
+      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+      setMergedFilterKeys?.(rs);
+      const newData = dataSource.concat(newRows);
+      triggerChangeData?.(newData);
+    }
+  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
   const onSubmit = formData => {
     try {
       // const record = (await form.validateFields()) as RecordType;
@@ -975,6 +1002,26 @@ const TableContainerEdit = props => {
       console.log('Validate Failed:', errInfo);
     }
   };
+  const onSubmit2 = (formData, newOriginData) => {
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+
+      // const newData = [...dataSource]
+      const newData = [...newOriginData];
+
+      // @ts-ignore
+      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = updateArrayByKey(newData, row, rowKey);
+      if (index > -1) {
+        triggerChangeData?.(rs);
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
   const handleCellChange = args => {
     const {
       record,
@@ -1032,30 +1079,111 @@ const TableContainerEdit = props => {
       onSubmit(record);
     }
   };
-  const handleAddMulti = React.useCallback((item, n, newId) => {
-    if (item.onClick) {
-      item.onClick({
-        toolbar: item
-      });
-    } else {
-      const defaultRowValue = getDefaultValue(defaultValue);
-      const newRows = Array.from({
-        length: n
-      }).map(() => defaultRowValue ? {
-        ...defaultRowValue,
-        id: undefined,
-        rowId: n === 1 && newId ? newId : newGuid()
-      } : {
-        id: undefined,
-        rowId: n === 1 && newId ? newId : newGuid()
-      });
-      const kkk = getAllRowKey(newRows) ?? [];
-      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
-      setMergedFilterKeys?.(rs);
-      const newData = dataSource.concat(newRows);
-      triggerChangeData?.(newData);
+  const handleCellChangeAndAddRow = args => {
+    const {
+      record,
+      type: changeType,
+      newState,
+      option,
+      field,
+      indexCol,
+      indexRow,
+      key
+    } = args;
+
+    // add new row
+
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const newRowId = newGuid();
+    const newRows = Array.from({
+      length: 1
+    }).map(() => defaultRowValue ? {
+      ...defaultRowValue,
+      id: undefined,
+      rowId: newRowId
+    } : {
+      id: undefined,
+      rowId: newRowId
+    });
+    const kkk = getAllRowKey(newRows) ?? [];
+    const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+    setMergedFilterKeys?.(rs);
+    const newData = originData.concat(newRows);
+    setFocusedCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setStartCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setEndCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setTimeout(() => {
+      setRangeState?.(getSelectedCellMatrix(table, {
+        rowId: newRowId,
+        colId: field
+      }, {
+        rowId: newRowId,
+        colId: field
+      }));
+    });
+    setTimeout(() => {
+      const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+      const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+      if (cellFocus) {
+        cellFocus.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        cellFocus.focus();
+      }
+    }, 100);
+    if (changeType === 'blur') {
+      const handleChangeCallback = callbackData => {
+        const callbackRecord = callbackData;
+        onSubmit2(callbackRecord, [...newData]);
+      };
+      if (onCellChange) {
+        if (onCellChange.length > 1) {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            value: newState,
+            option,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit2(record, [...newData]);
+        }
+      }
     }
-  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
+
+    // if (prevState && newState && prevState !== newState && changeType === 'enter') {
+
+    //   onSubmit(record)
+
+    // }
+  };
   const handleDuplicate = React.useCallback(() => {
     // không tính tree
 
@@ -1782,10 +1910,6 @@ const TableContainerEdit = props => {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: 'center'
-    }
-  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -1836,7 +1960,11 @@ const TableContainerEdit = props => {
     columnsGroup: groupColumns,
     triggerChangeColumns: triggerChangeColumns,
     columnHidden: columnHidden
-  })))), /*#__PURE__*/React.createElement("form", {
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title)), /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
@@ -1888,6 +2016,7 @@ const TableContainerEdit = props => {
       setValue,
       reset,
       handleCellChange,
+      handleCellChangeAndAddRow,
       triggerPaste,
       handleDeleteContent,
       handleAddMulti,

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

@@ -227,7 +227,7 @@ const TableBodyCellEdit = props => {
     setValue,
     getValues,
     handleCellChange,
-    // handleAddMulti,
+    handleCellChangeAndAddRow,
     dataErrors,
     expanded,
     setExpanded,
@@ -237,17 +237,13 @@ const TableBodyCellEdit = props => {
     isSelectionChange,
     setIsSelectionChange,
     selectionSettings,
-    pagination
+    pagination,
+    handleAddMulti
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
-
-  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
-  // const hasValue = html.trim().length > 0;
-
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
@@ -783,6 +779,8 @@ const TableBodyCellEdit = props => {
       return;
     }
     if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
       handleEdit(e, true);
       return;
     }
@@ -1038,6 +1036,64 @@ const TableBodyCellEdit = props => {
         indexRow: currentRowIndex,
         type: 'blur'
       });
+    } else {}
+  };
+  const handleChangeAndCreateRow = () => {
+    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
+    const formState = getValues();
+    const itemState = getValues(cell.column.id);
+    const prevState = record[cell.column.id];
+    const newState = itemState;
+    if (newState !== prevState) {
+      // vừa cell change + add new row
+      handleCellChangeAndAddRow?.({
+        key: cell.row.id,
+        field: cell.column.id,
+        record: formState,
+        prevState,
+        newState,
+        option: newState,
+        indexCol: cell.column.getIndex(),
+        indexRow: currentRowIndex,
+        type: 'blur'
+      });
+    } else {
+      // chỉ add new row
+
+      const newRowId = newGuid();
+      handleAddMulti?.({}, 1, newRowId);
+      setFocusedCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setStartCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setEndCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setTimeout(() => {
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }));
+      });
+      setTimeout(() => {
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+          cellFocus.focus();
+        }
+      }, 100);
     }
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -1110,9 +1166,10 @@ const TableBodyCellEdit = props => {
       if (!isEditing) {
         handleKeyDown(e, cell.row.id, cell.column.id);
       } else {
-        // setStartCell?.(undefined)
-
-        if (e.shiftKey && e.key === 'Enter') {} else {
+        if (e.shiftKey && e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+        } else {
           if (e.key === 'Enter') {
             e.preventDefault();
             e.stopPropagation();
@@ -1141,29 +1198,10 @@ const TableBodyCellEdit = props => {
               rowVirtualizer.scrollToIndex(nextRow.index, {
                 align: 'center'
               });
+              handleChange();
             } else {
-
-              // const newRowId = newGuid()
-              // handleAddMulti?.({}, 1, newRowId)
-
-              // setFocusedCell?.({ rowId: newRowId, colId: cell.column.id });
-
-              // setStartCell?.({ rowId: newRowId, colId: cell.column.id });
-              // setEndCell?.({ rowId: newRowId, colId: cell.column.id });
-
-              // setTimeout(() => {
-              //   setRangeState?.(getSelectedCellMatrix(table, { rowId: newRowId, colId: cell.column.id }, { rowId: newRowId, colId: cell.column.id }))
-              //   // rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'end', })
-
-              // })
-
-              // setTimeout(() => {
-
-              //   rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'center', })
-
-              // }, 100)
+              handleChangeAndCreateRow();
             }
-            handleChange();
             setEditingKey?.('');
             reset?.();
           }

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

@@ -154,3 +154,5 @@ export declare function countUnselectedChildren(row: Row<any>): number;
 export declare function removeDuplicatesByKey(arr: any[], key?: string): any[];
 export declare const getTableHeight: (height?: number, minHeight?: number) => number;
 export declare const convertFlatColumn1: (array: ColumnsTable) => ColumnsTable[];
+export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
+export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;