es-grid-template 1.8.71 → 1.8.72

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

@@ -0,0 +1,250 @@
+import classNames from "classnames";
+import TableHead from "../header/TableHead";
+import TableBody from "../body/TableBody";
+import TableFooter from "../footer/TableFooter";
+import ComponentSpinner from "../../grid-component/LoadingSpinner";
+import { Tooltip } from "react-tooltip";
+import ContextMenu from "../ContextMenu";
+import React, { useContext } from "react";
+import { TableContext } from "../useContext";
+const TableWrapper = props => {
+  const {
+    id,
+    prefix,
+    tableContainerRef,
+    height,
+    minHeight,
+    summary,
+    table,
+    loading,
+    commandClick,
+    editAble,
+    contextMenuItems: propContextMenuItems,
+    contextMenuHidden,
+    showEmptyText,
+    contextMenuClick,
+    contextMenuOpen,
+    next,
+    dataSource,
+    pagination,
+    infiniteScroll,
+    columnVirtualizer,
+    fixedLeftColumns,
+    fixedRightColumns,
+    virtualPaddingLeft,
+    virtualPaddingRight
+  } = props;
+  const menuRef = React.useRef(null);
+  const loadingRef = React.useRef(false);
+  const hasMoreRef = React.useRef(true);
+  const {
+    windowSize
+  } = useContext(TableContext);
+  const {
+    currentPage,
+    pageSize,
+    total
+  } = pagination ?? {};
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const [selectedRowData, setSelectedRowData] = React.useState(null);
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0,
+    viewportWidth: windowSize.innerWidth,
+    viewportHeight: windowSize.innerHeight
+  });
+  const contextMenuItems = React.useMemo(() => {
+    if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
+      const hiddenItems = contextMenuHidden({
+        rowInfo: {
+          rowData: selectedRowData
+        }
+      });
+      return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
+    }
+    if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
+      return propContextMenuItems.filter(item => !contextMenuHidden.includes(item?.key));
+    }
+    return propContextMenuItems;
+  }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
+  const loadData = page => {
+    if (!hasMoreRef.current || loadingRef.current || loading) return;
+    loadingRef.current = true;
+    setTimeout(() => {
+      next?.();
+      if (page * pageSize >= total) {
+        hasMoreRef.current = false;
+      }
+      loadingRef.current = false;
+    }, 10);
+  };
+  const handleNext = () => {
+    loadData(currentPage + 1);
+  };
+  const handleScroll = e => {
+    if (infiniteScroll) {
+      if (loadingRef.current || loading || dataSource?.length === 0) {
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
+      const {
+        scrollHeight: tbScrollHeight,
+        scrollTop,
+        clientHeight
+      } = e.currentTarget;
+      const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
+      if (isEnd && !loadingRef.current && hasMoreRef.current && dataSource?.length > 0) {
+        handleNext();
+      }
+    }
+    if (e.target.scrollLeft >= 0 && e.target.scrollLeft + e.target.clientWidth < e.target.scrollWidth) {
+      e.target.classList.add('ui-rc-table-ping-right');
+    } else {
+      e.target.classList.remove('ui-rc-table-ping-right');
+    }
+    if ((e.target.scrollLeft ?? 0) > 0) {
+      e.target.classList.add('ui-rc-table-ping-left');
+    } else {
+      e.target.classList.remove('ui-rc-table-ping-left');
+    }
+  };
+  const onContextMenu = data => event => {
+    event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
+
+    setSelectedRowData(data);
+    contextMenuOpen?.({
+      rowInfo: {
+        rowData: data
+      },
+      event
+    });
+    setMenuVisible(true);
+
+    // Đợi DOM cập nhật và lấy kích thước menu
+    setTimeout(() => {
+      const menuElement = menuRef.current; // Lấy menu từ DOM
+      const menuWidth = menuElement?.offsetWidth || 200; // Mặc định 200px nếu chưa render
+      const menuHeight = menuElement?.offsetHeight; // Mặc định 450px nếu chưa render
+
+      // Điều chỉnh vị trí menu
+      let x = event.clientX;
+      let y = event.clientY;
+      if (x + menuWidth > windowSize.innerWidth) {
+        x = x - menuWidth - 10; // Cách cạnh phải 10px
+      }
+      if (y + menuHeight > windowSize.innerHeight) {
+        if (y < menuHeight) {
+          y = 10;
+        } else {
+          y = y - 10 - menuHeight; // Cách cạnh dưới 10px
+        }
+      }
+      setPosition(prevState => ({
+        ...prevState,
+        x,
+        y
+      }));
+    }, 100);
+    if (!menuVisible) {
+      document.addEventListener(`click`, function onClickOutside(e) {
+        const element = e.target;
+        const menuContainer = document.querySelector('.popup-context-menu');
+        const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
+        if (isInsideContainer) {
+          return;
+        }
+        setMenuVisible(false);
+        setPosition(prevState => ({
+          ...prevState,
+          x: undefined,
+          y: undefined
+        }));
+        document.removeEventListener(`click`, onClickOutside);
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative'
+    },
+    className: classNames(`${prefix}-grid-container`, {
+      'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
+      'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    // id={id}
+    ref: tableContainerRef,
+    style: {
+      overflow: 'auto',
+      //our scrollable table container
+      position: 'relative',
+      //needed for sticky header
+      maxHeight: height,
+      //should be a fixed height
+      minHeight: minHeight ? height : undefined //should be a fixed height
+    }
+    // onScroll={infiniteScroll ? handleScroll : undefined}
+    ,
+    onScroll: handleScroll
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      minWidth: table.getTotalSize()
+    }
+  }, /*#__PURE__*/React.createElement(TableHead, {
+    tableContainerRef: tableContainerRef,
+    table: table,
+    columnVirtualizer: columnVirtualizer,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  }), /*#__PURE__*/React.createElement(TableBody, {
+    tableId: id,
+    table: table,
+    tableContainerRef: tableContainerRef,
+    commandClick: commandClick,
+    editAble: editAble,
+    contextMenuItems: contextMenuItems,
+    showEmptyText: showEmptyText,
+    onContextMenu: onContextMenu,
+    columnVirtualizer: columnVirtualizer,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  }), summary && /*#__PURE__*/React.createElement(TableFooter
+  // columnVirtualizer={columnVirtualizer}
+  , {
+    table: table
+    // virtualPaddingLeft={virtualPaddingLeft}
+    // virtualPaddingRight={virtualPaddingRight}
+    // fixedLeftColumns={fixedLeftColumns}
+    // fixedRightColumns={fixedRightColumns}
+  }))), loading && /*#__PURE__*/React.createElement("div", {
+    className: "spinner-loading"
+  }, /*#__PURE__*/React.createElement(ComponentSpinner, null)), /*#__PURE__*/React.createElement(Tooltip, {
+    id: `${id}-tooltip-content`,
+    style: {
+      zIndex: 1999,
+      maxWidth: 450
+    },
+    delayShow: 100
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    id: `${id}-tooltip-error`,
+    style: {
+      zIndex: 1999,
+      maxWidth: 450
+    }
+  }), menuVisible && /*#__PURE__*/React.createElement(ContextMenu, {
+    open: menuVisible,
+    pos: position,
+    setOpen: setMenuVisible,
+    menuRef: menuRef,
+    contextMenuItems: contextMenuItems,
+    contextMenuClick: contextMenuClick,
+    rowData: selectedRowData
+  }));
+};
+export default TableWrapper;

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

