es-grid-template 1.7.33 → 1.7.34

package/es/table-component/InternalTable.js

@@ -33,7 +33,7 @@ import { addRowIdArray, convertToObj,
 // convertFilters,
 filterDataByColumns, flatColumns2,
 // filterDataByColumns,
-getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns } from "./hook/utils";
+getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTree } from "./hook/utils";
 // import GridEdit from './table/GridEdit'
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
@@ -146,6 +146,9 @@ const InternalTable = props => {
 
     // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
   }, [t, columns, format, editAble]);
+  const isDataTree = React.useMemo(() => {
+    return isTree(dataSource);
+  }, [dataSource]);
   const columnPinning = React.useMemo(() => {
     return {
       left: getFixedFields(columns, 'left'),
@@ -277,7 +280,9 @@ const InternalTable = props => {
     setExpanded: setExpanded,
     isFullScreen: isFullScreen,
     setIsFullScreen: setIsFullScreen,
-    windowSize: windowSize
+    windowSize: windowSize,
+    height: height,
+    isDataTree: isDataTree
   })), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -340,7 +345,8 @@ const InternalTable = props => {
     isFullScreen: isFullScreen,
     setIsFullScreen: setIsFullScreen,
     height: windowSize.innerHeight - 70,
-    windowSize: windowSize
+    windowSize: windowSize,
+    isDataTree: isDataTree
   })))));
 };
 export default InternalTable;

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

@@ -31,6 +31,7 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     columnHidden: any;
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    isDataTree: boolean;
 };
 declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainer;

package/es/table-component/TableContainer.js

@@ -69,7 +69,8 @@ const TableContainer = props => {
     contextMenuClick,
     contextMenuHidden,
     isFullScreen,
-    setIsFullScreen
+    setIsFullScreen,
+    isDataTree
   } = props;
   const tableContainerRef = React.useRef(null);
   const containerRef = React.useRef(null);
