es-grid-template 1.9.48 → 1.9.50

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" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     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" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     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/InternalTable.js

@@ -9,7 +9,7 @@ import "./style.scss";
 import { faker } from '@faker-js/faker';
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import Grid from "./table/Grid";
-import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
+import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, getTreeDepth, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
 import { removeInvisibleColumns } from "../grid-component/hooks";
@@ -95,16 +95,32 @@ const InternalTable = props => {
     }
     return addRowIdArray(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const depthData = React.useMemo(() => {
+    return getTreeDepth(convertData);
+  }, [convertData]);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const flatColumns = React.useMemo(() => {
+    return flatColumns2(propsColumns);
+  }, [propsColumns]);
+  const visibleColumns = React.useMemo(() => {
+    return flatColumns.filter(it => it.visible !== false);
+  }, [flatColumns]);
+  const expandColumn = React.useMemo(() => {
+    return visibleColumns[expandIconColumnIndex];
+  }, [expandIconColumnIndex, visibleColumns]);
   const mergedColumns = React.useMemo(() => {
     return convertToTanStackColumns({
       t,
       columns,
       format,
-      editAble
+      editAble,
+      depthData,
+      expandable,
+      expandColumn
     });
 
     // return convertToTanStackColumns<RecordType>(columns)
-  }, [t, columns, format, editAble]);
+  }, [t, columns, format, editAble, expandable, depthData, expandColumn]);
   const isDataTree = React.useMemo(() => {
     return isTreeArray(dataSource);
   }, [dataSource]);

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

@@ -43,6 +43,7 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     columnSizingInfo: ColumnSizingInfoState;
     columnSizing: ColumnSizingState;
+    maxDepth?: number;
 };
 declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => JSX.Element;
 export default TableContainer;

package/es/table-component/TableContainer.js

@@ -78,6 +78,7 @@ const TableContainer = props => {
     setIsExpandClick,
     recordClick,
     striped = true,
+    maxDepth,
     ...rest
   } = props;
   const [paginationLocal] = useLocale('Pagination');
