es-grid-template 1.8.72 → 1.8.73

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

@@ -290,14 +290,12 @@ export type ExpandableConfig<RecordType> = {
     onExpand?: (expanded: boolean, record: RecordType) => void;
     onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
     defaultExpandAllRows?: boolean;
-    indentSize?: number;
     expandIconColumnIndex?: number;
+    showExpandAll?: boolean;
     showExpandColumn?: boolean;
     expandedRowClassName?: string | RowClassName<RecordType>;
     childrenColumnName?: string;
     rowExpandable?: (record: RecordType) => boolean;
-    columnWidth?: number | string;
-    fixed?: FixedType;
 };
 export type RenderExpandIcon<RecordType> = (props: RenderExpandIconProps<RecordType>) => React.ReactNode;
 export interface RenderExpandIconProps<RecordType> {

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

@@ -165,7 +165,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     type?: IColumnType;
     haveSum?: boolean;
     isSummary?: boolean;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
     format?: IFormat | ((rowData: any) => IFormat);
     allowFiltering?: boolean;
     sorter?: boolean;
@@ -180,18 +180,18 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     headerText?: string;
     hidden?: boolean;
     visible?: boolean;
-    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     columnGroupText?: string;
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
     headerTextAlign?: import("./../../grid-component/type").ITextAlign;
-    template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         record: RecordType;
-    }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     commandItems?: import("./../../grid-component/type").CommandItem[];
     children?: ColumnTable<RecordType>[];
     editType?: EditType | ((rowData?: RecordType) => EditType);
@@ -211,9 +211,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     ellipsis?: boolean;
     allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellStyles?: Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width">);
     sumGroup?: boolean;
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
 }[];

package/es/group-component/table/Grid.js

@@ -310,7 +310,8 @@ const Grid = props => {
     },
     className: classNames(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
-      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark',
+      [`${prefix}-grid-editable`]: editAble
     }),
     style: {
       minHeight: minHeight ?? undefined,

package/es/table-component/InternalTable.js

@@ -69,6 +69,7 @@ const InternalTable = props => {
   const [sorterStates, setSorterStates] = React.useState([]);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
   const [columns, setColumns] = React.useState([]);
+  const [isExpandClick, setIsExpandClick] = React.useState(false);
   React.useEffect(() => {
     // setColumns(propsColumns as any)
 
@@ -106,7 +107,7 @@ const InternalTable = props => {
     value: undefined
   });
   React.useEffect(() => {
-    if (onExpandClick) {
+    if (onExpandClick || isExpandClick) {
       return;
     }
     if (defaultExpandAllRows) {
@@ -117,7 +118,7 @@ const InternalTable = props => {
         setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
       }
     }
-  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys, onExpandClick]);
+  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys, onExpandClick, isExpandClick]);
 
   // ========================= Keys =========================
 
@@ -186,7 +187,8 @@ const InternalTable = props => {
     mergedSelectedKeys: mergedSelectedKeys,
     expandable: expandable,
     onExpandClick: onExpandClick,
-    setColumns: setColumns
+    setColumns: setColumns,
+    setIsExpandClick: setIsExpandClick
   })));
 };
 export default InternalTable;

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

@@ -41,6 +41,7 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     isDataTree: boolean;
     setColumnSizing: Dispatch<SetStateAction<any>>;
     setColumns: Dispatch<SetStateAction<any>>;
+    setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     columnSizingInfo: ColumnSizingInfoState;
     columnSizing: ColumnSizingState;
 };

package/es/table-component/TableContainer.js

@@ -70,7 +70,8 @@ const TableContainer = props => {
     onRowHeaderStyles,
     title,
     dataSourceFilter,
-    onExpandClick
+    onExpandClick,
+    setIsExpandClick
   } = props;
   const tableContainerRef = React.useRef(null);
   const containerRef = React.useRef(null);