@@ -0,0 +1,100 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
+import type { SubmitHandler } from "react-hook-form";
+import type { ExpandedState, Row, Table } from '@tanstack/react-table';
+export type IPositionCell = {
+    rowId: string;
+    colId: string;
+} | undefined;
+export interface IContext<T> {
+    t?: any;
+    prefix: string;
+    id: string;
+    rowKey: string;
+    originData: any[];
+    dataSource: any[];
+    format?: IFormat;
+    expandable?: ExpandableConfig<T>;
+    wrapSettings?: IWrapSettings;
+    setExpanded: Dispatch<SetStateAction<ExpandedState>>;
+    expanded: ExpandedState;
+    recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
+    selectionSettings?: SelectionSettings;
+    isSelectionChange?: {
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    };
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    }>>;
+    setSorterChange: Dispatch<SetStateAction<boolean>>;
+    setFilterChange: Dispatch<SetStateAction<boolean>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+    locale?: Locale;
+    windowSize: {
+        innerHeight: number;
+        innerWidth: number;
+    };
+    control?: any;
+    errors?: any;
+    handleSubmit?: any;
+    onSubmit?: SubmitHandler<any>;
+    getValues?: any;
+    reset?: any;
+    setValue?: any;
+    handleCellChange?: (args: ContextCellChange) => void;
+    handleCellChangeAndAddRow?: (args: ContextCellChange) => void;
+    editingKey?: string;
+    setEditingKey?: Dispatch<SetStateAction<string>>;
+    rangeState?: RangeState;
+    setRangeState?: Dispatch<SetStateAction<RangeState | undefined>>;
+    rangePasteState?: RangeState;
+    setRangePasteState?: Dispatch<SetStateAction<RangeState | undefined>>;
+    startCell?: IPositionCell;
+    setStartCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    endCell?: IPositionCell;
+    setEndCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    startPasteCell?: IPositionCell;
+    setStartPasteCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    endPasteCell?: IPositionCell;
+    setEndPasteCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    isSelecting?: boolean;
+    setIsSelecting?: Dispatch<SetStateAction<boolean>>;
+    isPasting?: boolean;
+    setIsPasting?: Dispatch<SetStateAction<boolean>>;
+    focusedCell?: IPositionCell;
+    setFocusedCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
+    handleDeleteContent?: () => void;
+    handleAddMulti?: (item: any, n: number, id?: string) => void;
+    dataErrors?: any[];
+    isDataTree: boolean;
+    handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
+    pagination?: false | PaginationConfig;
+    rowClassName?: string | RowClassName<T>;
+    table?: Table<T>;
+    rowEditable?: (rowData: T) => boolean;
+    onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: T, row: Row<T>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    dataSourceFilter?: SourceFilter[];
+    groupColumns?: string[];
+}
+export declare const TableContext: import("react").Context<IContext<any>>;
+export type ContextCellChange = {
+    key: string;
+    record: any;
+    field: string;
+    option: any;
+    indexRow: number;
+    indexCol: number;
+    newState?: any;
+    prevState?: any;
+    type: 'enter' | 'blur' | 'outClick';
+    addNewRow?: boolean;
+};

