es-grid-template 1.9.49 → 1.9.51

package/es/ali-table/Grid.js

@@ -15,7 +15,6 @@ import ContextMenu from "../table-component/ContextMenu";
 import { TableContext } from "./useContext";
 import { ColumnsChoose } from "./pipeline/features/ColumnsChoose";
 import { StyleTableContainer } from "./base-table/styles";
-// const Grid = (props: GridProps) => {
 const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     id,
@@ -56,7 +55,8 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     loading,
     useVirtual,
     useOuterBorder = true,
-    showHeader = true
+    showHeader = true,
+    gridLines
   } = props;
   const {
     cssVariables
@@ -159,7 +159,11 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyleTableContainer, {
     className: classNames(`${prefix}-grid`, {
       [tableClassNames]: !!tableClassNames,
-      [`${prefix}-grid-theme-dark`]: theme?.theme === 'dark'
+      [`${prefix}-grid-theme-dark`]: theme?.theme === 'dark',
+      [`${prefix}-grid-line-horizontal`]: gridLines === 'Horizontal',
+      [`${prefix}-grid-line-vertical`]: gridLines === 'Vertical',
+      [`${prefix}-grid-line-none`]: gridLines === 'None',
+      [`use-outer-border`]: useOuterBorder
     }),
     style: {
       maxHeight: height ?? 700,
@@ -168,8 +172,8 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
       flexDirection: 'column',
       ...artTableWrapperProps.style
     }
-  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${prefix}-grid-top-toolbar`, {})
+  }, (showToolbar !== false || fullScreen !== false || title || topToolbaritems.length > 0) && /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefix}-grid-top`, {})
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -244,7 +248,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
 
     // estimatedRowHeight={50}
     ,
-    useOuterBorder: useOuterBorder
+    useOuterBorder: false
     // style={{ height: 700, overflow: 'auto' }}
     ,
     style: minHeight ? {
@@ -293,7 +297,9 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     theme: theme,
     footerDataSource: footerDataSource
-  })), bottom, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
+  })), (bottom || pagination && !infiniteScroll) && /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefix}-grid-bottom`, {})
+  }, bottom, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
     pageSizeOptions: pageSizeOptions,
     rootClassName: 'pagination-template',
     showSizeChanger: true,
@@ -320,7 +326,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     },
     responsive: true
-  }))), /*#__PURE__*/React.createElement(Tooltip, {
+  })))), /*#__PURE__*/React.createElement(Tooltip, {
     id: `${id}-tooltip-content`,
     style: {
       zIndex: 1999,

package/es/ali-table/InternalTable.js

@@ -236,6 +236,35 @@ const InternalTable = props => {
         // colorLink: '#eb4619',
       },
       components: {
+        // Input: {
+        //   activeBorderColor: '#1677ff',
+        //   hoverBorderColor: '#1677ff',
+        // },
+        // Button: {
+        //   colorLink: '#eb4619',
+        //   colorLinkHover: '#eb4619'
+        // },
+        TableSelect: {
+          // activeBorderColor: '#1677ff',
+          // hoverBorderColor: '#1677ff',
+          zIndexPopup: 1158
+        },
+        Select: {
+          // activeBorderColor: '#1677ff',
+          // hoverBorderColor: '#1677ff',
+          zIndexPopup: 1158
+          // colorPrimary: '#eb4619',
+          // colorBgBase: 'red'
+        },
+        DatePicker: {
+          // colorPrimary: '#eb4619',
+          // activeBorderColor: '#1677ff',
+          // hoverBorderColor: '#1677ff',
+          zIndexPopup: 1158
+        },
+        // Pagination: {
+        //   fontSize: 12
+        // },
         Dropdown: {
           zIndexPopup: 1158
         },

package/es/ali-table/base-table/styles.d.ts

@@ -2,9 +2,13 @@
 export declare const LOCK_SHADOW_PADDING = 20;
 export declare const Classes: {
     /** Outer wrapper div for BaseTable component */
-    readonly artTableWrapper: "ui-rc-grid-table-wrapper";
+    readonly tableWrapper: "ui-rc-grid-table-wrapper";
     readonly tableThemeDark: "ui-rc-grid-theme-dark";
     readonly artTable: "ui-rc-grid-table";
+    readonly tableTop: "ui-rc-grid-top";
+    readonly gridHorizontal: "ui-rc-grid-line-horizontal";
+    readonly gridVertical: "ui-rc-grid-line-vertical";
+    readonly gridNone: "ui-rc-grid-line-none";
     readonly tableHeader: "ui-rc-grid-table-header";
     readonly tableBody: "ui-rc-grid-table-body";
     readonly tableFooter: "ui-rc-grid-table-footer";

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

@@ -3,9 +3,18 @@ export const LOCK_SHADOW_PADDING = 20;
 const prefix = 'ui-rc-grid-';
 export const Classes = {
   /** Outer wrapper div for BaseTable component */
-  artTableWrapper: `${prefix}table-wrapper`,
+  tableWrapper: `${prefix}table-wrapper`,
   tableThemeDark: `${prefix}theme-dark`,
   artTable: `${prefix}table`,
+  tableTop: `${prefix}top`,
+  // toolbar_top + title
+  gridHorizontal: `${prefix}line-horizontal`,
+  // line-horizontal
+  gridVertical: `${prefix}line-vertical`,
+  // line-vertical
+  gridNone: `${prefix}line-none`,
+  // line-vertical
+
   tableHeader: `${prefix}table-header`,
   tableBody: `${prefix}table-body`,
   tableFooter: `${prefix}table-footer`,
@@ -45,11 +54,11 @@ const Z = {
   scrollItem: 30,
   loadingIndicator: 40
 };
-const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}&.has-footer tfoot tr td{&.", "{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;}}&:not(.has-footer) tbody tr.last td{border-bottom:none;}"], Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight);
+const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);.", "{border-left:0;border-right:0;border-top:0;}td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}.has-footer tfoot tr.last td{}.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}.has-footer tfoot tr td{background:var(--footer-bgcolor);&.", "{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;}}:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{border-top:var(--cell-border-vertical);}&.", "{&:has(.", ") thead tr.first th{border-top:0;}}"], Classes.tableWrapper, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableTop, Classes.gridNone, Classes.tableTop);
 export const StyledArtTableWrapper = styled.div.withConfig({
   displayName: "StyledArtTableWrapper",
   componentId: "es-grid-template__sc-ipj1ht-0"
-})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-bgcolor,#f5f5f5);--hover-color:var(--hover-color,#333);--highlight-bgcolor:#eee;--header-row-height:36px;--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;--cell-border:1px solid var(--border-color);--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;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{width:8px;height:8px;}&::-webkit-scrollbar-track{background:var(--bgcolor);}&::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:8px;}&::-webkit-scrollbar-thumb:hover{background:#555;}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{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{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}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);}tr.first th{border-top:var(--header-cell-border-horizontal);}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);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top: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:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, 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, 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{width:8px;height:8px;}&::-webkit-scrollbar-track{background:var(--bgcolor);}&::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:8px;}&::-webkit-scrollbar-thumb:hover{background:#555;}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border:var(--cell-border-vertical);&.has-footer{.", "{td{}}}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{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{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}td.first{&.lock-left{border-bottom-width:1px;}}}}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);}tr.first th{}th.first{}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);}td.first{}tr.first td{border-top: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{display:flex;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.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, 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 = {
 
@@ -58,4 +67,4 @@ export const StyledArtTableWrapper = styled.div.withConfig({
 export const StyleTableContainer = styled.div.withConfig({
   displayName: "StyleTableContainer",
   componentId: "es-grid-template__sc-ipj1ht-1"
-})(["--color:#333;--bgcolor:white;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--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;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-inline:1px solid var(--border-color);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;}}}}&.", "{&.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, Classes.tableThemeDark);
+})(["--row-height:38px;--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:36px;--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;--cell-border:1px solid var(--border-color);--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{}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.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{}}}&.", "{.", "{border-top:0;td,th{border-bottom: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.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-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;}}}}&.", "{&.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);

package/es/ali-table/base-table/table.js

@@ -350,7 +350,7 @@ export class BaseTable extends React.Component {
       footerDataSource,
       components
     } = this.props;
-    const artTableWrapperClassName = cx(Classes.artTableWrapper, {
+    const artTableWrapperClassName = cx(Classes.tableWrapper, {
       'use-outer-border': useOuterBorder,
       empty: dataSource.length === 0,
       lock: info.hasLockColumn,

package/es/ali-table/utils/selected.js

@@ -402,7 +402,6 @@ export function isRowChecked(key, selectedKeys, treeIndex, checkedStrategy, isDi
   // =========================
   if (checkedStrategy === 'parent') {
     // node disable => chỉ true nếu explicit chọn
-    // console.log('isDisabled', isDisabled)
     if (isDisabled) {
       const abc = selectedKeys.has(key);
       return abc;

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

@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/TableContainerEdit.js

@@ -416,11 +416,14 @@ const TableContainerEdit = props => {
               }
             } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
               const isDate = isDateValue(cellValue.trim());
-              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
-              const cellFormat = getFormat(colFormat, format);
-              const editType = getEditType(columnOri);
-              const dateFormat = getDatepickerFormat(editType, cellFormat);
-              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+
+              // const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format
+              // const cellFormat = getFormat(colFormat, format)
+              // const editType = getEditType(columnOri as any)
+              // const dateFormat = getDatepickerFormat(editType, cellFormat)
+              // const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat, true).format() : null
+
+              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim()).format() : null;
               newData[targetRow] = {
                 ...newData[targetRow],
                 [columnKey]: date
@@ -600,6 +603,8 @@ const TableContainerEdit = props => {
       handlePasted(rowsPasted);
     }
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
+
+  // Copy
   React.useEffect(() => {
     const handleKeyDown = e => {
       if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
@@ -610,6 +615,8 @@ const TableContainerEdit = props => {
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
+
+  // Paste
   React.useEffect(() => {
     const handlePaste = e => {
       if (startCell && !editingKey) {

package/es/table-component/body/EditableCell.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import type { EditType } from "rc-master-ui";
 import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { Column } from "@tanstack/react-table";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;
     dataIndex: string;
@@ -11,6 +12,8 @@ interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement>
     indexRow: number;
     indexCol: number;
     cellEditing?: any;
+    visibleColumns?: Column<DataType>[];
+    handleNextCell?: () => void;
 }
 declare const EditableCell: <T>(props: EditableCellProps<T>) => JSX.Element;
 export default EditableCell;

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

@@ -43,7 +43,9 @@ const EditableCell = props => {
     // children,
     column,
     indexRow,
-    indexCol
+    indexCol,
+    // visibleColumns,
+    handleNextCell
     // cellEditing,
     // ...restProps
   } = props;
@@ -61,8 +63,7 @@ const EditableCell = props => {
   } = useContext(TableContext);
   const datePickerRef = React.useRef(null);
   const dateTimePickerRef = React.useRef(null);
-  // const timePickerRef = React.useRef(null);
-
+  const timePickerRef = React.useRef(null);
   const colFormat = typeof column?.format === 'function' ? column?.format(record) : column?.format;
   const cellFormat = getFormat(colFormat, format);
   const inputNode = (value, onChange) => {
@@ -99,7 +100,24 @@ const EditableCell = props => {
     const options = validateOption ? validateOption(record, column.field) : selectOptions ?? [];
     const optionsTree = validateOption ? convertArrayWithIndent(validateOption(record, column.field)) : selectOptions ? convertArrayWithIndent(selectOptions) : [];
 
-    // const currt = flatColumns2()
+    // const focusToken = (token: FormatToken, fmt: string) => {
+    //   const input: HTMLInputElement | null =
+    //     timePickerRef.current?.nativeElement?.querySelector('input') ??
+    //     timePickerRef.current?.input;
+
+    //   if (!input) return;
+
+    //   const start = fmt.indexOf(token);
+    //   if (start === -1) return;
+
+    //   input.focus();
+
+    //   input.setSelectionRange(start, start + token.length - 1);
+
+    //   requestAnimationFrame(() => {
+    //     input.setSelectionRange(start, start + token.length);
+    //   });
+    // };
 
     switch (editType) {
       case 'date':
@@ -324,6 +342,7 @@ const EditableCell = props => {
         const maxTime = maxTimeValue ? dayjs(maxTimeValue, timeFormat) : undefined;
         const minTime = minTimeValue ? dayjs(minTimeValue, timeFormat) : undefined;
         return /*#__PURE__*/React.createElement(TimePicker, {
+          ref: timePickerRef,
           format: {
             format: timeFormat,
             type: 'mask'
@@ -344,8 +363,79 @@ const EditableCell = props => {
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId,
-          onChange: (newDate, dateString) => {
+          defaultOpen: column.field === startCell?.colId
+
+          // onChange={(newDate, dateString) => {
+
+          //   if (typeTime === 'time') {
+
+          //     onChange(dateString)
+
+          //   } else {
+
+          //     // const datetime = dayjs(dateString as string, timeFormat, true);
+
+          //     const newVal =  newDate ? moment(newDate.toDate()).format() : undefined
+
+          //     // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
+          //     onChange(newVal)
+
+          //   }
+
+          //   setTimeout(() => {
+          //     // @ts-ignore
+          //     dateTimePickerRef.current?.focus()
+          //   }, 0)
+
+          // }}
+
+          // onBlur={() => {
+          //   const formState = getValues()
+          //   const itemState = getValues(dataIndex)
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+          //   const newState = itemState
+
+          //   let newValue = newState
+
+          //   if (typeTime === 'time') {
+
+          //     newValue = newState
+
+          //   } else {
+
+          //     const datetime = dayjs(newState as string, timeFormat, true);
+
+          //     const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : undefined
+          //     onChange(newVal)
+
+          //     newValue = newVal
+
+          //   }
+
+          //   if (prevState !== newState) {
+          //     handleCellChange?.({
+          //       key: key as any,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState: newValue,
+          //       option: newValue,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+          //   }
+          // }}
+
+          //  needConfirm={false}
+          ,
+
+          onCalendarChange: (newDate, dateString) => {
+            // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+
+            // onChange(newDateValue)
+
             if (typeTime === 'time') {
               onChange(dateString);
             } else {
@@ -358,38 +448,34 @@ const EditableCell = props => {
             }
             setTimeout(() => {
               // @ts-ignore
-              dateTimePickerRef.current?.focus();
-            }, 0);
+              timePickerRef.current?.focus();
+            });
           },
-          onBlur: () => {
-            console.log('22222222222');
-            const formState = getValues();
-            const itemState = getValues(dataIndex);
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = itemState;
-            let newValue = newState;
-            if (typeTime === 'time') {
-              newValue = newState;
-            } else {
-              const datetime = dayjs(newState, timeFormat, true);
-              const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : undefined;
-              onChange(newVal);
-              newValue = newVal;
+          onOpenChange: open => {
+            if (!open) {
+              const formState = getValues();
+              const itemState = getValues(dataIndex);
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = itemState;
+              if (prevState !== newState) {
+                handleCellChange?.({
+                  key: key,
+                  field: column.field ?? column.field,
+                  record: formState,
+                  prevState,
+                  newState,
+                  option: newState,
+                  indexCol,
+                  indexRow,
+                  type: 'blur'
+                });
+              }
             }
-            console.log('newValue', newValue);
-            if (prevState !== newState) {
-              handleCellChange?.({
-                key: key,
-                field: column.field ?? column.field,
-                record: formState,
-                prevState,
-                newState: newValue,
-                option: newValue,
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
+          },
+          onKeyDown: e => {
+            if (e?.code === "Tab") {
+              handleNextCell?.();
             }
           }
         });

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

@@ -1,6 +1,6 @@
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getEditType, getFormat, getNextEditableColumn, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
@@ -232,6 +232,7 @@ const TableBodyCellEdit = props => {
     format
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
+  const visibleColumns = table.getVisibleLeafColumns();
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
@@ -309,7 +310,9 @@ const TableBodyCellEdit = props => {
     }
   }, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
   const triggerDragPaste = (pasteState, ctrlKey) => {
-    const tmpCols = table.getVisibleLeafColumns();
+    const tmpCols = {
+      ...visibleColumns
+    };
     const rowPasteIds = getRowIdsBetween(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
     const colPasteds = getColIdsBetween(table, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
     const rowSelectIds = getRowIdsBetween(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
@@ -383,7 +386,9 @@ const TableBodyCellEdit = props => {
     setRangePasteState?.(undefined);
   };
   const triggerPointPaste = (pasteState, cellStart, cellEnd, ctrlKey) => {
-    const tmpCols = table.getVisibleLeafColumns();
+    const tmpCols = {
+      ...visibleColumns
+    };
     const rowPasteIds = getRowIdsBetween(table, cellStart?.rowId ?? '', cellEnd?.rowId ?? '');
     const colPasteds = getColIdsBetween(table, cellStart?.colId ?? '', cellEnd?.colId ?? '');
     const rowSelectIds = getRowIdsBetween(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
@@ -584,7 +589,9 @@ const TableBodyCellEdit = props => {
   function handleKeyDown(e, rowId, colId) {
     if (e.key === 'Tab') {
       e.preventDefault();
-      const allCols = table.getVisibleLeafColumns();
+      const allCols = {
+        ...visibleColumns
+      };
       const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
       const nextCol = allCols[currentColIndex + 1];
       if (nextCol) {
@@ -648,7 +655,7 @@ const TableBodyCellEdit = props => {
     if (e.key === 'ArrowRight') {
       e.preventDefault();
       e.stopPropagation();
-      const allCols = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
+      const allCols = visibleColumns.filter(it => !nonActionColumn.includes(it.id));
       const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
       const nextCol = allCols[currentColIndex + 1];
       if (nextCol) {
@@ -679,7 +686,7 @@ const TableBodyCellEdit = props => {
     }
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
-      const allCols = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
+      const allCols = visibleColumns.filter(it => !nonActionColumn.includes(it.id));
 
       // const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
       const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
@@ -827,7 +834,7 @@ const TableBodyCellEdit = props => {
   }
   const handleMouseDownIndex = rowId => {
     setIsSelecting?.(true);
-    const allColumns = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
+    const allColumns = visibleColumns.filter(it => !nonActionColumn.includes(it.id));
     const firstCOlSpin = findFirst(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
@@ -861,7 +868,7 @@ const TableBodyCellEdit = props => {
   };
   const handleMouseEnterIndex = rowId => {
     if (isSelecting) {
-      const allColumns = table.getVisibleLeafColumns().filter(it => !nonActionColumn.includes(it.id));
+      const allColumns = visibleColumns.filter(it => !nonActionColumn.includes(it.id));
 
       // const firstCOl = findFirst(allColumns)
 
@@ -1111,6 +1118,58 @@ const TableBodyCellEdit = props => {
       }, 100);
     }
   };
+  const handleNextCell = () => {
+    const allCols = visibleColumns;
+
+    // const colId = cell.column.id
+    const rowId = cell.row.id;
+
+    // const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
+    // const currentColIndex = indexCol;
+
+    const isNextCol = allCols[colIndex + 1];
+    const nextCol = getNextEditableColumn(visibleColumns, colIndex, record);
+    if (isNextCol && nextCol) {
+      setFocusedCell?.({
+        rowId,
+        colId: nextCol.id
+      });
+      setStartCell?.({
+        rowId,
+        colId: nextCol.id
+      });
+      setEndCell?.({
+        rowId,
+        colId: nextCol.id
+      });
+      setRangeState?.(getSelectedCellMatrix(table, {
+        rowId,
+        colId: nextCol.id
+      }, {
+        rowId,
+        colId: nextCol.id
+      }));
+      columnVirtualizer.scrollToIndex(nextCol.getIndex(), {
+        align: 'center'
+      });
+      const nextItem = document.querySelector(`.ui-rc-grid-row .cell-editing[data-row-key="${rowId}"].cell-editing[data-col-key="${nextCol.id}"] input`);
+
+      // const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] input`) as HTMLInputElement
+      // const textarea = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowNumber}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] textarea`) as any
+
+      const textarea = document.querySelector(`.ui-rc-grid-row .cell-editing[data-row-key="${rowId}"].cell-editing[data-col-key="${nextCol.id}"] textarea`);
+      setTimeout(() => {
+        if (textarea) {
+          textarea.focus();
+          textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+          return;
+        }
+        if (nextItem) {
+          nextItem.focus();
+        }
+      });
+    }
+  };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
   const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
@@ -1246,7 +1305,9 @@ const TableBodyCellEdit = props => {
     editType: getEditType(cell.column.columnDef.meta, record),
     indexCol: cell.column.getIndex(),
     indexRow: cell.row.index,
-    record: record
+    record: record,
+    visibleColumns: visibleColumns,
+    handleNextCell: handleNextCell
     // rowKey={rowKey}
   }) : /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {