es-grid-template 1.9.27 → 1.9.29

package/es/table-virtuoso/style.js

@@ -11,4 +11,4 @@ const colorDark = "#e6e4f3e6";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-rs980s-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:7px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/es/table-virtuoso/table/TableWrapper.js

@@ -124,7 +124,9 @@ const TableWrapper = props => {
     }
   }, /*#__PURE__*/React.createElement(TableVirtuoso, {
     data: table.getRowModel().rows,
-    totalCount: rows.length,
+    totalCount: rows.length
+    // isScrolling={}
+    ,
     components: {
       Table: ({
         style,

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

@@ -491,7 +491,10 @@ export type TableProps<RecordType = AnyObject> = {
     /** Cho phép chỉnh sửa dữ liệu */
     editAble?: boolean;
     /** Callback khi data thay đổi */
-    onDataChange?: (data: RecordType[]) => void;
+    onDataChange?: (data: RecordType[], args?: {
+        type: string;
+        row?: number;
+    }) => void;
     /** Giá trị mặc định khi thêm mới */
     defaultValue?: AnyObject | (() => AnyObject);
     /** Callback xử lý paste dữ liệu */

package/lib/table-component/InternalTable.js

@@ -176,7 +176,37 @@ const InternalTable = props => {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
-    locale: language
+    locale: language,
+    theme: {
+      token: {
+        colorPrimary: '#eb4619',
+        colorLink: '#eb4619'
+      },
+      components: {
+        Input: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff'
+        },
+        Button: {
+          colorLink: '#eb4619',
+          colorLinkHover: '#eb4619'
+        },
+        Select: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff'
+          // colorPrimary: '#eb4619',
+          // colorBgBase: 'red'
+        },
+        DatePicker: {
+          colorPrimary: '#eb4619',
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff'
+        },
+        Pagination: {
+          fontSize: 12
+        }
+      }
+    }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.CustomProvider, {
     locale: languages
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {

package/lib/table-component/TableContainerEdit.js

@@ -12,6 +12,8 @@ var _utils = require("./hook/utils");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _reactHookForm = require("react-hook-form");
 var _antd = require("antd");
+var _button = _interopRequireDefault(require("rc-master-ui/es/button"));
+var _dropdown = _interopRequireDefault(require("rc-master-ui/es/dropdown"));
 var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
 var _reactNumericComponent = require("react-numeric-component");
 var _useContext = require("./useContext");
@@ -81,19 +83,15 @@ const TableContainerEdit = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
-    // triggerFilter,
     selectionSettings,
     isSelectionChange,
     setIsSelectionChange,
-    // onContextMenu,
     contextMenuItems,
     setSorterChange,
     setFilterChange,
     defaultFilter,
     onCellPaste,
-    // triggerPaste,
     validate,
-    // triggerChangeData,
     onCellChange,
     onDataChange,
     defaultValue,
@@ -291,14 +289,16 @@ const TableContainerEdit = props => {
 
     copy(tsv).then(() => {}).catch(() => {});
   }, [startCell, endCell, table]);
-  const triggerChangeData = _react.default.useCallback(newData => {
-    onDataChange?.(newData);
+  const triggerChangeData = _react.default.useCallback((newData, args) => {
+    onDataChange?.(newData, args);
   }, [onDataChange, dataSource]);
   const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), (0, _utils.flattenArray)([...callbackData]));
       const rs = (0, _utils.unFlattenData)(rsFilterData);
-      triggerChangeData(rs);
+      triggerChangeData(rs, {
+        type: 'OnPaste'
+      });
     };
     if (onCellPaste && onCellPaste.onPasted) {
       if (onCellPaste.onPasted.length > 1) {
@@ -319,10 +319,14 @@ const TableContainerEdit = props => {
           data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
-        triggerChangeData(newData);
+        triggerChangeData(newData, {
+          type: 'OnPaste'
+        });
       }
     } else {
-      triggerChangeData(newData);
+      triggerChangeData(newData, {
+        type: 'OnPaste'
+      });
     }
   }, [onCellPaste, originData, triggerChangeData]);
   const handlePasted = _react.default.useCallback(pasteData => {
@@ -750,7 +754,9 @@ const TableContainerEdit = props => {
       const index = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = (0, _utils.updateArrayByKey)(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs);
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -770,7 +776,9 @@ const TableContainerEdit = props => {
       const index = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = (0, _utils.updateArrayByKey)(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs);
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -970,7 +978,9 @@ const TableContainerEdit = props => {
     const rs = (0, _utils.updateOrInsert)(originData, rsFilter);
     // const rs2  = mergeWithFilter(originData, rsFilter)
 
-    triggerChangeData?.(rs);
+    triggerChangeData?.(rs, {
+      type: 'DUPLICATE'
+    });
   }, [dataSource, focusedCell, originData, rowKey, table, triggerChangeData]);
 
   // thêm n dòng bên trên
@@ -1006,7 +1016,10 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index, 0, ...newRows);
-        triggerChangeData?.(newData);
+        triggerChangeData?.(newData, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
       } else {
         const newData = [...originData];
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
@@ -1032,7 +1045,10 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = (0, _utils.updateArrayByKey)(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource);
+        triggerChangeData?.(newDataSource, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
       }
     }
   }, [defaultValue, focusedCell, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
@@ -1070,7 +1086,10 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index + 1, 0, ...newRows);
-        triggerChangeData?.(newData);
+        triggerChangeData?.(newData, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
       } else {
         const newData = [...originData];
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
@@ -1099,7 +1118,10 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = (0, _utils.updateArrayByKey)(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource);
+        triggerChangeData?.(newDataSource, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
       }
     }
   }, [defaultValue, table, focusedCell?.rowId, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
@@ -1137,7 +1159,9 @@ const TableContainerEdit = props => {
       const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
       setMergedFilterKeys?.(rs);
       const newDataSource = (0, _utils.updateArrayByKey)(newData, newElement, rowKey);
-      triggerChangeData?.(newDataSource);
+      triggerChangeData?.(newDataSource, {
+        type: 'INSERT_CHILDREN'
+      });
     }
     setTimeout(() => {
       const row = table.getRowModel().rows.find(it => it.id === focusedCell?.rowId);
@@ -1180,12 +1204,18 @@ const TableContainerEdit = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([...newDaa]);
+            triggerChangeData?.([...newDaa], {
+              type: 'DELETE_ROWS',
+              row: rowsFocus.length
+            });
           } else if (result.dismiss === MySwal.DismissReason.cancel) {}
         });
       } else {
         // không hiện dialog  
-        triggerChangeData?.([...newDaa]);
+        triggerChangeData?.([...newDaa], {
+          type: 'DELETE_ROWS',
+          row: rowsFocus.length
+        });
       }
     }
   }, [commandSettings, originData, rowKey, rowsFocus, t, triggerChangeData]);