package/es/group-component/useContext.js

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+export const TableContext = /*#__PURE__*/createContext({
+  prefix: 'ui-rc',
+  id: '',
+  isDataTree: false,
+  rowKey: 'rowId',
+  dataSource: [],
+  originData: [],
+  expanded: {},
+  windowSize: {
+    innerHeight: 0,
+    innerWidth: 0
+  },
+  // triggerFilter: () => { },
+
+  setIsSelectionChange: () => {},
+  setSorterChange: () => {},
+  setFilterChange: () => {},
+  setExpanded: () => {},
+  handleCellClick: () => {}
+});

package/es/table-component/InternalTable.js

@@ -30,6 +30,7 @@ const InternalTable = props => {
     selectionSettings,
     expandable,
     onChooseColumns,
+    onExpandClick,
     // contextMenuClick,
     // contextMenuOpen,
     height,
@@ -105,6 +106,9 @@ const InternalTable = props => {
     value: undefined
   });
   React.useEffect(() => {
+    if (onExpandClick) {
+      return;
+    }
     if (defaultExpandAllRows) {
       const allKeys = findAllChildrenKeys2(convertData, rowKey, 'children');
       setExpanded(convertToObjTrue(allKeys));
@@ -113,7 +117,7 @@ const InternalTable = props => {
         setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
       }
     }
-  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys]);
+  }, [defaultExpandAllRows, convertData, defaultExpandedRowKeys, onExpandClick]);
 
   // ========================= Keys =========================
 
@@ -181,6 +185,7 @@ const InternalTable = props => {
     selectionSettings: selectionSettings,
     mergedSelectedKeys: mergedSelectedKeys,
     expandable: expandable,
+    onExpandClick: onExpandClick,
     setColumns: setColumns
   })));
 };

package/es/table-component/TableContainer.js

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

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

@@ -78,7 +78,8 @@ const renderSelection = args => {
     expandIconColumnIndex,
     isDataTree,
     expanded,
-    setExpanded
+    setExpanded,
+    onExpandClick
   } = args;
   const {
     selectionSettings,
@@ -96,20 +97,33 @@ const renderSelection = args => {
     }
   }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
     // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
+    onClick: e => {
+      e.stopPropagation();
       const keys = Object.keys(expanded);
       // @ts-ignore
       const tmp = {
         ...expanded
       };
+
+      // collapse
       if (keys.includes(cell.row.id)) {
         delete tmp[cell.row.id];
         setExpanded(tmp);
       } else {
+        // collapse
         setExpanded(old => ({
           ...old,
           [cell.row.id]: true
         }));
+        const expandedKeys = {
+          ...tmp,
+          [cell.row.id]: true
+        };
+        onExpandClick?.({
+          expandedKeys: Object.keys(expandedKeys),
+          key: cell.row.id,
+          rowData: cell.row.original
+        });
       }
     },
     style: {
@@ -161,7 +175,8 @@ const TableBodyCell = props => {
     isSelectionChange,
     selectionSettings,
     wrapSettings,
-    pagination
+    pagination,
+    onExpandClick
     // dataSource
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
@@ -226,20 +241,33 @@ const TableBodyCell = props => {
       }
     }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
       // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
+      onClick: e => {
+        e.stopPropagation();
         const keys = Object.keys(expanded);
         // @ts-ignore
         const tmp = {
           ...expanded
         };
+
+        // collapse
         if (keys.includes(cell.row.id)) {
           delete tmp[cell.row.id];
           setExpanded(tmp);
         } else {
+          // expand
           setExpanded(old => ({
             ...old,
             [cell.row.id]: true
           }));
+          const expandedKeys = {
+            ...tmp,
+            [cell.row.id]: true
+          };
+          onExpandClick?.({
+            expandedKeys: Object.keys(expandedKeys),
+            key: cell.row.id,
+            rowData: record
+          });
         }
       },
       style: {
@@ -311,7 +339,8 @@ const TableBodyCell = props => {
       isDataTree,
       setExpanded,
       expandIconColumnIndex,
-      isSelectionChange
+      isSelectionChange,
+      onExpandClick
     })));
   }
   return /*#__PURE__*/React.createElement("div", {
@@ -396,41 +425,8 @@ const TableBodyCell = props => {
           selectionSettings
         });
         cell.row.getToggleSelectedHandler()(e);
-
-        // if (cell.row.getIsSelected()) { // nếu đã chọn
-
-        //   const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== cell.row.id)
-
-        //   setIsSelectionChange({
-        //     isChange: true,
-        //     type: 'rowSelected',
-        //     rowData: cell.row.original,
-        //     rowsData: aaa ?? []
-        //   })
-
-        // } else {
-
-        //   const { rowsData } = isSelectionChange ?? {}
-
-        //   const abc = rowsData && rowsData.length > 0 ? [...rowsData] : []
-
-        //   abc.push(cell.row)
-
-        //   setIsSelectionChange({
-        //     isChange: true,
-        //     type: 'rowSelected',
-        //     rowData: cell.row.original,
-        //     rowsData: abc
-        //   })
-        // }
       }