@@ -274,7 +275,8 @@ const TableContainer = props => {
       table,
       pagination,
       dataSourceFilter,
-      onExpandClick
+      onExpandClick,
+      setIsExpandClick
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,

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

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

package/es/table-component/TableContainerEdit.js

@@ -126,7 +126,8 @@ const TableContainerEdit = props => {
     columnSizingInfo,
     rowClassName,
     onRowStyles,
-    dataSourceFilter
+    dataSourceFilter,
+    setIsExpandClick
   } = props;
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -1903,7 +1904,8 @@ const TableContainerEdit = props => {
       rowClassName,
       rowEditable,
       onRowStyles,
-      dataSourceFilter
+      dataSourceFilter,
+      setIsExpandClick
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,

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

@@ -80,12 +80,11 @@ const renderSelection = args => {
     expandIconColumnIndex,
     isDataTree,
     expanded,
-    setExpanded
-  } = args;
-  const {
+    setExpanded,
     selectionSettings,
     setIsSelectionChange,
-    isSelectionChange
+    isSelectionChange,
+    setIsExpandClick
   } = args;
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -100,6 +99,7 @@ const renderSelection = args => {
   }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
     // onClick: row.getToggleExpandedHandler(),
     onClick: e => {
+      setIsExpandClick(true);
       e.stopPropagation();
       e.preventDefault();
       const keys = Object.keys(expanded);
@@ -231,7 +231,8 @@ const TableBodyCellEdit = props => {
     setIsSelectionChange,
     selectionSettings,
     pagination,
-    handleAddMulti
+    handleAddMulti,
+    setIsExpandClick
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -1014,7 +1015,8 @@ const TableBodyCellEdit = props => {
       isDataTree,
       setExpanded,
       expandIconColumnIndex,
-      isSelectionChange
+      isSelectionChange,
+      setIsExpandClick
     }));
   }
   const handleChange = () => {
@@ -1240,6 +1242,7 @@ const TableBodyCellEdit = props => {
     onClick: e => {
       e.stopPropagation();
       e.preventDefault();
+      setIsExpandClick(true);
       const keys = Object.keys(expanded);
       // @ts-ignore
       const tmp = {

package/es/table-component/header/TableHeadCell2.js

@@ -4,7 +4,7 @@ import { Button, Space } from 'antd';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
 import { Checkbox, Dropdown, Select } from 'rc-master-ui';
-import { excludeItems, extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter, removeDuplicatesByKey } from "../hook/utils";
+import { convertToObjTrue, excludeItems, extendsObject, findAllChildrenKeys2, getCommonPinningStyles, getDefaultOperator, getTypeFilter, isObjEmpty, removeDuplicatesByKey } from "../hook/utils";
 import { TableContext } from "../useContext";
 import { renderFilter } from "./renderFilter";
 import ReactDOMServer from 'react-dom/server';
@@ -31,8 +31,18 @@ const TableHeadCell2 = props => {
     id,
     locale,
     format,
-    dataSourceFilter
+    dataSourceFilter,
+    isDataTree,
+    expanded,
+    setExpanded,
+    expandable,
+    dataSource,
+    rowKey
   } = useContext(TableContext);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const {
+    showExpandAll
+  } = expandable || {};
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
   const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
@@ -196,6 +206,13 @@ const TableHeadCell2 = props => {
       // return dropdownContent;
     }
   });
+  const handleCollapseAllGroup = () => {
+    setExpanded({});
+  };
+  const handleExpandAllGroup = () => {
+    const allKeys = findAllChildrenKeys2(dataSource, rowKey, 'children');
+    setExpanded(convertToObjTrue(allKeys));
+  };
   return /*#__PURE__*/React.createElement("div", {
     // ref={setNodeRef}
     className: classNames(`${prefix}-grid-cell`, {
@@ -223,7 +240,26 @@ const TableHeadCell2 = props => {
       [`${prefix}-grid-filter-column`]: column.id !== 'selection_column',
       [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
     })
-  }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
+  }, column.getIndex() === expandIconColumnIndex && isDataTree && showExpandAll && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (!isObjEmpty(expanded)) {
+        handleCollapseAllGroup();
+      } else {
+        handleExpandAllGroup();
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, !isObjEmpty(expanded) ? /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  }))), column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
     checked: table.getIsAllRowsSelected(),
     indeterminate: table.getIsSomePageRowsSelected(),
     onChange: e => {

package/es/table-component/style.js

@@ -45,4 +45,4 @@ const colorDark = "#e6e4f3e6 ";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";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-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-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{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, tableBorderColor, 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, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";&.", "-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-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-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{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, 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.$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.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

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

@@ -20,6 +20,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
+    setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     triggerChangeColumns?: (args: any, keys: any, type: string) => void;
     windowSize: any;

package/es/table-component/table/Grid.js

@@ -56,6 +56,7 @@ const Grid = props => {
     windowSize,
     fullScreenTitle,
     className: tableClassNames,
+    setIsExpandClick,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');
@@ -264,7 +265,8 @@ const Grid = props => {
     },
     className: classNames(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
-      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark',
+      [`${prefix}-grid-editable`]: editAble
     }),
     style: {
       minHeight: minHeight ?? undefined,
@@ -306,7 +308,8 @@ const Grid = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen
+    setIsFullScreen: setIsFullScreen,
+    setIsExpandClick: setIsExpandClick
   })))), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -384,7 +387,8 @@ const Grid = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen
+    setIsFullScreen: setIsFullScreen,
+    setIsExpandClick: setIsExpandClick
   })))))));
 };
 export default Grid;

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

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

package/es/table-component/useContext.js

@@ -17,5 +17,6 @@ export const TableContext = /*#__PURE__*/createContext({
   setSorterChange: () => {},
   setFilterChange: () => {},
   setExpanded: () => {},
-  handleCellClick: () => {}
+  handleCellClick: () => {},
+  setIsExpandClick: () => {}
 });

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

@@ -290,14 +290,12 @@ export type ExpandableConfig<RecordType> = {
     onExpand?: (expanded: boolean, record: RecordType) => void;
     onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
     defaultExpandAllRows?: boolean;
-    indentSize?: number;
     expandIconColumnIndex?: number;
+    showExpandAll?: boolean;
     showExpandColumn?: boolean;
     expandedRowClassName?: string | RowClassName<RecordType>;
     childrenColumnName?: string;
     rowExpandable?: (record: RecordType) => boolean;
-    columnWidth?: number | string;
-    fixed?: FixedType;
 };
 export type RenderExpandIcon<RecordType> = (props: RenderExpandIconProps<RecordType>) => React.ReactNode;
 export interface RenderExpandIconProps<RecordType> {

package/lib/group-component/table/Grid.js

@@ -315,7 +315,8 @@ const Grid = props => {
     },
     className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
-      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark',
+      [`${prefix}-grid-editable`]: editAble
     }),
     style: {
       minHeight: minHeight ?? undefined,

package/lib/table-component/InternalTable.js

@@ -78,6 +78,7 @@ const InternalTable = props => {
   const [sorterStates, setSorterStates] = _react.default.useState([]);
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
   const [columns, setColumns] = _react.default.useState([]);
+  const [isExpandClick, setIsExpandClick] = _react.default.useState(false);
   _react.default.useEffect(() => {
     // setColumns(propsColumns as any)
 
@@ -115,7 +116,7 @@ const InternalTable = props => {
     value: undefined
   });
   _react.default.useEffect(() => {
-    if (onExpandClick) {
+    if (onExpandClick || isExpandClick) {
       return;
     }
     if (defaultExpandAllRows) {
@@ -126,7 +127,7 @@ const InternalTable = props => {
         setExpanded((0, _utils.convertToObjTrue)(defaultExpandedRowKeys ?? []));
       }
     }
-  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys, onExpandClick]);
+  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys, onExpandClick, isExpandClick]);
 
   // ========================= Keys =========================
 
@@ -195,7 +196,8 @@ const InternalTable = props => {
     mergedSelectedKeys: mergedSelectedKeys,
     expandable: expandable,
     onExpandClick: onExpandClick,
-    setColumns: setColumns
+    setColumns: setColumns,
+    setIsExpandClick: setIsExpandClick
   })));
 };
 var _default = exports.default = InternalTable;

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

@@ -41,6 +41,7 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     isDataTree: boolean;
     setColumnSizing: Dispatch<SetStateAction<any>>;
     setColumns: Dispatch<SetStateAction<any>>;
+    setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     columnSizingInfo: ColumnSizingInfoState;
     columnSizing: ColumnSizingState;
 };

package/lib/table-component/TableContainer.js

@@ -77,7 +77,8 @@ const TableContainer = props => {
     onRowHeaderStyles,
     title,
     dataSourceFilter,
-    onExpandClick
+    onExpandClick,
+    setIsExpandClick
   } = props;
   const tableContainerRef = _react.default.useRef(null);
   const containerRef = _react.default.useRef(null);
