es-grid-template 1.9.65 → 1.9.67

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

@@ -293,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,
@@ -309,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;

package/lib/ali-table/base-table/cell/EditCell.js

@@ -59,7 +59,7 @@ const EditCell = props => {
     handleCellChange,
     errors,
     tableId,
-    startCell,
+    // startCell,
     rowKey,
     t,
     // handleNextCell,
@@ -134,8 +134,8 @@ const EditCell = props => {
             format: dateFormat,
             type: 'mask'
           },
-          autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId,
+          autoFocus: true,
+          defaultOpen: true,
           style: {
             width: '100%',
             height: '100%'
@@ -209,8 +209,8 @@ const EditCell = props => {
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${tableId}-tooltip-error`,
-          autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
+          autoFocus: true,
+          defaultOpen: true
           // needConfirm={true}
           ,
 
@@ -270,8 +270,8 @@ const EditCell = props => {
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${tableId}-tooltip-error`,
-          autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
+          autoFocus: true,
+          defaultOpen: true
         });
       case 'week':
         const weekFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
@@ -292,8 +292,8 @@ const EditCell = props => {
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${tableId}-tooltip-error`,
-          autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
+          autoFocus: true,
+          defaultOpen: true
         });
       case 'time':
         const timeFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
@@ -336,8 +336,8 @@ const EditCell = props => {
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${tableId}-tooltip-error`,
-          autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
+          autoFocus: true,
+          defaultOpen: true
 
           // onChange={(newDate, dateString) => {
 
@@ -519,13 +519,13 @@ const EditCell = props => {
             width: '100%',
             height: '100%'
           },
-          defaultOpen: column.field === startCell?.colId,
-          autoFocus: column.field === startCell?.colId,
+          defaultOpen: true,
+          autoFocus: true,
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           rowKey: keySelect,
-          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : (column.width ?? 150) + 10,
           optionFilterProp: "label",
           popupClassName: 'be-popup-container',
           loadOptions: loadOptions,
@@ -666,8 +666,8 @@ const EditCell = props => {
           showSearch: true,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
-          defaultOpen: column.field === startCell?.colId,
-          autoFocus: column.field === startCell?.colId,
+          defaultOpen: true,
+          autoFocus: true,
           style: {
             width: '100%',
             height: '100%'
@@ -807,8 +807,8 @@ const EditCell = props => {
           // autoDestroy={true}
           ,
           showSearch: true,
-          defaultOpen: column.field === startCell?.colId,
-          autoFocus: column.field === startCell?.colId,
+          defaultOpen: true,
+          autoFocus: true,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
           style: {
@@ -911,8 +911,8 @@ const EditCell = props => {
           treeData: newTreeData,
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           treeDefaultExpandAll: true,
-          defaultOpen: column.field === startCell?.colId,
-          autoFocus: column.field === startCell?.colId,
+          defaultOpen: true,
+          autoFocus: true,
           virtual: true,
           allowClear: true,
           showSearch: true,
@@ -1156,7 +1156,7 @@ const EditCell = props => {
             'be-cell-edit-align-left': column.align === 'left',
             'be-cell-edit-align-right': !column.align || column.align === 'right'
           }),
-          autoFocus: column.field === startCell?.colId,
+          autoFocus: true,
           onValueChange: values => {
             onChange(values?.floatValue || 0);
           },
@@ -1189,9 +1189,10 @@ const EditCell = props => {
         return /*#__PURE__*/_react.default.createElement(TextArea, {
           id: `col${indexCol}-record${indexRow}`,
           style: {
-            textAlign: column.align,
+            // textAlign: column.align, 
             resize: 'none',
             height: '100%'
+            // maxHeight: 'none'
           },
           disabled: (0, _utils.isDisable)(column, record) ?? false,
           className: (0, _classnames.default)('be-cell-editing rounded-0 input-element'),
@@ -1217,26 +1218,30 @@ const EditCell = props => {
                 type: 'blur'
               });
             }
-          },
-          onPressEnter: () => {
-            const formState = getValues();
-            const newState = getValues(dataIndex);
-            // @ts-ignore
-            const prevState = record[dataIndex];
+          }
 
-            // @ts-ignore
+          // onPressEnter={() => {
+
+          //   const formState = getValues()
+          //   const newState = getValues(dataIndex)
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+
+          //   // @ts-ignore
+
+          //   handleCellChange?.({
+          //     key: key as any,
+          //     newState,
+          //     prevState,
+          //     record: formState,
+          //     indexCol,
+          //     indexRow,
+          //     type: 'enter'
+          //   })
+          //   // }
+          // }}
+          ,
 
-            handleCellChange?.({
-              key: key,
-              newState,
-              prevState,
-              record: formState,
-              indexCol,
-              indexRow,
-              type: 'enter'
-            });
-            // }
-          },
           onChange: onChange,
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,