-    }
-
-    // onKeyUp={() => {
-
-    // }}
-    ,
-
+    },
     onClick: e => {
       const selection = window.getSelection();
       const text = selection ? selection.toString() : "";
@@ -459,20 +455,33 @@ const TableBodyCell = props => {
     }
   }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
     // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
+    onClick: e => {
+      e.stopPropagation();
       const keys = Object.keys(expanded);
       // @ts-ignore
       const tmp = {
         ...expanded
       };
+
+      // collapse
       if (keys.includes(cell.row.id)) {
         delete tmp[cell.row.id];
         setExpanded(tmp);
       } else {
+        // expand
         setExpanded(old => ({
           ...old,
           [cell.row.id]: true
         }));
+        const expandedKeys = {
+          ...tmp,
+          [cell.row.id]: true
+        };
+        onExpandClick?.({
+          expandedKeys: Object.keys(expandedKeys),
+          key: cell.row.id,
+          rowData: record
+        });
       }
     },
     style: {

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

@@ -51,7 +51,8 @@ const TableBodyRow = ({
     "data-row-key": row.id,
     className: classNames(`${prefix}-grid-row ${rowClass ?? ''}`, {
       [`${prefix}-grid-row-selected`]: row.getIsSelected(),
-      [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble
+      [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
+      [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || Array.isArray(row.originalSubRows)
     }),
     style: {
       // display: 'flex',
@@ -63,6 +64,8 @@ const TableBodyRow = ({
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
       height: isEditing ? virtualRow.size : undefined,
       minHeight: isEditing ? undefined : virtualRow.size,
+      // backgroundColor: Array.isArray(row.originalSubRows) ? '#f5f5f5' : undefined,
+      // fontWeight: Array.isArray(row.originalSubRows) ? '500' : undefined,
       ...rowStyles
     },
     onDoubleClick: e => {

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

@@ -138,6 +138,7 @@ export declare const convertToObjTrue: (arr: any) => {
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function findFirst(items: Column<any>[]): Column<any, unknown>;
 export declare function isTreeArray(arr: any[]): boolean;
+export declare function isTreeArray2(arr: any[]): boolean;
 export declare function updateColumnWidthsRecursive(columns: any[], sizing: Record<string, number>): any[];
 export declare function updateWidthsByOther(source: any[], target: any[]): any[];
 export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];

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

@@ -1967,24 +1967,32 @@ export const convertToObj = arr => {
   return Object.fromEntries(arr.map(key => [key, false]));
 };
 export const convertToObjTrue = arr => {
-  // const result = Object.keys(obj).reduce((acc: any, key) => {
-  //   acc[key] = false;
-  //   return acc;
-  // }, {});
-
-  // return result
-
   return Object.fromEntries(arr.map(key => [key, true]));
 };
 export const getDiffent2Array = (a, b) => {
   return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))];
 };
 export function findFirst(items) {
+  // const leftItem = items.find(item => item.getIsPinned() === 'left')
   const leftItem = items.find(item => item.getIsPinned() === 'left');
   if (leftItem) return leftItem;
   return null;
 }
 export function isTreeArray(arr) {
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return false;
+  }
+  for (const item of arr) {
+    if (!item) {
+      return false;
+    }
+    if (item.children) {
+      return true;
+    }
+  }
+  return false;
+}
+export function isTreeArray2(arr) {
   if (!Array.isArray(arr) || arr.length === 0) {
     return false;
   }

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{}}}&.", "-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{background-color:", ";color:", ";}}.", "-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.$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.$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, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-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);