es-grid-template 1.7.32 → 1.7.34

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

@@ -1,9 +1,7 @@
 import { flexRender } from "@tanstack/react-table";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-
-// import ReactDOMServer from 'react-dom/server'
-
+import ReactDOMServer from 'react-dom/server';
 import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, flattenArray, flattenData,
 // getCellsByPosition,
 getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
@@ -46,7 +44,7 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "ui-rc_cell-content"
   }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/React.createElement(Command, {
@@ -129,13 +127,13 @@ 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());
+  const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
   // const hasValue = html.trim().length > 0;
 
@@ -595,7 +593,7 @@ const TableBodyCellEdit = props => {
       handleEdit(e);
       return;
     }
-    if (e.key.length === 1) {
+    if (e.key.length === 1 && !e.ctrlKey) {
       e.preventDefault();
       e.stopPropagation();
       handleEdit(e);
@@ -655,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)
       }),
@@ -687,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`
@@ -728,12 +726,12 @@ const TableBodyCellEdit = props => {
   if (cell.column.id === "command") {
     return /*#__PURE__*/React.createElement("td", {
       key: cell.id,
-      className: classNames(`${prefix}-grid-cell`, {
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
         [`${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',
@@ -757,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',
@@ -768,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`
@@ -840,8 +838,9 @@ const TableBodyCellEdit = props => {
     "data-tooltip-id": `${id}-tooltip-content`
     // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
     // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
+    // data-tooltip-content={isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
     ,
-    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? ''],
+    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent)),
     className: classNames(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -858,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',
@@ -993,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`
@@ -1032,7 +1031,7 @@ const TableBodyCellEdit = props => {
       handleEdit(e);
       // setEditingKey?.(cell.row.id)
     }
-  })), !isSelecting && !isEditing && cell.row.id === endCell?.rowId && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
+  })), !isSelecting && !isEditing && rowNumber === rangeState?.endRowIndex && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
     className: 'dragging-point',
     onMouseDown: e => {
       e.preventDefault();

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

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

package/es/table-component/header/TableHeadCell.d.ts

@@ -1,11 +1,13 @@
 import type { Table } from '@tanstack/react-table';
 import { type Header } from '@tanstack/react-table';
 import React from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
 interface TableHeadCellProps<T> {
     t?: any;
     table: Table<T>;
     header: Header<T, unknown>;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     colSpan: any;
     rowSpan: any;
 }

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

@@ -13,6 +13,7 @@ import { extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilte
 import { TableContext } from "../useContext";
 import { renderFilter } from "./renderFilter";
 import ReactDOMServer from 'react-dom/server';
+
 // import { ColumnTable } from "../type";
 
 // import { Tooltip } from 'react-tooltip'
@@ -22,13 +23,14 @@ const TableHeadCell = props => {
     header,
     getPopupContainer,
     table,
-    t,
+    // t,
     // columnVirtualizer,
     // rowHeaderVirtualizer,
     colSpan,
     rowSpan
   } = props;
   const {
+    t,
     prefix,
     setSorterChange,
     setFilterChange,
@@ -39,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);
@@ -112,13 +114,16 @@ const TableHeadCell = props => {
   };
   const doFilter = type => {
     if (type) {
-      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? [''] : selectedKeys);
+      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
     } else {
       header.column.setFilterValue(undefined);
       setSelectedKeys([]);
     }
     setFilterChange(true);
     triggerVisible(false);
+    setTimeout(() => {
+      setFilterChange(false);
+    }, 10);
   };
   const mergedDropdownProps = extendsObject({
     trigger: ['click'],
@@ -207,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'
@@ -218,7 +223,6 @@ const TableHeadCell = props => {
     style: {
       // display: 'flex',
       width: header.getSize(),
-      // width: 'inherit',
       minWidth: header.getSize(),
       maxWidth: header.getSize(),
       ...getCommonPinningStyles(header.column),
@@ -304,7 +308,7 @@ const TableHeadCell = props => {
     // onMouseUp: () => {
     //   requestAnimationFrame(() => {
     //     columnVirtualizer.measure()
-    //     rowHeaderVirtualizer.measure()
+    //     // rowHeaderVirtualizer.measure()
     //   })
     // },
 

package/es/table-component/header/TableHeadRow.d.ts

@@ -11,5 +11,5 @@ interface TableHeadRowProps<T> {
     fixedLeftColumns: Column<T, unknown>[];
     fixedRightColumns: Column<T, unknown>[];
 }
-declare const TableHeadRow: ({ table, headerGroup, }: TableHeadRowProps<any>) => React.JSX.Element;
+declare const TableHeadRow: ({ table, headerGroup, columnVirtualizer, }: TableHeadRowProps<any>) => React.JSX.Element;
 export default TableHeadRow;

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

@@ -8,9 +8,8 @@ import TableHeadCell from "./TableHeadCell";
 
 const TableHeadRow = ({
   table,
-  headerGroup
-
-  // columnVirtualizer,
+  headerGroup,
+  columnVirtualizer
   // virtualPaddingLeft,
   // virtualPaddingRight,
   // fixedLeftColumns,
@@ -53,8 +52,8 @@ const TableHeadRow = ({
     return /*#__PURE__*/React.createElement(TableHeadCell, {
       key: header.id,
       header: header,
-      table: table
-      // columnVirtualizer={columnVirtualizer}
+      table: table,
+      columnVirtualizer: columnVirtualizer
       // rowHeaderVirtualizer={rowHeaderVirtualizer}
       ,
       colSpan: header.colSpan,

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) {
+      if ((col.fixed ?? col.fixedType) === type && col.field && (col.visible !== false || col.hidden)) {
         result.push(col.field);
       }
       if (col.children && col.children.length > 0) {
@@ -1660,7 +1660,7 @@ export const convertFilters = filters => {
 export function getInvisibleColumns(columns) {
   const result = {};
   for (const col of columns) {
-    if (col.visible === false) {
+    if (col.visible === false || col.hidden) {
       result[col.field ?? ''] = false;
     }
   }
@@ -1688,7 +1688,7 @@ export const getAllVisibleKeys1 = columns => {
   const keys = [];
   const traverse = (cols, parentHidden = false) => {
     for (const col of cols) {
-      if (col.visible === false || parentHidden) {
+      if (col.visible === false || col.hidden || parentHidden) {
         continue;
       }
       if (col.field) {
@@ -1728,7 +1728,7 @@ export function getHiddenParentKeys1(columns, parentKeys = []) {
         childHiddenParents.forEach(key => hiddenParents.add(key));
         currentPath.forEach(key => hiddenParents.add(key));
       }
-    } else if (column.visible !== false) {
+    } else if (column.visible !== false && column.hidden !== true) {
       parentKeys.forEach(key => hiddenParents.add(key));
     }
   }
@@ -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,14 +35,30 @@ $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;
   }
 
   .#{$prefix}-grid-container {
+
     border: 1px solid $tableBorderColor;
+    border-right: 0;
+    font-size: 13px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0px;
+      right: 0;
+      height: 100%;
+      // width: 100%;
+      border-right: 1px solid $tableBorderColor;
+      pointer-events: none;
+      z-index: 1;
+    }
 
     .#{$prefix}-grid-cell {
 
@@ -118,9 +134,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
     }
 
-    tr.#{$prefix}-grid-row {
-      border-bottom: 1px solid lightgray;
-    }
+
 
 
     .#{$prefix}-grid-thead {
@@ -128,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 {
 
@@ -241,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;
@@ -527,6 +547,14 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           background-color: #f0f0f0;
         }
 
+        &.#{$prefix}-grid-cell-command {
+          padding: 2px 8px;
+
+          .ui-rc_cell-content {
+            display: flex;
+          }
+        }
+
 
         .isValid {
           &::after {
@@ -961,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: "";