@@ -281,7 +282,8 @@ const TableContainer = props => {
       table,
       pagination,
       dataSourceFilter,
-      onExpandClick
+      onExpandClick,
+      setIsExpandClick
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,

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

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

package/lib/table-component/TableContainerEdit.js

@@ -133,7 +133,8 @@ const TableContainerEdit = props => {
     columnSizingInfo,
     rowClassName,
     onRowStyles,
-    dataSourceFilter
+    dataSourceFilter,
+    setIsExpandClick
   } = props;
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -1910,7 +1911,8 @@ const TableContainerEdit = props => {
       rowClassName,
       rowEditable,
       onRowStyles,
-      dataSourceFilter
+      dataSourceFilter,
+      setIsExpandClick
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,

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

@@ -87,12 +87,11 @@ const renderSelection = args => {
     expandIconColumnIndex,
     isDataTree,
     expanded,
-    setExpanded
-  } = args;
-  const {
+    setExpanded,
     selectionSettings,
     setIsSelectionChange,
-    isSelectionChange
+    isSelectionChange,
+    setIsExpandClick
   } = args;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -107,6 +106,7 @@ const renderSelection = args => {
   }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
     // onClick: row.getToggleExpandedHandler(),
     onClick: e => {
+      setIsExpandClick(true);
       e.stopPropagation();
       e.preventDefault();
       const keys = Object.keys(expanded);
@@ -238,7 +238,8 @@ const TableBodyCellEdit = props => {
     setIsSelectionChange,
     selectionSettings,
     pagination,
-    handleAddMulti
+    handleAddMulti,
+    setIsExpandClick
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -1021,7 +1022,8 @@ const TableBodyCellEdit = props => {
       isDataTree,
       setExpanded,
       expandIconColumnIndex,
-      isSelectionChange
+      isSelectionChange,
+      setIsExpandClick
     }));
   }
   const handleChange = () => {
@@ -1247,6 +1249,7 @@ const TableBodyCellEdit = props => {
     onClick: e => {
       e.stopPropagation();
       e.preventDefault();
+      setIsExpandClick(true);
       const keys = Object.keys(expanded);
       // @ts-ignore
       const tmp = {

package/lib/table-component/header/TableHeadCell2.js

@@ -40,8 +40,18 @@ const TableHeadCell2 = props => {
     id,
     locale,
     format,
-    dataSourceFilter
+    dataSourceFilter,
+    isDataTree,
+    expanded,
+    setExpanded,
+    expandable,
+    dataSource,
+    rowKey
   } = (0, _react.useContext)(_useContext.TableContext);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const {
+    showExpandAll
+  } = expandable || {};
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
   const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
@@ -205,6 +215,13 @@ const TableHeadCell2 = props => {
       // return dropdownContent;
     }
   });
+  const handleCollapseAllGroup = () => {
+    setExpanded({});
+  };
+  const handleExpandAllGroup = () => {
+    const allKeys = (0, _utils.findAllChildrenKeys2)(dataSource, rowKey, 'children');
+    setExpanded((0, _utils.convertToObjTrue)(allKeys));
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     // ref={setNodeRef}
     className: (0, _classnames.default)(`${prefix}-grid-cell`, {
@@ -232,7 +249,26 @@ const TableHeadCell2 = props => {
       [`${prefix}-grid-filter-column`]: column.id !== 'selection_column',
       [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
     })
-  }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
+  }, column.getIndex() === expandIconColumnIndex && isDataTree && showExpandAll && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (!(0, _utils.isObjEmpty)(expanded)) {
+        handleCollapseAllGroup();
+      } else {
+        handleExpandAllGroup();
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, !(0, _utils.isObjEmpty)(expanded) ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  }))), column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
     checked: table.getIsAllRowsSelected(),
     indeterminate: table.getIsSomePageRowsSelected(),
     onChange: e => {

package/lib/table-component/style.js

@@ -52,4 +52,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:13px;background-color:", ";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-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-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{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, tableBorderColor, 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, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";&.", "-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-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-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{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, 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.$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.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

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

@@ -20,6 +20,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
+    setIsExpandClick: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     triggerChangeColumns?: (args: any, keys: any, type: string) => void;
     windowSize: any;

package/lib/table-component/table/Grid.js

@@ -61,6 +61,7 @@ const Grid = props => {
     windowSize,
     fullScreenTitle,
     className: tableClassNames,
+    setIsExpandClick,
     ...rest
   } = props;
   const [columnResizeMode] = _react.default.useState('onChange');
@@ -269,7 +270,8 @@ const Grid = props => {
     },
     className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
-      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark',
+      [`${prefix}-grid-editable`]: editAble
     }),
     style: {
       minHeight: minHeight ?? undefined,
@@ -311,7 +313,8 @@ const Grid = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen
+    setIsFullScreen: setIsFullScreen,
+    setIsExpandClick: setIsExpandClick
   })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
@@ -389,7 +392,8 @@ const Grid = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen
+    setIsFullScreen: setIsFullScreen,
+    setIsExpandClick: setIsExpandClick
   })))))));
 };
 var _default = exports.default = Grid;

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

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

package/lib/table-component/useContext.js

@@ -23,5 +23,6 @@ const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContex
   setSorterChange: () => {},
   setFilterChange: () => {},
   setExpanded: () => {},
-  handleCellClick: () => {}
+  handleCellClick: () => {},
+  setIsExpandClick: () => {}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.8.72",
+  "version": "1.8.73",
   "description": "es-grid-template",
   "keywords": [
     "react",