es-grid-template 1.9.65 → 1.9.67

package/lib/ali-table/base-table/styles.js

@@ -68,11 +68,11 @@ const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell
 const StyleTableContainer = exports.StyleTableContainer = _styledComponents.default.div.withConfig({
   displayName: "StyleTableContainer",
   componentId: "es-grid-template__sc-ipj1ht-0"
-})(["--row-height:34px;--color:#333;--bgcolor:white;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor,#f5f5f5);--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;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--hover-color:#dadde1;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.use-outer-border{", ";}&.", "{.", "{border-left:0;border-right:0;td,th{border-right:0;}td.first,th.first{border-left:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),0px 0 0 0 var(--border-color);}}}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{&.use-outer-border{border-bottom:var(--header-cell-border);}.", "{border-top:0;td,th{border-bottom:0;border-top:0;}td.lock-left{box-shadow:none;}td.first,th.first{}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{.", "{border:0;td,th{border-right:0;border-bottom:0;}td.lock-left{box-shadow:none;}td,th{border:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{border-top:0;border:0;}}}.", "{padding:8px;}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.auto-height{.ui-rc-grid-bottom{border-top:0;}}.ui-rc-grid-bottom{border-top:var(--cell-border-horizontal);}.ui-rc-toolbar-bottom{.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{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;}}}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, outerBorderStyleMixin, Classes.gridHorizontal, Classes.tableWrapper, Classes.tableTop, Classes.gridVertical, Classes.tableWrapper, Classes.tableTop, Classes.gridNone, Classes.tableWrapper, Classes.tableTop, Classes.tableTop, Classes.tableThemeDark);
+})(["--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;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--hover-color:#dadde1;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.use-outer-border{", ";}&.", "{.", "{border-left:0;border-right:0;td,th{border-right:0;}td.first,th.first{border-left:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),0px 0 0 0 var(--border-color);}}}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{&.use-outer-border{border-bottom:var(--header-cell-border);}.", "{border-top:0;td,th{border-bottom:0;border-top:0;}td.lock-left{box-shadow:none;}td.first,th.first{}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{.", "{border:0;td,th{border-right:0;border-bottom:0;}td.lock-left{box-shadow:none;}td,th{border:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{border-top:0;border:0;}}}.", "{padding:8px;}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.auto-height{.ui-rc-grid-bottom{border-top:0;}}.ui-rc-grid-bottom{border-top:var(--cell-border-horizontal);}.ui-rc-toolbar-bottom{.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{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;}}}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, outerBorderStyleMixin, Classes.gridHorizontal, Classes.tableWrapper, Classes.tableTop, Classes.gridVertical, Classes.tableWrapper, Classes.tableTop, Classes.gridNone, Classes.tableWrapper, Classes.tableTop, Classes.tableTop, Classes.tableThemeDark);
 const StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.div.withConfig({
   displayName: "StyledArtTableWrapper",
   componentId: "es-grid-template__sc-ipj1ht-1"
-})(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{}&::-webkit-scrollbar-track{}&::-webkit-scrollbar-thumb{}&::-webkit-scrollbar-thumb:hover{}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td.cell-edit{&.lock-left,&.lock-right{}}td.first{&.lock-left{border-bottom-width:1px;}}}tr.ui-rc-grid-table-row{td.cell-edit.cell-border-bottom{}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}textarea.ui-rc-input{line-height:1.8;max-height:calc(var(--header-row-height) - 1px) !important;min-height:calc(var(--header-row-height) - 1px) !important;}}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);outline:none;&.cell-edit{user-select:none;&:has(.dragging-point){position:relative;}.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:var(--border-color-select);bottom:0;right:0;}}&.disable{background-color:#f0f0f0;}}&.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,.ui-rc-input{height:100% !important;&:focus-visible{outline:none;}}.ui-rc-color-picker-trigger{width:100%;border-radius:0;.ui-rc-color-picker-color-block{width:100%;}}textarea.ui-rc-input{line-height:1.8;max-height:calc(var(--row-height) - 1px) !important;min-height:calc(var(--row-height) - 1px) !important;}input.be-cell-editing,.ant-picker,.ui-rc-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.#{$prefix}-checkbox-wrapper{.#{$prefix}-checkbox{background-color:red;}.#{$prefix}-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker,.ui-rc-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.#{$prefix}-table-select-single .#{$prefix}-table-select-selector,.#{$prefix}-select-single .#{$prefix}-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.#{$prefix}-table-select-single:not( .#{$prefix}-table-select-customize-input ){.#{$prefix}-table-select-selector{.#{$prefix}-table-select-selection-search-input{height:auto;}}}}.abccccc{box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color),1px 0 0 0 var(--border-color);}&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}&.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{position:relative;&::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;}}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Classes.cellSelected, Classes.cellSelected, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
+})(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{}&::-webkit-scrollbar-track{}&::-webkit-scrollbar-thumb{}&::-webkit-scrollbar-thumb:hover{}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td.cell-edit{&.lock-left,&.lock-right{}}td.first{&.lock-left{border-bottom-width:1px;}}}tr.ui-rc-grid-table-row{td.cell-edit.cell-border-bottom{}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}textarea.ui-rc-input{line-height:1.8;max-height:calc(var(--header-row-height) - 1px) !important;min-height:calc(var(--header-row-height) - 1px) !important;}}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);outline:none;&.cell-edit{user-select:none;&:has(.dragging-point){position:relative;}.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:var(--border-color-select);bottom:0;right:0;}}&.disable{background-color:#f0f0f0;}}&.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,.ui-rc-input{height:100% !important;&:focus-visible{outline:none;}}.ui-rc-color-picker-trigger{width:100%;border-radius:0;.ui-rc-color-picker-color-block{width:100%;}}textarea.ui-rc-input{line-height:1.8;height:100%;max-height:calc(var(--row-height) - 1px) !important;min-height:calc(var(--row-height) - 1px) !important;}input.be-cell-editing,.ant-picker,.ui-rc-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.#{$prefix}-checkbox-wrapper{.#{$prefix}-checkbox{background-color:red;}.#{$prefix}-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker,.ui-rc-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.#{$prefix}-table-select-single .#{$prefix}-table-select-selector,.#{$prefix}-select-single .#{$prefix}-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.#{$prefix}-table-select-single:not( .#{$prefix}-table-select-customize-input ){.#{$prefix}-table-select-selector{.#{$prefix}-table-select-selection-search-input{height:auto;}}}}.abccccc{box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color),1px 0 0 0 var(--border-color);}&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-paste-border-top{position:relative;&::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{position:relative;&::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;}}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Classes.cellSelected, Classes.cellSelected, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
 
 // type StyleTableContainerProps = {
 

package/lib/ali-table/base-table/styles.scss

@@ -17,3 +17,17 @@ $prefix: 'ui-rc' !default;
   box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
   overflow: hidden;
 }