@@ -207,7 +208,8 @@ const TableContainer = props => {
       onContextMenu,
       setSorterChange,
       setFilterChange,
-      windowSize
+      windowSize,
+      isDataTree
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,

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

@@ -18,6 +18,7 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setFilterChange: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     tableHeight?: number;
+    isDataTree: boolean;
     windowSize: {
         innerHeight: number;
         innerWidth: number;

package/es/table-component/TableContainerEdit.js

@@ -115,7 +115,8 @@ const TableContainerEdit = props => {
     contextMenuClick,
     contextMenuHidden,
     showDefaultContext,
-    commandSettings
+    commandSettings,
+    isDataTree
   } = props;
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -1503,6 +1504,7 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
       t,
+      isDataTree,
       locale,
       prefix,
       id,

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

@@ -48,7 +48,7 @@ const filterTreeNode = (input, treeNode) => {
 };
 const EditableCell = props => {
   const {
-    t,
+    // t,
     // editing,
     dataIndex,
     editType,
@@ -69,7 +69,8 @@ const EditableCell = props => {
     errors,
     id,
     startCell,
-    rowKey
+    rowKey,
+    t
   } = useContext(TableContext);
   const datePickerRef = React.useRef(null);
   const dateTimePickerRef = React.useRef(null);

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

@@ -11,11 +11,48 @@ import ReactDOMServer from 'react-dom/server';
 const renderCellIndex = props => {
   const {
     parrents,
-    cell
+    cell,
+    expanded,
+    isDataTree,
+    setExpanded,
+    expandIconColumnIndex
   } = props;
   return /*#__PURE__*/React.createElement("span", {
     className: "ui-rc_cell-content"
-  }, parrents.map(pr => {
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: () => {
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__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"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), parrents.map(pr => {
     return `${pr.index + 1}.`;
   }), cell.row.index + 1);
 };
@@ -61,6 +98,13 @@ const renderSelection = args => {
   const {
     row
   } = args.cell;
+  const {
+    cell,
+    expandIconColumnIndex,
+    isDataTree,
+    expanded,
+    setExpanded
+  } = args;
   const {
     selectionSettings,
     setIsSelectionChange
@@ -70,7 +114,40 @@ const renderSelection = args => {
 
       // paddingLeft: `${row.depth * 2}rem`,
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: () => {
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__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"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
     checked: row.getIsSelected() || row.getIsAllSubRowsSelected(),
     indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single'
     // indeterminate={row.getIsSomeSelected() }
@@ -102,10 +179,15 @@ const TableBodyCell = props => {
     selectionSettings,
     id,
     originData,
-    wrapSettings
+    wrapSettings,
+    expanded,
+    setExpanded,
+    expandable,
+    isDataTree
   } = useContext(TableContext);
   const columnMeta = cell.column.columnDef.meta ?? {};
   const parrents = cell.row.getParentRows();
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
@@ -119,8 +201,8 @@ const TableBodyCell = props => {
       [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-      [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right' || columnMeta.type === 'number'
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
       display: 'flex',
@@ -146,7 +228,11 @@ const TableBodyCell = props => {
     }
   }, cell.column.id === "#" && renderCellIndex({
     parrents,
-    cell
+    cell,
+    expanded,
+    isDataTree,
+    setExpanded,
+    expandIconColumnIndex
   }), cell.column.id === "command" && renderCommand({
     cell,
     commandClick,
@@ -156,9 +242,79 @@ const TableBodyCell = props => {
     cell,
     table,
     selectionSettings,
-    setIsSelectionChange
+    setIsSelectionChange,
+    expanded,
+    isDataTree,
+    setExpanded,
+    expandIconColumnIndex
   }), !nonActionColumn.includes(cell.column.id) && (isFirstRightPinnedColumn ? /*#__PURE__*/React.createElement("span", {
     className: "ui-rc_cell-content"
-  }, flexRender(cell.column.columnDef.cell, cell.getContext())) : flexRender(cell.column.columnDef.cell, cell.getContext())));
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: () => {
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__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"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), flexRender(cell.column.columnDef.cell, cell.getContext())) : /*#__PURE__*/React.createElement(React.Fragment, null, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: () => {
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__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"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), flexRender(cell.column.columnDef.cell, cell.getContext()))));
 };
 export default TableBodyCell;

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

@@ -127,9 +127,10 @@ const TableBodyCellEdit = props => {
     dataErrors,
     expanded,
     setExpanded,
-    expandable
+    expandable,
+    isDataTree
   } = React.useContext(TableContext);
-  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
@@ -652,8 +653,8 @@ const TableBodyCellEdit = 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?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right',
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right',
         // [`${prefix}-grid-cell-index-selected`]: rowRange?.includes(cell.row.id),
         [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(cell.row.id)
       }),
@@ -684,7 +685,7 @@ const TableBodyCellEdit = props => {
           // reset?.()
         }
       }
-    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
+    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
       className: "ui-rc-table-row-expand-trigger",
       style: {
         paddingLeft: `${cell.row.depth * 25}px`
@@ -729,8 +730,8 @@ const TableBodyCellEdit = 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?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {
         display: 'flex',
@@ -754,8 +755,8 @@ const TableBodyCellEdit = 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?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
       }),
       style: {
         display: 'flex',
@@ -765,7 +766,7 @@ const TableBodyCellEdit = props => {
         // maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       }
-    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
+    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
       className: "ui-rc-table-row-expand-trigger",
       style: {
         paddingLeft: `${cell.row.depth * 25}px`
@@ -856,8 +857,8 @@ const TableBodyCellEdit = props => {
       'cell-paste-border-left': isInRangePaste && isLeftPaste,
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-      [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right' || columnMeta.type === 'number'
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
       display: 'flex',
@@ -991,7 +992,7 @@ const TableBodyCellEdit = props => {
     className: classNames('ui-rc_cell-content', {
       'select-cell': ['select', 'selectTable', 'asyncSelect'].includes(getEditType(columnMeta, record))
     })
-  }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
     style: {
       paddingLeft: `${cell.row.depth * 25}px`

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

@@ -27,15 +27,7 @@ const TableBodyRow = ({
     recordDoubleClick
   } = React.useContext(TableContext);
   const visibleCells = row.getVisibleCells();
-
-  // console.log('visibleCells', visibleCells)
-
   const virtualColumns = columnVirtualizer.getVirtualItems();
-
-  // console.log('virtualColumns', virtualColumns)
-
-  // table.options.set
-
   return /*#__PURE__*/React.createElement("tr", {
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,

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

@@ -41,7 +41,7 @@ const TableHeadCell = props => {
     locale
   } = useContext(TableContext);
   const isPinned = header.column.getIsPinned();
-  // const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left')
+  const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
   const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
   const [selectedKeys, setSelectedKeys] = React.useState([]);
   const [visible, setVisible] = React.useState(false);
@@ -212,7 +212,7 @@ const TableHeadCell = props => {
     className: classNames(`${prefix}-grid-cell`, {
       [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
       [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
-      // [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: originalColumn?.headerTextAlign === 'center',
       [`${prefix}-grid-cell-text-right`]: originalColumn?.headerTextAlign === 'right'

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

@@ -131,3 +131,4 @@ export declare const convertToObj: (arr: any) => {
     [k: string]: any;
 };
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
+export declare function isTree(arr: any[]): boolean;

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

@@ -309,7 +309,7 @@ export function getFixedFields(columns, type) {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
-      if ((col.fixed ?? col.fixedType) === type && col.field && (col.visible !== false || col.hidden !== true)) {
+      if ((col.fixed ?? col.fixedType) === type && col.field && (col.visible !== false || col.hidden)) {
         result.push(col.field);
       }
       if (col.children && col.children.length > 0) {
@@ -1865,4 +1865,22 @@ export const convertToObj = arr => {
 };
 export const getDiffent2Array = (a, b) => {
   return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))];
-};
+};
+export function isTree(arr) {
+  if (!Array.isArray(arr)) return false;
+  function checkNode(node) {
+    if (typeof node !== "object" || node === null) return false;
+    if ("children" in node) {
+      if (!Array.isArray(node.children)) return false;
+      if (node.children.length === 0) return false;
+      for (const child of node.children) {
+        if (!checkNode(child)) return false;
+      }
+    }
+    return true;
+  }
+  for (const item of arr) {
+    if (!checkNode(item)) return false;
+  }
+  return true;
+}

package/es/table-component/style.scss

@@ -35,7 +35,8 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
   font-size: 14px;
 
   table {
-    border-collapse: collapse;
+    // border-collapse: collapse;
+    border-collapse: separate;
     border-spacing: 0;
     table-layout: fixed;
     // border: 1px solid $tableBorderColor;
@@ -133,9 +134,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
     }
 
-    tr.#{$prefix}-grid-row {
-      border-bottom: 1px solid lightgray;
-    }
+
 
 
     .#{$prefix}-grid-thead {
@@ -143,18 +142,20 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
       .#{$prefix}-grid-cell {
         font-weight: 500;
+        color: #000000E0;
 
         background-color: $body-color;
-        // border-inline-end: 1px solid #e0e0e0;
+        border-inline-end: 1px solid $tableBorderColor;
+        border-bottom: 1px solid $tableBorderColor;
 
-        &::before {
-          content: "";
-          position: absolute;
-          inset-block: 0;
-          right: 0;
-          inset-inline-start: 0px;
-          border-inline-end: 1px solid #e0e0e0;
-        }
+        // &::before {
+        //   content: "";
+        //   position: absolute;
+        //   inset-block: 0;
+        //   right: 0;
+        //   inset-inline-start: 0px;
+        //   border-inline-end: 1px solid #e0e0e0;
+        // }
 
         &.ui-rc-grid-cell-ellipsis {
 
@@ -256,6 +257,10 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
     .#{$prefix}-grid-tbody {
 
+      tr.#{$prefix}-grid-row {
+        border-bottom: 1px solid lightgray;
+      }
+
       .#{$prefix}-grid-row {
         display: flex;
         position: absolute;
@@ -544,6 +549,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
         &.#{$prefix}-grid-cell-command {
           padding: 2px 8px;
+
           .ui-rc_cell-content {
             display: flex;
           }
@@ -983,7 +989,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 .ui-rc-table-row-expand-icon::before,
 .ui-rc-table-row-expand-icon::after {
   position: absolute;
-  background: currentcolor;
+  background: #000000de;
   transition: transform 0.3s ease-out;
   content: "";
 

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

@@ -22,6 +22,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     onContextMenu?: (data: T) => (event: any) => void;
     triggerChangeColumns?: (args: any, keys: any) => void;
     windowSize: any;
+    isDataTree: boolean;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

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

@@ -85,7 +85,6 @@ export type ColumnTable<RecordType = AnyObject> = {
     width?: number;
     maxWidth?: number;
     minWidth?: number;
-    align?: ITextAlign;
     type?: IColumnType;
     haveSum?: boolean;
     isSummary?: boolean;
@@ -114,6 +113,11 @@ export type ColumnTable<RecordType = AnyObject> = {
     visible?: boolean;
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
     columnGroupText?: string;
+    /**
+     * @deprecated Please use `textAlign` instead.
+     * @since  1.7.34
+     */
+    align?: ITextAlign;
     textAlign?: ITextAlign;
     headerTextAlign?: ITextAlign;
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
@@ -140,6 +144,10 @@ export type ColumnTable<RecordType = AnyObject> = {
      */
     fixedType?: FixedType;
     fixed?: FixedType;
+    /**
+      * @deprecated Please use `wrapSettings` instead.
+      * @since 1.7.34
+      */
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: boolean;

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

@@ -1,6 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
 import type { ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
+import type { ExpandedState } from '@tanstack/react-table';
 export type IPositionCell = {
     rowId: string;
     colId: string;
@@ -15,8 +16,8 @@ export interface IContext<T> {
     format?: IFormat;
     expandable?: ExpandableConfig<T>;
     wrapSettings?: IWrapSettings;
-    setExpanded: any;
-    expanded: any;
+    setExpanded: Dispatch<SetStateAction<ExpandedState>>;
+    expanded: ExpandedState;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
     selectionSettings?: SelectionSettings;
     setIsSelectionChange: Dispatch<SetStateAction<{
@@ -64,6 +65,7 @@ export interface IContext<T> {
     handleDeleteContent?: () => void;
     handleAddMulti?: (item: any, n: number, id?: string) => void;
     dataErrors?: any[];
+    isDataTree: boolean;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/es/table-component/useContext.js

@@ -2,6 +2,7 @@ import { createContext } from 'react';
 export const TableContext = /*#__PURE__*/createContext({
   prefix: 'ui-rc',
   id: '',
+  isDataTree: false,
   rowKey: 'rowId',
   dataSource: [],
   originData: [],