es-grid-template 1.9.64 → 1.9.66

package/es/table-component/header/renderFilter.js

@@ -316,7 +316,7 @@ export const renderFilter = args => {
         ,
         placeholder: tableLocal?.search ?? `Search`,
         value: selectedKeys[0],
-        onChange: e => setSelectedKeys(e.target.value ? [e.target.value.trim()] : [])
+        onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
         ,
         onPressEnter: () => doFilter?.(true),

package/es/table-component/hook/useColumns.js

@@ -255,7 +255,7 @@ export const toggleRowSelection = props => {
       // đã chọn
 
       // xóa row ra list selected 
-      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      const newRowsSelected = prevSelected.filter(it => it.rowId !== row.id);
       setIsSelectionChange({
         isChange: true,
         type: 'rowSelected',

package/es/table-component/style.js

@@ -9,7 +9,7 @@ const color = '#000000';
 const fontSize = '12px';
 const fwBody = '500';
 const fwHeader = '600';
-const BgColor = '#ffffff ';
+// const BgColor = '#ffffff ';
 
 // const primary = "#eb4619";
 
@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-link{text-decoration:underline;color:#336cc9;&:has(textarea){text-decoration:none;}}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;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;z-index:3;}.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;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-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:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, 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.$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.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, 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, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, 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);
+})(["--row-height:34px;--color:#333;--bgcolor:white;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor);--hover-color:var(--body-hover-color);--highlight-bgcolor:#eee;--header-row-height:34px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--border-color-select:#eb4619;--cell-border:1px solid var(--border-color);--cell-border-select:1px solid var(--border-color-select);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "-grid{color:", ";font-size:", ";background-color:var(--bgcolor);font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-link{text-decoration:underline;color:#336cc9;&:has(textarea){text-decoration:none;}}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:var(--header-bgcolor);font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;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;z-index:3;}.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;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:var(--bgcolor);color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-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:var(--footer-bgcolor);font-weight:600;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : 'var(--bgcolor)'}`, props => `${props.$theme.color ? props.$theme.color : color}`, 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, fwHeader, 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, fwBody, props => `${props.$theme.color ? props.$theme.color : color}`, 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-component/style.scss

@@ -442,30 +442,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
     }
 
-    .#{$prefix}-grid-tfoot {
-      // background-color: rgb(250, 250, 250);
-
-      .#{$prefix}-grid-footer-row {
-        border-bottom-width: 1px;
-        border-bottom-color: $tableBorderColor;
-        border-bottom-style: solid;
-
-        border-top-width: 1px;
-        border-top-color: $tableBorderColor;
-        border-top-style: solid;
-
-        background-color: #fafafa;
-
-      }
-
-      .#{$prefix}-grid-cell {
-
-        background-color: inherit;
-
-        border-inline-end: 1px solid $tableBorderColor;
-        font-weight: 500;
-      }
-    }
+   
 
   }
 

package/es/table-component/table/Grid.js

@@ -14,7 +14,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import React, { Fragment } from 'react';
 import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
-import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual, revertConvertFilters } from "../hook/utils";
+import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, flattenArray, getAllRowKey, revertConvertFilters } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
 import classNames from 'classnames';
 import { GridStyle } from "../style";
@@ -169,6 +169,25 @@ const Grid = props => {
 
     // debugTable: true
   });
+  React.useEffect(() => {
+    if (!isSelectionChange.isChange) {
+      if (mergedSelectedKeys.length === 0) {
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: []
+        }));
+      } else {
+        const abc = flattenArray(dataSource);
+        const selectedKeySet = new Set(mergedSelectedKeys);
+        const result = abc.filter(row => selectedKeySet.has(row.id));
+        setRowSelection(convertToObjTrue(mergedSelectedKeys));
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: result
+        }));
+      }
+    }
+  }, [mergedSelectedKeys, dataSource]);
   React.useEffect(() => {
     if (defaultFilter) {
       const a = revertConvertFilters(defaultFilter);
@@ -198,20 +217,6 @@ const Grid = props => {
       }
     }
   }, [columnHidden, columnSizingInfo]);