+
+.cell-editor {
+  position: fixed;
+  z-index: 99999;
+
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+
+  border: 1px solid #1677ff;
+  background: white;
+
+  outline: none;
+}

package/lib/ali-table/pipeline/features/columnCustom.d.ts

@@ -58,6 +58,7 @@ export interface ColumnFeatureOptions {
     currentPage?: number;
     pageSize?: number;
     editAble?: boolean;
+    isAddAble?: boolean;
     rowEditable?: (rowData: any) => boolean;
     setValue?: any;
     reset?: any;
@@ -70,6 +71,8 @@ export interface ColumnFeatureOptions {
     handleSubmit: any;
     onSubmit: any;
     handleCellChange: any;
+    handleCellChangeAndAddRow: any;
+    handleAddMulti: any;
     handleHeaderCellChange?: any;
     dataErrors?: any[];
     headerData?: any;

package/lib/ali-table/pipeline/features/columnCustom.js

@@ -50,7 +50,10 @@ function columnCustom(opts) {
     isDataTree,
     defaultSorter,
     defaultFilter,
+    rowIndexMap,
+    // Edit
     editAble,
+    isAddAble,
     rowEditable,
     setValue,
     reset,
@@ -63,11 +66,12 @@ function columnCustom(opts) {
     handleSubmit,
     onSubmit,
     handleCellChange,
+    handleCellChangeAndAddRow,
     handleHeaderCellChange,
+    handleAddMulti,
     dataErrors,
     headerData,
     headerEditAble,
-    rowIndexMap,
     onCellClick
     // originData
 
@@ -82,7 +86,6 @@ function columnCustom(opts) {
   const rowKey = 'rowId';
   return function columnResizeFeature(pipeline) {
     // State table
-
     const sizes = opts.sizes ?? pipeline.getStateAtKey(_constants.stateKeyResize) ?? opts.defaultSizes ?? [];
     const filterState = pipeline.getStateAtKey(_constants.stateKeyFilter) ?? defaultFilter ?? [];
     const visible = pipeline.getStateAtKey(_constants.stateKeyVisible) ?? '';
@@ -106,11 +109,16 @@ function columnCustom(opts) {
     // const rowIdsHeader = Array.from({ length: deppthCols }, (_, index) => `field-${index}`)
 
     const allCols = [...leafColumns];
+    const defaultCellEditing = {
+      editing: false,
+      element: null,
+      rect: null
+    };
 
     // State for Edit
 
     const focusedCell = pipeline.getStateAtKey(_constants.stateKeyFocusedCell) ?? {};
-    const isEditing = pipeline.getStateAtKey(_constants.stateKeyIsEditing) ?? false;
+    const isEditing = pipeline.getStateAtKey(_constants.stateKeyIsEditing) ?? defaultCellEditing;
     const editCellSettings = pipeline.getStateAtKey(_constants.stateKeyEditCellSettings);
     const isSelecting = pipeline.getStateAtKey(_constants.stateKeyIsSelecting) ?? false;
     const isPasting = pipeline.getStateAtKey(_constants.stateKeyIsPasting) ?? false;
@@ -120,7 +128,7 @@ function columnCustom(opts) {
     const endPasteCell = pipeline.getStateAtKey(_constants.stateKeyEndPasteCell) ?? undefined;
     const typePaste = pipeline.getStateAtKey(_constants.stateKeyTypePaste) ?? undefined;
     const rangeState = startCell && endCell ? (0, _utils2.getSelectedCellMatrix1)(allRows, leafColumns, startCell, endCell) : undefined;
-    const rangePasteState = startPasteCell && endPasteCell ? (0, _utils2.getSelectedCellMatrix1)(allRows, leafColumns, startPasteCell, endPasteCell, typePaste) : undefined;
+    const rangePasteState = startPasteCell && endPasteCell && typePaste ? (0, _utils2.getSelectedCellMatrix1)(allRows, leafColumns, startPasteCell, endPasteCell, typePaste) : undefined;
     const nextColumn = focusedCell?.colId ? (0, _utils2.getNextColumn1)(leafColumns, focusedCell?.colId) : undefined;
     const {
       rowRange,
@@ -130,6 +138,15 @@ function columnCustom(opts) {
       endColIndex,
       endRowIndex
     } = rangeState ?? {};
+    const {
+      rowRange: rowPasteRange,
+      colRange: colPasteRange,
+      startColIndex: startPasteColIndex,
+      startRowIndex: startPasteRowIndex,
+      endColIndex: endPasteColIndex,
+      endRowIndex: endPasteRowIndex,
+      type: pasteType
+    } = rangePasteState ?? {};
     const rowPasteIds = (0, _utils2.getRowIdsBetween3)(allRows, rowIndexMap, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
     const colPasteds = (0, _utils2.getColIdsBetween1)(leafColumns, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
     const rowSelectIds = (0, _utils2.getRowIdsBetween3)(allRows, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
@@ -305,8 +322,31 @@ function columnCustom(opts) {
     //  Chức năng edit
 
     const handleEdit = (e, record, col, editType, isKeyDown, isHeader) => {
-      pipeline.setStateAtKey(_constants.stateKeyIsEditing, true);
       reset?.();
+      const cell = e.currentTarget;
+      pipeline.setStateAtKey(_constants.stateKeyIsEditing, {
+        editing: true,
+        element: cell,
+        rect: cell.getBoundingClientRect()
+      });
+
+      // editor = document.createElement('div')
+
+      // editor.className = 'cell-editor'
+
+      // editor.contentEditable = 'true'
+
+      // editor.style.left = `${rect.left}px`
+      // editor.style.top = `${rect.top}px`
+      // editor.style.width = `${rect.width}px`
+      // editor.style.height = `${rect.height}px`
+
+      // editor.innerText = cell.innerText
+
+      // document.body.appendChild(editor)
+
+      // editor.focus()
+
       if (!(0, _hooks.isObjEmpty)(record)) {
         Object.entries(record).forEach(([name, value]) => {
           setValue?.(name, value);
@@ -350,7 +390,9 @@ function columnCustom(opts) {
         });
         dataSelected.push(rowData);
       });
-      const copyRows = (0, _utils2.flattenData)('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
+
+      // const copyRows = flattenData('children', dataSource).filter((it) => rowSelectIds.includes(it[rowKey]))
+      const copyRows = allRows.filter(it => rowSelectIds.includes(it[rowKey]));
       let newRange;
       if (pasteState.type === 'down') {
         // kéo xuóng
@@ -387,7 +429,7 @@ function columnCustom(opts) {
       }
 
       // Cập nhật data mới
-      const newData = (0, _utils2.flattenArray)(allRows);
+      const newData = allRows;
       const pastedRows = [];
       if (pasteState.type === 'down' || pasteState.type === 'up') {
         newRange.addedRows.forEach((rowValues, rowIndex1) => {
@@ -454,8 +496,8 @@ function columnCustom(opts) {
         });
       }
 
-      // const rsFilterData = updateOrInsert(flattenArray(dataSource), newData)
-      const rsFilterData = (0, _utility.updateOrInsert)(dataSource, newData);
+      // const rsFilterData = updateOrInsert(dataSource, newData)
+      const rsFilterData = (0, _utility.updateOrInsert)(allRows, newData);
       const rs = (0, _utility.unFlattenData)(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
       pipeline.setStateAtKey(_constants.stateKeyEndCell, endPasteCell);
@@ -482,7 +524,7 @@ function columnCustom(opts) {
       const newRange = ctrlKey ? (0, _utils2.addRowsDownWithCtrl)(dataSelected, rowsPasteId.length) : (0, _utils2.addRowsDown)(dataSelected, rowsPasteId.length);
 
       // Cập nhật data mới
-      const newData = (0, _utils2.flattenArray)(dataSource);
+      const newData = allRows;
       const pastedRows = [];
       newRange.addedRows.forEach((rowValues, rowIndex1) => {
         const targetRow = pasteState?.startRowIndex + rowIndex1;
@@ -502,6 +544,8 @@ function columnCustom(opts) {
         // Lưu dòng được paste
         pastedRows.push(newData[targetRow]);
       });
+
+      // const rsFilterData = updateOrInsert(dataSource, newData)
       const rsFilterData = (0, _utility.updateOrInsert)(dataSource, newData);
       const rs = (0, _utility.unFlattenData)(rsFilterData);
       triggerPaste?.(pastedRows, colsPastedId, rs, copyRows);
@@ -524,7 +568,7 @@ function columnCustom(opts) {
             rowId,
             colId
           });
-          pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
+          pipeline.setStateAtKey(_constants.stateKeyIsEditing, defaultCellEditing);
         });
       } else {}
     };
@@ -776,7 +820,7 @@ function columnCustom(opts) {
         // handleDeleteContent?.()
 
         if (startCell && endCell) {
-          const tmpData = (0, _utils2.flattenArray)([...dataSource]);
+          const tmpData = allRows;
           const rs = tmpData.map((row, index) => {
             if (!rangeState?.rowRange.includes(row.rowId)) {
               return row;
@@ -887,98 +931,6 @@ function columnCustom(opts) {
         return;
       }
 
-      // if (e.key === 'ArrowRight') {
-
-      //   // e.preventDefault();
-      //   // e.stopPropagation()
-
-      //   const nextCol = getNextColumn(leafColumns, column.field)
-
-      //   if (nextCol.column && !nextCol.isWrapped) {
-
-      //     const nextCellPosition = { rowId, colId: nextCol.column.field }
-
-      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
-
-      //   }
-
-      //   return
-      // }
-
-      // if (e.key === 'ArrowLeft') {
-
-      //   // e.preventDefault()
-      //   // e.stopPropagation()
-
-      //   const prevCol = getPrevColumn(leafColumns, column.field)
-
-      //   if (prevCol) {
-
-      //     const nextCellPosition = { rowId, colId: prevCol.field }
-      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
-
-      //   }
-      //   return
-      // }
-
-      // if (e.key === 'ArrowDown') {
-
-      //   // e.preventDefault()
-      //   // e.stopPropagation()
-
-      //   const nextRow = allRows[rowIndex + 1]
-
-      //   if (nextRow) {
-      //     const nextRowId = nextRow.rowId
-
-      //     const nextCellPosition = { rowId: nextRowId, colId }
-      //     // setFocusedCell?.({ rowId: nextRowId, colId });
-      //     // setStartCell?.({ rowId: nextRowId, colId });
-      //     // setEndCell?.({ rowId: nextRowId, colId });
-
-      //     // setRangeState?.(getSelectedCellMatrix(table, { rowId: nextRowId, colId }, { rowId: nextRowId, colId }))
-
-      //     // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
-      //     // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
-
-      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
-
-      //     // const rowElement: any = document.querySelector(`.ui-rc-grid-table-row[data-row-key="${nextRowId}"]`)
-
-      //     // const cellFocus = rowElement?.querySelector('.ui-rc-grid-cell')
-
-      //   }
-
-      //   return
-      // }
-
-      // if (e.key === 'ArrowUp') {
-
-      //   // e.preventDefault()
-      //   // e.stopPropagation()
-
-      //   const nextRow = allRows[rowIndex - 1]
-
-      //   if (nextRow) {
-      //     const nextRowId = nextRow.rowId
-
-      //     const nextCellPosition = { rowId: nextRowId, colId }
-
-      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
-
-      //   }
-
-      //   return
-      // }
-
       // if (e.key === 'Delete') {
       //   handleDeleteContent?.()
       //   return
@@ -996,7 +948,7 @@ function columnCustom(opts) {
         handleEdit(e, record, column, editType, true, true);
       }
     };
-    const handleChange = (record, column, indexCol) => {
+    const handleChange = (record, column, indexCol, type) => {
       const currentRowIndex = allRows.findIndex(r => r.rowId === record.rowId);
       const formState = getValues();
       const itemState = getValues(column.field);
@@ -1012,10 +964,54 @@ function columnCustom(opts) {
           option: newState,
           indexCol: indexCol,
           indexRow: currentRowIndex,
-          type: 'blur'
+          type: type ?? 'blur'
         });
       } else {}
     };
+    const handleChangeAndCreateRow = (record, column, indexCol) => {
+      const currentRowIndex = allRows.findIndex(r => r.rowId === record.rowId);
+      const formState = getValues();
+      const itemState = getValues(column.field);
+      const prevState = record[column.field];
+      const newState = itemState;
+      if (newState !== prevState) {
+        // vừa cell change + add new row
+        handleCellChangeAndAddRow?.({
+          key: record.rowId,
+          field: column.field,
+          record: formState,
+          prevState,
+          newState,
+          option: newState,
+          indexCol: indexCol,
+          indexRow: currentRowIndex,
+          type: 'blur'
+        });
+      } else {
+        // chỉ add new row
+
+        const newRowId = (0, _utils2.newGuid)();
+        handleAddMulti?.({}, 1, newRowId);
+        const nextCellPosition = {
+          rowId: newRowId,
+          colId: column.field
+        };
+        pipeline.setStateAtKey(_constants.stateKeyFocusedCell, nextCellPosition);
+        pipeline.setStateAtKey(_constants.stateKeyStartCell, nextCellPosition);
+        pipeline.setStateAtKey(_constants.stateKeyEndCell, nextCellPosition);
+        setTimeout(() => {
+          const row = document.querySelector(`.ui-rc-grid-table-row[data-row-key="${newRowId}"]`);
+          const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+          if (cellFocus) {
+            cellFocus.scrollIntoView({
+              behavior: "smooth",
+              block: "start"
+            });
+            cellFocus.focus();
+          }
+        }, 100);
+      }
+    };
     const handleHeaderChange = (record, column, indexCol) => {
       const currentRowIndex = allRows.findIndex(r => r.rowId === record.rowId);
       const formState = getValues();
@@ -1281,7 +1277,7 @@ function columnCustom(opts) {
         [col.field]: headerData?.[col.field] ?? ''
       };
       const headerValue = headerData?.[col.field] ?? '';
-      const cellHeaderEditing = isEditing && headerRowId === focusedCell.rowId && col.field === focusedCell.colId;
+      const cellHeaderEditing = isEditing.editing && headerRowId === focusedCell.rowId && col.field === focusedCell.colId;
       const isCellSelect = headerRowId === focusedCell.rowId && startCell?.colId === col.field;
       const aa = (0, _utils3.getColumnsAtLevel)(originCols, headerRowIndex);
       const aaEditAble = aa ? aa.filter(it => it.headerEditEnable) : undefined;
@@ -1386,7 +1382,7 @@ function columnCustom(opts) {
           // @ts-ignore
           'data-col-key': col.field,
           ref: el => {
-            if (focusedCell?.rowId === headerRowId && focusedCell?.colId === col.field && !isEditing) {
+            if (focusedCell?.rowId === headerRowId && focusedCell?.colId === col.field && !isEditing.editing) {
               el?.focus({
                 preventScroll: true
               });
@@ -1431,7 +1427,7 @@ function columnCustom(opts) {
             // chưa editing
 
             if (headerEditAble) {
-              if (!isEditing) {
+              if (!isEditing.editing) {
                 handleHeaderKeyDown(e, headerRowId, col.field, headerRowIndex, col, headerRecord, headerEditType ?? 'text');
               } else {
                 if (e.shiftKey && e.key === 'Enter') {
@@ -1453,7 +1449,7 @@ function columnCustom(opts) {
                     // pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
 
                     handleHeaderChange(headerRecord, col, startIndex);
-                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
+                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, defaultCellEditing);
 
                     // } 
                   }
@@ -1496,7 +1492,7 @@ function columnCustom(opts) {
                       // }
                     }
                     handleHeaderChange(headerRecord, col, startIndex);
-                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
+                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, defaultCellEditing);
                   }
                 }
               }
@@ -1516,21 +1512,23 @@ function columnCustom(opts) {
           const canEdit = (0, _hooks.isEditable)(col, record) && isRowEditable !== false;
           const editType = typeof col.editType === 'function' ? col.editType(record) : col.editType;
           const isInRange = colRange && rowRange && rowRange.includes(record.rowId) && colRange.includes(col.field);
-          const isInRangePaste = rangePasteState && rangePasteState?.rowRange?.includes(record.rowId) && rangePasteState?.colRange?.includes(col.field);
+          const isInRangePaste = colPasteRange && rowPasteRange && rowPasteRange?.includes(record.rowId) && colPasteRange.includes(col.field);
           const rowIdx = rowIds ? rowIds.indexOf(record.rowId) : -1;
           const colIdx = colIds ? colIds.indexOf(col.field) : -1;
-          const rowIdxPaste = rowIds?.indexOf(record.rowId);
-          const colIdxPaste = colIds?.indexOf(col.field);
+          const rowIdxPaste = rowIds ? rowIds?.indexOf(record.rowId) : -1;
+          const colIdxPaste = colIds ? colIds?.indexOf(col.field) : -1;
+          // const colIdsPaste = rangePasteState?.colRange?.includes(col.field)
+
           const isCellSelected = !startCell || !endCell ? false : selectRowIds.includes(record.rowId) && cols.includes(col.field);
           const isTop = rowIdx === startRowIndex;
           const isBottom = rowIdx === endRowIndex;
           const isLeft = colIdx === startColIndex;
           const isRight = colIdx === endColIndex;
-          const isTopPaste = rowIdxPaste === rangePasteState?.startRowIndex;
-          const isBottomPaste = rowIdxPaste === rangePasteState?.endRowIndex;
-          const isLeftPaste = colIdxPaste === rangePasteState?.startColIndex;
-          const isRightPaste = colIdxPaste === rangePasteState?.endColIndex;
-          const cellEditing = isEditing && record.rowId === focusedCell.rowId && col.field === focusedCell.colId;
+          const isTopPaste = rowIdxPaste === startPasteRowIndex;
+          const isBottomPaste = rowIdxPaste === endPasteRowIndex;
+          const isLeftPaste = colIdxPaste === startPasteColIndex;
+          const isRightPaste = colIdxPaste === endPasteColIndex;
+          const cellEditing = isEditing.editing && record.rowId === focusedCell.rowId && col.field === focusedCell.colId;
 
           //  content display
 
@@ -1556,7 +1554,7 @@ function columnCustom(opts) {
             'data-tooltip-id': `${id}-tooltip-content`,
             'data-tooltip-content': message ?? tooltipContent,
             ref: el => {
-              if (focusedCell?.rowId === record.rowId && focusedCell?.colId === col.field && !isEditing) {
+              if (focusedCell?.rowId === record.rowId && focusedCell?.colId === col.field && !isEditing.editing) {
                 el?.focus({
                   preventScroll: true
                 });
@@ -1579,14 +1577,14 @@ function columnCustom(opts) {
               disable: !canEdit,
               // isValid: !isEditing && rowError && rowError[col.field]?.field === col.field,
               [`${prefix}-grid-cell-selected`]: isCellSelected,
-              'cell-border-bottom': !isEditing && isInRange && isBottom,
-              'cell-border-right': !isEditing && isInRange && isRight,
-              'cell-border-top': !isEditing && isInRange && isTop,
-              'cell-border-left': !isEditing && isInRange && isLeft,
-              'cell-paste-border-bottom': isInRangePaste && isBottomPaste && (rangePasteState.endRowIndex ?? 0) > (endRowIndex ?? 0),
-              'cell-paste-border-right': isInRangePaste && isRightPaste,
-              'cell-paste-border-top': isInRangePaste && isTopPaste && (rangePasteState.endRowIndex ?? 0) < (endRowIndex ?? 0),
-              'cell-paste-border-left': isInRangePaste && isLeftPaste
+              'cell-border-bottom': !isEditing.editing && isInRange && isBottom,
+              'cell-border-right': !isEditing.editing && isInRange && isRight,
+              'cell-border-top': !isEditing.editing && isInRange && isTop,
+              'cell-border-left': !isEditing.editing && isInRange && isLeft,
+              'cell-paste-border-bottom': isInRangePaste && isBottomPaste && (pasteType === 'down' || pasteType === 'right' || pasteType === 'left'),
+              'cell-paste-border-right': isInRangePaste && isRightPaste && (pasteType === 'down' || pasteType === 'right' || pasteType === 'up'),
+              'cell-paste-border-top': isInRangePaste && isTopPaste && (pasteType === 'up' || pasteType === 'left' || pasteType === 'right'),
+              'cell-paste-border-left': isInRangePaste && isLeftPaste && (pasteType === 'down' || pasteType === 'left' || pasteType === 'up')
             }),
             onMouseDown: e => {
               prevCellProps?.onMouseDown?.(e);
@@ -1683,7 +1681,7 @@ function columnCustom(opts) {
               prevCellProps?.onKeyDown?.(e);
 
               // chưa editing
-              if (!isEditing) {
+              if (!isEditing.editing) {
                 handleKeyDown(e, record.rowId, col.field, rowIndex, col, record, editType ?? 'text');
               } else {
                 if (e.shiftKey && e.key === 'Enter') {
@@ -1703,14 +1701,15 @@ function columnCustom(opts) {
                       pipeline.setStateAtKey(_constants.stateKeyFocusedCell, nextCellPosition);
                       pipeline.setStateAtKey(_constants.stateKeyStartCell, nextCellPosition);
                       pipeline.setStateAtKey(_constants.stateKeyEndCell, nextCellPosition);
-
-                      // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
-
                       handleChange(record, col, startIndex);
-                      pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
+                      pipeline.setStateAtKey(_constants.stateKeyIsEditing, defaultCellEditing);
                     } else {
-
-                      // handleChangeAndCreateRow()
+                      if (isAddAble) {
+                        handleChangeAndCreateRow(record, col, startIndex);
+                      } else {
+                        handleChange(record, col, startIndex, 'blur');
+                        pipeline.setStateAtKey(_constants.stateKeyIsEditing, defaultCellEditing);
+                      }
                     }
                   }
                   if (e.key === 'Tab') {
@@ -1747,7 +1746,7 @@ function columnCustom(opts) {
                       }
                     }
                     handleChange(record, col, startIndex);
-                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
+                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, defaultCellEditing);
                   }
                 }
               }
@@ -1767,11 +1766,9 @@ function columnCustom(opts) {
               format: format,
               errors: errors,
               handleCellChange: handleCellChange,
-              handleNextCell: () => {},
               getValues: getValues,
               rowKey: 'rowId',
               control: control,
-              startCell: startCell,
               handleSubmit: handleSubmit,
               onSubmit: onSubmit
             }) : editAble ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent, !isSelecting && !cellEditing && rowRange &&
@@ -1792,7 +1789,7 @@ function columnCustom(opts) {
               }
             }, /*#__PURE__*/_react.default.createElement("span", {
               className: 'dot-point'
-            })), !isEditing && rowError && rowError[col.field]?.field === col.field && /*#__PURE__*/_react.default.createElement("span", {
+            })), !isEditing.editing && rowError && rowError[col.field]?.field === col.field && /*#__PURE__*/_react.default.createElement("span", {
               className: "isValid"
             })) : undefined
           });

package/lib/ali-table/pipeline/features/treeSelect.js

@@ -223,7 +223,12 @@ function treeSelect(opts) {
         // const isChecked = isRowChecked(rowKey, value, treeIndex, checkedStrategy, isDisabled)
         const isChecked = treeDataHelper.isChecked(rowKey);
         if (clickArea !== 'cell') {
-          return {};
+          return {
+            style: {
+              // cursor: 'not-allowed',
+              padding: 0
+            }
+          };
         }
 
         // const disabled = isNodeOrAncestorDisabled(rowKey, treeIndex, isDisabled)
@@ -231,13 +236,15 @@ function treeSelect(opts) {
         if (disabled) {
           return {
             style: {
-              cursor: 'not-allowed'
+              cursor: 'not-allowed',
+              padding: 0
             }
           };
         }
         return (0, _utils2.mergeCellProps)(prevCellProps, {
           style: {
-            cursor: 'pointer'
+            cursor: 'pointer',
+            padding: 0
           },
           onClick(e) {
             if (opts.stopClickEventPropagation) {

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

@@ -537,9 +537,6 @@ export type TableProps<RecordType = AnyObject> = {
      */
     validate?: any;
     onBlur?: (data: RecordType[]) => void;
-    toolbarItemTopRight?: ToolbarItem[];
-    toolbarItemsTop?: ToolbarItem[];
-    toolbarItemsBottom?: ToolbarItem[];
 };
 export type ExpandableConfig<RecordType> = {
     expandedRowKeys?: readonly Key[];