@@ -339,7 +340,8 @@ const TableContainer = props => {
       pagination,
       dataSourceFilter,
       onExpandClick,
-      setIsExpandClick
+      setIsExpandClick,
+      maxDepth
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
     contextMenuItems: contextMenuItems,

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

@@ -356,13 +356,13 @@ const EditableCell = props => {
               // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
               onChange(newVal);
             }
-            onChange(dateString);
             setTimeout(() => {
               // @ts-ignore
               dateTimePickerRef.current?.focus();
             }, 0);
           },
           onBlur: () => {
+            console.log('22222222222');
             const formState = getValues();
             const itemState = getValues(dataIndex);
             // @ts-ignore
@@ -377,6 +377,7 @@ const EditableCell = props => {
               onChange(newVal);
               newValue = newVal;
             }
+            console.log('newValue', newValue);
             if (prevState !== newState) {
               handleCellChange?.({
                 key: key,

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

@@ -232,7 +232,7 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center' && cell.column.getIndex() !== expandIconColumnIndex,
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {

package/es/table-component/hook/useColumns.d.ts

@@ -1,13 +1,16 @@
 import type { Dispatch, SetStateAction } from "react";
-import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
+import type { ColumnsTable, ColumnTable, ExpandableConfig, IFormat, SelectionSettings } from '../../grid-component/type';
 import type { Cell, ColumnDef } from '@tanstack/react-table';
 export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
 export declare const getValueCellString: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat) => any;
-export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
+export declare function convertToTanStackColumns<T>({ t, columns, format, editAble, depthData, expandColumn }: {
     t?: any;
     columns: ColumnsTable<T>;
+    expandable?: ExpandableConfig<T>;
     format?: IFormat;
     editAble?: boolean;
+    depthData?: number;
+    expandColumn?: ColumnTable;
 }): ColumnDef<T, any>[];
 export type ToggleRow<T> = {
     e: any;

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

@@ -141,10 +141,11 @@ export function convertToTanStackColumns({
   // setExpanded,
   // expandable,
   format,
-  editAble
+  editAble,
+  depthData,
+  // expandable,
+  expandColumn
 }) {
-  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
-
   return sortByType(columns).map(col => {
     const {
       headerText,
@@ -202,7 +203,7 @@ export function convertToTanStackColumns({
       // enableHiding: false,
       // enableResizing: true,
       id: field,
-      size: width,
+      size: expandColumn?.field === col.field ? (width ?? 0) + (depthData ?? 0) * 25 : width,
       accessorKey: field,
       sortDescFirst: false,
       minSize: minWidth,
@@ -219,7 +220,9 @@ export function convertToTanStackColumns({
         columns: children,
         editAble,
         format,
-        t
+        t,
+        depthData,
+        expandColumn
       });
     }
     const meta = {

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

@@ -166,3 +166,4 @@ export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string
 export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
 export declare function sumFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
 export declare function sumNumberFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
+export declare const getTreeDepth: (rows: any[]) => number;

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

@@ -2714,4 +2714,8 @@ export function sumNumberFields(columns, data, childrenKey = 'children') {
     }
   }
   return result;
-}
+}
+export const getTreeDepth = rows => {
+  if (!rows?.length) return 0;
+  return 1 + Math.max(0, ...rows.map(r => getTreeDepth(r.children)));
+};

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

@@ -93,6 +93,7 @@ export interface IContext<T> {
         rowData: any;
     }) => void;
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
+    maxDepth?: number;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/lib/ali-table/Grid.js

@@ -25,7 +25,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import type { TableProps } from "../table-component"
 
-// const Grid = (props: GridProps) => {
 const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     id,
@@ -66,7 +65,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     loading,
     useVirtual,
     useOuterBorder = true,
-    showHeader = true
+    showHeader = true,
+    gridLines
   } = props;
   const {
     cssVariables
@@ -169,7 +169,11 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.StyleTableContainer, {
     className: (0, _classnames.default)(`${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,
@@ -178,8 +182,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       flexDirection: 'column',
       ...artTableWrapperProps.style
     }
-  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
+  }, (showToolbar !== false || fullScreen !== false || title || topToolbaritems.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${prefix}-grid-top`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -254,7 +258,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
     // estimatedRowHeight={50}
     ,
-    useOuterBorder: useOuterBorder
+    useOuterBorder: false
     // style={{ height: 700, overflow: 'auto' }}
     ,
     style: minHeight ? {
@@ -303,7 +307,9 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     },
     theme: theme,
     footerDataSource: footerDataSource
-  })), bottom, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
+  })), (bottom || pagination && !infiniteScroll) && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${prefix}-grid-bottom`, {})
+  }, bottom, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
     pageSizeOptions: _hooks.pageSizeOptions,
     rootClassName: 'pagination-template',
     showSizeChanger: true,
@@ -330,7 +336,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       }
     },
     responsive: true
-  }))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+  })))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
     id: `${id}-tooltip-content`,
     style: {
       zIndex: 1999,

package/lib/ali-table/InternalTable.js

@@ -243,6 +243,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/lib/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/lib/ali-table/base-table/styles.js

@@ -11,9 +11,18 @@ const LOCK_SHADOW_PADDING = exports.LOCK_SHADOW_PADDING = 20;
 const prefix = 'ui-rc-grid-';
 const Classes = exports.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`,
@@ -53,11 +62,11 @@ const Z = {
   scrollItem: 30,
   loadingIndicator: 40
 };
-const outerBorderStyleMixin = (0, _styledComponents.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 = (0, _styledComponents.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);
 const StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.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 = {
 
@@ -66,4 +75,4 @@ const StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.
 const StyleTableContainer = exports.StyleTableContainer = _styledComponents.default.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/lib/ali-table/base-table/table.js

@@ -357,7 +357,7 @@ class BaseTable extends _react.default.Component {
       footerDataSource,
       components
     } = this.props;
-    const artTableWrapperClassName = (0, _classnames.default)(_styles.Classes.artTableWrapper, {
+    const artTableWrapperClassName = (0, _classnames.default)(_styles.Classes.tableWrapper, {
       'use-outer-border': useOuterBorder,
       empty: dataSource.length === 0,
       lock: info.hasLockColumn,

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

@@ -433,7 +433,6 @@ function isRowChecked(key, selectedKeys, treeIndex, checkedStrategy, isDisabledF
   // =========================
   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/lib/table-component/InternalTable.js

@@ -104,16 +104,32 @@ const InternalTable = props => {
     }
     return (0, _utils.addRowIdArray)(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const depthData = _react.default.useMemo(() => {
+    return (0, _utils.getTreeDepth)(convertData);
+  }, [convertData]);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const flatColumns = _react.default.useMemo(() => {
+    return (0, _utils.flatColumns2)(propsColumns);
+  }, [propsColumns]);
+  const visibleColumns = _react.default.useMemo(() => {
+    return flatColumns.filter(it => it.visible !== false);
+  }, [flatColumns]);
+  const expandColumn = _react.default.useMemo(() => {
+    return visibleColumns[expandIconColumnIndex];
+  }, [expandIconColumnIndex, visibleColumns]);
   const mergedColumns = _react.default.useMemo(() => {
     return (0, _useColumns.convertToTanStackColumns)({
       t,
       columns,
       format,
-      editAble
+      editAble,
+      depthData,
+      expandable,
+      expandColumn
     });
 
     // return convertToTanStackColumns<RecordType>(columns)
-  }, [t, columns, format, editAble]);
+  }, [t, columns, format, editAble, expandable, depthData, expandColumn]);
   const isDataTree = _react.default.useMemo(() => {
     return (0, _utils.isTreeArray)(dataSource);
   }, [dataSource]);

package/lib/table-component/TableContainer.d.ts

@@ -43,6 +43,7 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     columnSizingInfo: ColumnSizingInfoState;
     columnSizing: ColumnSizingState;
+    maxDepth?: number;
 };
 declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => JSX.Element;
 export default TableContainer;

package/lib/table-component/TableContainer.js

@@ -85,6 +85,7 @@ const TableContainer = props => {
     setIsExpandClick,
     recordClick,
     striped = true,
+    maxDepth,
     ...rest
   } = props;
   const [paginationLocal] = (0, _locale.useLocale)('Pagination');
@@ -346,7 +347,8 @@ const TableContainer = props => {
       pagination,
       dataSourceFilter,
       onExpandClick,
-      setIsExpandClick
+      setIsExpandClick,
+      maxDepth
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
     contextMenuItems: contextMenuItems,

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

@@ -364,13 +364,13 @@ const EditableCell = props => {
               // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
               onChange(newVal);
             }
-            onChange(dateString);
             setTimeout(() => {
               // @ts-ignore
               dateTimePickerRef.current?.focus();
             }, 0);
           },
           onBlur: () => {
+            console.log('22222222222');
             const formState = getValues();
             const itemState = getValues(dataIndex);
             // @ts-ignore
@@ -385,6 +385,7 @@ const EditableCell = props => {
               onChange(newVal);
               newValue = newVal;
             }
+            console.log('newValue', newValue);
             if (prevState !== newState) {
               handleCellChange?.({
                 key: key,

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

@@ -239,7 +239,7 @@ const TableBodyCell = props => {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center' && cell.column.getIndex() !== expandIconColumnIndex,
         [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {

package/lib/table-component/hook/useColumns.d.ts

@@ -1,13 +1,16 @@
 import type { Dispatch, SetStateAction } from "react";
-import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
+import type { ColumnsTable, ColumnTable, ExpandableConfig, IFormat, SelectionSettings } from '../../grid-component/type';
 import type { Cell, ColumnDef } from '@tanstack/react-table';
 export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
 export declare const getValueCellString: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat) => any;
-export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
+export declare function convertToTanStackColumns<T>({ t, columns, format, editAble, depthData, expandColumn }: {
     t?: any;
     columns: ColumnsTable<T>;
+    expandable?: ExpandableConfig<T>;
     format?: IFormat;
     editAble?: boolean;
+    depthData?: number;
+    expandColumn?: ColumnTable;
 }): ColumnDef<T, any>[];
 export type ToggleRow<T> = {
     e: any;

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

@@ -153,10 +153,11 @@ function convertToTanStackColumns({
   // setExpanded,
   // expandable,
   format,
-  editAble
+  editAble,
+  depthData,
+  // expandable,
+  expandColumn
 }) {
-  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
-
   return (0, _utils.sortByType)(columns).map(col => {
     const {
       headerText,
@@ -214,7 +215,7 @@ function convertToTanStackColumns({
       // enableHiding: false,
       // enableResizing: true,
       id: field,
-      size: width,
+      size: expandColumn?.field === col.field ? (width ?? 0) + (depthData ?? 0) * 25 : width,
       accessorKey: field,
       sortDescFirst: false,
       minSize: minWidth,
@@ -231,7 +232,9 @@ function convertToTanStackColumns({
         columns: children,
         editAble,
         format,
-        t
+        t,
+        depthData,
+        expandColumn
       });
     }
     const meta = {

package/lib/table-component/hook/utils.d.ts

@@ -166,3 +166,4 @@ export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string
 export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
 export declare function sumFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
 export declare function sumNumberFields(columns: ColumnTable[], data: any[], childrenKey?: string): any;
+export declare const getTreeDepth: (rows: any[]) => number;

package/lib/table-component/hook/utils.js

@@ -41,7 +41,7 @@ exports.getHiddenParentKeys1 = getHiddenParentKeys1;
 exports.getInvisibleColumns = getInvisibleColumns;
 exports.getNewItemsOnly = exports.getLastSelectCell = void 0;
 exports.getRowIdsBetween = getRowIdsBetween;
-exports.getVisibleColumnKeys1 = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTableHeight = exports.getSelectedCellMatrix = void 0;
+exports.getVisibleColumnKeys1 = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTreeDepth = exports.getTableHeight = exports.getSelectedCellMatrix = void 0;
 exports.getVisibleFields = getVisibleFields;
 exports.groupArrayByColumns = groupArrayByColumns;
 exports.isColor = void 0;
@@ -2848,4 +2848,9 @@ function sumNumberFields(columns, data, childrenKey = 'children') {
     }
   }
   return result;
-}
+}
+const getTreeDepth = rows => {
+  if (!rows?.length) return 0;
+  return 1 + Math.max(0, ...rows.map(r => getTreeDepth(r.children)));
+};
+exports.getTreeDepth = getTreeDepth;

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

@@ -93,6 +93,7 @@ export interface IContext<T> {
         rowData: any;
     }) => void;
     setIsExpandClick: Dispatch<SetStateAction<boolean>>;
+    maxDepth?: number;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.48",
+  "version": "1.9.50",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -57,7 +57,7 @@
     "@vitest/coverage-v8": "2.0.5",
     "antd": "5.24.1",
     "antd-style": "3.7.1",
-    "becoxy-icons": "2.0.1",
+    "becoxy-icons": "^2.1.1",
     "classnames": "2.3.1",
     "dayjs": "^1.11.13",
     "lodash": "4.17.21",