-  React.useEffect(() => {
-    const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection);
-    if (!isEqual) {
-      setRowSelection(convertToObjTrue(mergedSelectedKeys));
-      // table.setRowSelection(convertToObjTrue(mergedSelectedKeys))
-
-      if (mergedSelectedKeys.length === 0) {
-        setIsSelectionChange(prev => ({
-          ...prev,
-          rowsData: []
-        }));
-      }
-    }
-  }, [mergedSelectedKeys]);
   React.useEffect(() => {
     if (isSelectionChange.isChange) {
       const aa = table.getState().rowSelection;
@@ -220,11 +225,12 @@ const Grid = props => {
       // const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
       const ssss = filterByIds(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
 
-      const rs = ssss.map(it => it.original);
+      // const rs = ssss.map(it => it.original)
+
       rowSelected?.({
         type: isSelectionChange.type,
         rowData: isSelectionChange.rowData,
-        selected: rs
+        selected: ssss
       });
     }
   }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
@@ -287,6 +293,11 @@ const Grid = props => {
     }
   }
   const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+  const tableWrapperProps = {
+    style: {
+      ...theme?.cssVariables
+    }
+  };
   const ContainerComponent = editAble ? TableContainerEdit : TableContainer;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $prefix: prefix,
@@ -303,7 +314,8 @@ const Grid = props => {
       minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined,
       backgroundColor: theme?.backgroundColor ?? undefined,
-      transition: 'max-height 0.3s ease'
+      transition: 'max-height 0.3s ease',
+      ...tableWrapperProps.style
       // overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(DndContext, {

package/es/table-component/useContext.d.ts

@@ -44,6 +44,7 @@ export interface IContext<T> {
         innerHeight: number;
         innerWidth: number;
     };
+    isAddAble?: any;
     control?: any;
     errors?: any;
     handleSubmit?: any;

package/es/table-virtuoso/InternalTable.js

@@ -197,8 +197,6 @@ const InternalTable = props => {
       });
     }
   };
