es-grid-template 1.9.47 → 1.9.49

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" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    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">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    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">);
     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');
@@ -239,12 +240,12 @@ const TableContainer = props => {
       alignItems: 'center',
       gap: '1rem'
     }
-  }, toolbarItemTop && toolbarItemTop?.length > 0 && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Toolbar, {
+  }, toolbarItemTop && toolbarItemTop?.length > 0 && /*#__PURE__*/React.createElement(Toolbar, {
     items: toolbarItemTop ?? []
     // mode={'scroll'}
     ,
@@ -339,7 +340,8 @@ const TableContainer = props => {
       pagination,
       dataSourceFilter,
       onExpandClick,
-      setIsExpandClick
+      setIsExpandClick,
+      maxDepth
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
     contextMenuItems: contextMenuItems,
@@ -367,7 +369,7 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
-  }, toolbarItemBottom && toolbarItemBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
+  }, toolbarItemBottom && toolbarItemBottom.length > 0 && false && /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'

package/es/table-component/TableContainerEdit.js

@@ -2041,12 +2041,12 @@ const TableContainerEdit = props => {
       alignItems: 'center',
       gap: '1rem'
     }
-  }, toolbarItemsTop && toolbarItemsTop.length > 0 && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, toolbarItemsTop && toolbarItemsTop.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc-toolbar-bottom border-0', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
     })

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/style.js

@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/es/table-component/style.scss

@@ -627,91 +627,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
   }
 
 
-
-  // bottom toolbar
-  .ui-rc-toolbar-bottom {
-    // border-bottom: 1px solid #e0e0e0;
-    border-right: 1px solid #e0e0e0;
-    border-left: 1px solid #e0e0e0;
-
-    .be-toolbar-item {
-      .ui-rc-btn {
-        font-size: 12px;
-      }
-
-      .toolbar-dropdown-button {
-        font-size: 12px;
-
-        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item {
-          border-color: #28c76f;
-        }
-
-        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item {
-          border-color: #28c76f;
-
-          .ui-rc-btn-icon {
-            color: #28c76f;
-          }
-        }
-      }
-
-    }
-  }
-
-  .ui-rc-toolbar-bottom_border-bottom {
-    border-bottom: 1px solid #e0e0e0;
-  }
-
-  .ui-rc-toolbar-bottom {
-    position: relative;
-    padding: .15rem 0.5rem;
-    background-color: #ffffff;
-
-    // &::before {
-    //   content: "";
-    //   position: absolute;
-    //   border-left: 1px solid #e0e0e0;
-    //   height: 100%;
-    //   bottom: 0;
-    //   left: 0;
-    //   //z-index: -1;
-    // }
-
-    // &::after {
-    //   content: "";
-    //   position: absolute;
-    //   border-left: 1px solid #e0e0e0;
-    //   height: 100%;
-    //   bottom: 0;
-    //   visibility: visible;
-    //   right: 0;
-    //   //z-index: -1;
-    // }
-
-    .toolbar-button {
-      border-radius: 3px;
-
-
-
-    }
-
-    .ui-rc-btn {
-      border-radius: 3px;
-      height: 28px;
-
-      &.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item {
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
-      }
-
-      &.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item {
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
-      }
-
-    }
-  }
-
   .spinner-loading {
     position: absolute;
     top: 0;
@@ -800,7 +715,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 //   margin: 1rem auto;
 // }
 
-
+// ------------ expand icon -------------------- //
 .ui-rc-table-row-expand {
   color: inherit;
   text-decoration: none;
@@ -887,7 +802,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 .ui-rc-table-row-expand-icon-collapsed::before {
   transform: rotate(-180deg);
 }
-
+// ------------ expand icon end -------------------- //
 
 .#{$prefix}-grid-filter-dropdown {
   box-sizing: border-box;

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/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, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     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/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');
@@ -246,12 +247,12 @@ const TableContainer = props => {
       alignItems: 'center',
       gap: '1rem'
     }
-  }, toolbarItemTop && toolbarItemTop?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, toolbarItemTop && toolbarItemTop?.length > 0 && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: toolbarItemTop ?? []
     // mode={'scroll'}
     ,
@@ -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,
@@ -374,7 +376,7 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
-  }, toolbarItemBottom && toolbarItemBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, toolbarItemBottom && toolbarItemBottom.length > 0 && false && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'

package/lib/table-component/TableContainerEdit.js

@@ -2042,12 +2042,12 @@ const TableContainerEdit = props => {
       alignItems: 'center',
       gap: '1rem'
     }
-  }, toolbarItemsTop && toolbarItemsTop.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, toolbarItemsTop && toolbarItemsTop.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc-toolbar-bottom border-0', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
     })

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/style.js

@@ -55,4 +55,4 @@ const colorDark = '#e6e4f3e6 ';
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/lib/table-component/style.scss

@@ -627,91 +627,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
   }
 
 
-
-  // bottom toolbar
-  .ui-rc-toolbar-bottom {
-    // border-bottom: 1px solid #e0e0e0;
-    border-right: 1px solid #e0e0e0;
-    border-left: 1px solid #e0e0e0;
-
-    .be-toolbar-item {
-      .ui-rc-btn {
-        font-size: 12px;
-      }
-
-      .toolbar-dropdown-button {
-        font-size: 12px;
-
-        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item {
-          border-color: #28c76f;
-        }
-
-        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item {
-          border-color: #28c76f;
-
-          .ui-rc-btn-icon {
-            color: #28c76f;
-          }
-        }
-      }
-
-    }
-  }
-
-  .ui-rc-toolbar-bottom_border-bottom {
-    border-bottom: 1px solid #e0e0e0;
-  }
-
-  .ui-rc-toolbar-bottom {
-    position: relative;
-    padding: .15rem 0.5rem;
-    background-color: #ffffff;
-
-    // &::before {
-    //   content: "";
-    //   position: absolute;
-    //   border-left: 1px solid #e0e0e0;
-    //   height: 100%;
-    //   bottom: 0;
-    //   left: 0;
-    //   //z-index: -1;
-    // }
-
-    // &::after {
-    //   content: "";
-    //   position: absolute;
-    //   border-left: 1px solid #e0e0e0;
-    //   height: 100%;
-    //   bottom: 0;
-    //   visibility: visible;
-    //   right: 0;
-    //   //z-index: -1;
-    // }
-
-    .toolbar-button {
-      border-radius: 3px;
-
-
-
-    }
-
-    .ui-rc-btn {
-      border-radius: 3px;
-      height: 28px;
-
-      &.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item {
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
-      }
-
-      &.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item {
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
-      }
-
-    }
-  }
-
   .spinner-loading {
     position: absolute;
     top: 0;
@@ -800,7 +715,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 //   margin: 1rem auto;
 // }
 
-
+// ------------ expand icon -------------------- //
 .ui-rc-table-row-expand {
   color: inherit;
   text-decoration: none;
@@ -887,7 +802,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 .ui-rc-table-row-expand-icon-collapsed::before {
   transform: rotate(-180deg);
 }
-
+// ------------ expand icon end -------------------- //
 
 .#{$prefix}-grid-filter-dropdown {
   box-sizing: border-box;

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.47",
+  "version": "1.9.49",
   "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",