@@ -1211,11 +1241,15 @@ const TableContainerEdit = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([]);
+            triggerChangeData?.([], {
+              type: 'DELETE'
+            });
           } else if (result.dismiss === MySwal.DismissReason.cancel) {}
         });
       } else {
-        triggerChangeData?.([]);
+        triggerChangeData?.([], {
+          type: 'DELETE'
+        });
       }
     }
   }, [commandSettings, t, triggerChangeData]);
@@ -1261,7 +1295,9 @@ const TableContainerEdit = props => {
         return updatedRow;
       });
       const newData = (0, _utils.unFlattenData)(rs);
-      triggerChangeData?.([...newData]);
+      triggerChangeData?.([...newData], {
+        type: 'DELETE_CONTENT'
+      });
     }
   };
   const toolbarItemsBottom = _react.default.useMemo(() => {
@@ -1275,7 +1311,7 @@ const TableContainerEdit = props => {
             template: () => {
               return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-              }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+              }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
                 style: {
                   color: '#28c76f',
                   borderColor: '#28c76f'
@@ -1283,7 +1319,7 @@ const TableContainerEdit = props => {
                 variant: 'outlined',
                 onClick: () => handleAddMulti(item, 1),
                 className: "d-flex toolbar-button"
-              }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+              }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
                 overlayClassName: 'be-popup-container',
                 trigger: ['click'],
                 style: {
@@ -1311,7 +1347,7 @@ const TableContainerEdit = props => {
             template: () => {
               return /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-              }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+              }, /*#__PURE__*/_react.default.createElement(_button.default, {
                 style: {
                   color: '#eb4619',
                   borderColor: '#eb4619'
@@ -1336,7 +1372,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1344,7 +1380,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleAddMulti(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               title: "",
               overlayClassName: 'be-popup-container',
               style: {
@@ -1372,7 +1408,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1391,7 +1427,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1399,7 +1435,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertBefore(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1426,7 +1462,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1434,7 +1470,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertAfter(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1461,7 +1497,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1480,7 +1516,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#eb4619',
                 borderColor: '#eb4619'
@@ -1499,7 +1535,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#eb4619',
                 borderColor: '#eb4619'
@@ -1527,7 +1563,7 @@ const TableContainerEdit = props => {
             template: () => {
               return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-              }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+              }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
                 style: {
                   color: '#28c76f',
                   borderColor: '#28c76f'
@@ -1535,7 +1571,7 @@ const TableContainerEdit = props => {
                 variant: 'outlined',
                 onClick: () => handleAddMulti(item, 1),
                 className: "d-flex toolbar-button"
-              }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+              }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
                 overlayClassName: 'be-popup-container',
                 trigger: ['click'],
                 style: {
@@ -1563,7 +1599,7 @@ const TableContainerEdit = props => {
             template: () => {
               return /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-              }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+              }, /*#__PURE__*/_react.default.createElement(_button.default, {
                 style: {
                   color: '#eb4619',
                   borderColor: '#eb4619'
@@ -1588,7 +1624,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1596,7 +1632,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleAddMulti(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               title: "",
               overlayClassName: 'be-popup-container',
               style: {
@@ -1624,7 +1660,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1643,7 +1679,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1651,7 +1687,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertBefore(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1678,7 +1714,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1686,7 +1722,7 @@ const TableContainerEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertAfter(item, 1),
               className: "d-flex toolbar-button"
-            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
+            }, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_dropdown.default.Button, {
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1713,7 +1749,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -1732,7 +1768,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#eb4619',
                 borderColor: '#eb4619'
@@ -1751,7 +1787,7 @@ const TableContainerEdit = props => {
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
               style: {
                 color: '#eb4619',
                 borderColor: '#eb4619'

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

@@ -184,8 +184,53 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
           disabled: (0, _utils.isDisable)(column, record) ?? false,
           maxDate: maxDate,
-          minDate: minDate,
-          onChange: (newDate, dateString) => {
+          minDate: minDate
+          // mode="date"
+
+          // onChange={(newDate, dateString) => {
+
+          //   const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+
+          //   onChange(newDateValue)
+
+          //   setTimeout(() => {
+          //     // @ts-ignore
+          //     dateTimePickerRef.current?.focus()
+          //   }, 0)
+
+          // }}
+
+          // onBlur={() => {
+          //   const formState = getValues()
+          //   const itemState = getValues(dataIndex)
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+          //   const newState = itemState
+
+          //   if (prevState !== newState) {
+          //     handleCellChange?.({
+          //       key: key as any,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState,
+          //       option: newState,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+          //   }
+          // }}
+          ,
+
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId,
+          needConfirm: false,
+          onCalendarChange: (newDate, dateString) => {
             const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
             onChange(newDateValue);
             setTimeout(() => {
@@ -193,32 +238,28 @@ const EditableCell = props => {
               dateTimePickerRef.current?.focus();
             }, 0);
           },
-          onBlur: () => {
-            const formState = getValues();
-            const itemState = getValues(dataIndex);
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = itemState;
-            if (prevState !== newState) {
-              handleCellChange?.({
-                key: key,
-                field: column.field ?? column.field,
-                record: formState,
-                prevState,
-                newState,
-                option: newState,
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
+          onOpenChange: open => {
+            if (!open) {
+              const formState = getValues();
+              const itemState = getValues(dataIndex);
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = itemState;
+              if (prevState !== newState) {
+                handleCellChange?.({
+                  key: key,
+                  field: column.field ?? column.field,
+                  record: formState,
+                  prevState,
+                  newState,
+                  option: newState,
+                  indexCol,
+                  indexRow,
+                  type: 'blur'
+                });
+              }
             }
-          },
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
-          "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-error`,
-          autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
+          }
         });
       case 'month':
       case 'quarter':