-  console.log('tableData', tableData);
-  console.log('isDataTree', isDataTree);
   const table = useReactTable({
     _features: [OperatorFeature],
     data: tableData,

package/es/table-virtuoso/body/TableBodyCell.js

@@ -345,8 +345,6 @@ const TableBodyCell = props => {
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": tooltipContent,
     className: classNames(`${prefix}-grid-cell`, {
-      // [`${prefix}-grid-cell-ellipsis`]: true,
-
       [`${prefix}-grid-cell-ellipsis`]: !isLastLeftPinnedColumn && !isFirstRightPinnedColumn && (!wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'))),
       [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
       // [`${prefix}-grid-cell-selected`]: isCellSelected,
@@ -437,7 +435,10 @@ const TableBodyCell = props => {
       }
     }
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree ? /*#__PURE__*/React.createElement("div", {
-    className: classNames('ui-rc_cell-content', {})
+    className: classNames('ui-rc_cell-content', {}),
+    style: {
+      display: 'flex'
+    }
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
     style: {
@@ -478,7 +479,9 @@ const TableBodyCell = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), groupValue ? groupValue : cellContent) : /*#__PURE__*/React.createElement(React.Fragment, null, isLastLeftPinnedColumn ? /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: classNames('group-content')
+  }, groupValue ? groupValue : cellContent)) : /*#__PURE__*/React.createElement(React.Fragment, null, isLastLeftPinnedColumn ? /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {
       [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
       [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),

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:5px 8px;&.", "-grid-cell-fix-left-last{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;right:0;bottom:-1px;width:30px;transform:translateX(100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset 10px 0 8px -8px rgba(5,5,5,0.09);}}&.", "-grid-cell-fix-right-first{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;bottom:-1px;left:0;width:30px;transform:translateX(-100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset -10px 0 8px -8px rgba(5,5,5,0.09);}&::before{content:'';position:absolute;inset-block:0;inset-inline-start:-1px;border-inline-start:1px solid #e0e0e0;}}.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.$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;&.", "-grid-cell-fix-left-last{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;right:0;bottom:-1px;width:30px;transform:translateX(100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset 10px 0 8px -8px rgba(5,5,5,0.09);}}&.", "-grid-cell-fix-right-first{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;bottom:-1px;left:0;width:30px;transform:translateX(-100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset -10px 0 8px -8px rgba(5,5,5,0.09);}&::before{content:'';position:absolute;inset-block:0;inset-inline-start:-1px;border-inline-start:1px solid #e0e0e0;}}&.", "-grid-cell-ellipsis{.group-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}.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.$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/lib/ali-table/ColumnsConfig.js

@@ -12,6 +12,8 @@ var _aliTable = _interopRequireDefault(require("../ali-table"));
 var _hooks = require("../grid-component/hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import TableAli from '../table-template'
+
 const align = {
   left: 'Left',
   right: 'Right'

package/lib/ali-table/Grid.d.ts

@@ -5,6 +5,7 @@ import './base-table/styles.scss';
 import type { BaseTable } from "./base-table/table";
 import type { VirtualEnum } from "./base-table/interfaces";
 import type { TableProps } from "../grid-component";
+import type { ToolbarItem } from "../grid-component/type";
 declare const Grid: React.ForwardRefExoticComponent<Omit<TableProps, "useVirtual"> & {
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
@@ -18,5 +19,8 @@ declare const Grid: React.ForwardRefExoticComponent<Omit<TableProps, "useVirtual
         header?: VirtualEnum;
     };
     dataRowIds: any[];
+    toolbarItemTopRight?: ToolbarItem[];
+    toolbarItemsTop?: ToolbarItem[];
+    toolbarItemsBottom?: ToolbarItem[];
 } & React.RefAttributes<BaseTable>>;
 export default Grid;

package/lib/ali-table/InternalTable.js

@@ -35,6 +35,7 @@ var _reactNumericComponent = require("react-numeric-component");
 var _moment = _interopRequireDefault(require("moment"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import { createPortal } from "react-dom"
 const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
 const {
   Paragraph,
@@ -179,6 +180,12 @@ const InternalTable = props => {
     return (0, _utils.getVisibleFields)(columns);
   }, [columns]);
   const dataIds = _react.default.useMemo(() => convertData.map(it => it.rowId), [convertData]);
+  const isAddAble = _react.default.useMemo(() => {
+    if (!toolbarItems) {
+      return false;
+    }
+    return toolbarItems.find(it => it.key === 'ADD') ? true : false;
+  }, [toolbarItems]);
 
   // const columnVisibility = React.useMemo(() => {
   //   return getVisibleFields(columns)
@@ -319,11 +326,103 @@ const InternalTable = props => {
       if (!onCellChange) {
         onSubmit(record);
       }
-    }
-    if (prevState && newState && prevState !== newState && changeType === 'enter') {
+    } else if (prevState && newState && prevState !== newState && changeType === 'enter') {
       onSubmit(record);
     }
   };
+  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 = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = (0, _utils.updateArrayByKey)(newData, row, rowKey);
+      if (index > -1) {
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+  const handleCellChangeAndAddRow = args => {
+    const {
+      record,
+      type: changeType,
+      newState,
+      option,
+      field,
+      indexCol,
+      indexRow,
+      key
+    } = args;
+
+    // add new row
+
+    const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
+    const newRowId = (0, _utils.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 = convertData.concat(newRows);
+    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]);
+        }
+      }
+    }
+  };
   const handleHeaderCellChange = args => {
     const {
       record,
@@ -359,6 +458,27 @@ const InternalTable = props => {
       onSubmit(record);
     }
   };
+  const handleAddMulti = _react.default.useCallback((item, n, newId) => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
+      const newRows = Array.from({
+        length: n
+      }).map(() => defaultRowValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId: n === 1 && newId ? newId : (0, _utils.newGuid)()
+      } : {
+        id: undefined,
+        rowId: n === 1 && newId ? newId : (0, _utils.newGuid)()
+      });
+      const newData = convertData.concat(newRows);
+      triggerChangeData?.(newData);
+    }
+  }, [convertData, defaultValue, triggerChangeData]);
   const pipeline = (0, _pipeline.useTablePipeline)({
     components: fusion
   }).input({
@@ -391,7 +511,7 @@ const InternalTable = props => {
     checkboxColumn: {
       lock: true
     },
-    clickArea: selectionSettings?.checkboxOnly ? 'checkbox' : 'row',
+    clickArea: selectionSettings?.checkboxOnly || editAble ? 'checkbox' : 'row',
     // clickArea: 'row',
     onChange: (nextValue, rowData, type) => {
       const rs = (0, _selected.getRowsByKeysKeepTreeOrder)(nextValue, mergedData ?? [], rowKey);
@@ -450,6 +570,7 @@ const InternalTable = props => {
     },
     // Edit
     editAble,
+    isAddAble,
     rowEditable,
     setValue,
     reset,
@@ -464,11 +585,15 @@ const InternalTable = props => {
     handleHeaderCellChange,
     headerData,
     triggerChangeData,
-    onCellClick
+    onCellClick,
+    handleAddMulti,
+    handleCellChangeAndAddRow
   })).use(_pipeline.features.paginationFeature({
     pagination
   }));
 
+  // const editingCell = pipeline.getStateAtKey(stateKeyIsEditing)
+
   // const onResizeEnd = (args: any[]) => {
 
   // }
@@ -674,34 +799,6 @@ const InternalTable = props => {
       }
     }
   }, [commandSettings, t, triggerChangeData]);
-  const handleAddMulti = _react.default.useCallback((item, n, newId) => {
-    if (item.onClick) {
-      item.onClick({
-        toolbar: item
-      });
-    } else {
-      const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
-      const newRows = Array.from({
-        length: n
-      }).map(() => defaultRowValue ? {
-        ...defaultRowValue,
-        id: undefined,
-        rowId: n === 1 && newId ? newId : (0, _utils.newGuid)()
-      } : {
-        id: undefined,
-        rowId: n === 1 && newId ? newId : (0, _utils.newGuid)()
-      });
-
-      // const kkk = getAllRowKey(newRows) ?? []
-
-      // const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk]
-
-      // setMergedFilterKeys?.(rs)
-
-      const newData = convertData.concat(newRows);
-      triggerChangeData?.(newData);
-    }
-  }, [convertData, defaultValue, triggerChangeData]);
   const handleDuplicate = _react.default.useCallback(() => {
     // không tính tree
 
@@ -1026,7 +1123,8 @@ const InternalTable = props => {
     };
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [startCell, endCell, copySelectionToClipboard, isEditing, convertData, triggerChangeData, leafColumns, handleCellChange, rangeState?.rowRange, rangeState?.colRange]);
+  }, [startCell, endCell, copySelectionToClipboard, isEditing, convertData, triggerChangeData, leafColumns, rangeState?.rowRange, rangeState?.colRange]);
+  // }, [startCell, endCell, copySelectionToClipboard, isEditing, convertData, triggerChangeData, leafColumns, handleCellChange, rangeState?.rowRange, rangeState?.colRange]);
 
   // Copy
 

package/lib/ali-table/base-table/cell/EditCell.d.ts

@@ -12,12 +12,10 @@ interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement>
     indexCol: number;
     cellEditing?: any;
     visibleColumns?: Column<DataType>[];
-    handleNextCell?: () => void;
     control?: any;
     getValues?: any;
     errors?: any;
     rowKey?: any;
-    startCell?: any;
     handleCellChange?: any;
     tableId: string;
     onSubmit: any;