es-grid-template 1.7.27 → 1.7.28

package/lib/table-component/TableContainerEdit.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _TableBody = _interopRequireDefault(require("./body/TableBody"));
-var _TableHead = _interopRequireDefault(require("./header/TableHead"));
 var _utils = require("./hook/utils");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _reactHookForm = require("react-hook-form");
@@ -21,9 +19,12 @@ var _rcMasterUi = require("rc-master-ui");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _becoxyIcons = require("becoxy-icons");
 var _ColumnsChoose = require("./ColumnsChoose");
-var _TableFooter = _interopRequireDefault(require("./footer/TableFooter"));
+var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
+var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
+var _sweetalert = _interopRequireDefault(require("sweetalert2"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
 const {
   Paragraph,
   Title
@@ -78,8 +79,8 @@ const TableContainerEdit = props => {
     // triggerFilter,
     selectionSettings,
     setIsSelectionChange,
-    onContextMenu,
-    contextMenuItems,
+    // onContextMenu,
+    contextMenuItems: propsContext,
     setSorterChange,
     setFilterChange,
     // tableHeight,
@@ -111,11 +112,17 @@ const TableContainerEdit = props => {
     columnHidden,
     showEmptyText,
     isFullScreen,
-    setIsFullScreen
+    setIsFullScreen,
+    infiniteScroll,
+    windowSize,
+    next,
+    loading,
+    contextMenuOpen,
+    contextMenuClick,
+    contextMenuHidden,
+    showDefaultContext,
+    commandSettings
   } = props;
-
-  // console.log('setIsFullScreen', setIsFullScreen)
-
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
   const topToolbarRef = _react.default.useRef(null);
@@ -125,26 +132,126 @@ const TableContainerEdit = props => {
 
   // //The virtualizers need to know the scrollable container element
   const tableContainerRef = _react.default.useRef(null);
-  const visibleColumns = table.getVisibleLeafColumns();
-  const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
-  const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
 
-  //we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
-  const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
-    count: visibleColumns.length,
-    estimateSize: index => visibleColumns[index].getSize(),
-    //estimate width of each column for accurate scrollbar dragging
-    getScrollElement: () => tableContainerRef.current,
-    horizontal: true,
-    // measureElement(element) {
+  // const columnSizingState = table.getState().columnSizing;
 
-    //   return element?.getBoundingClientRect().width;
-    // },
-
-    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
-    overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
-  });
-  const columnSizingState = table.getState().columnSizing;
+  const defaultContext = _react.default.useMemo(() => {
+    return [{
+      key: 'INSERT_BEFORE',
+      // label: 'Thêm dòng bên trên',
+      // label: `${t ? t(locale?.add_rows_before ?? 'Add rows before') : 'Add rows before'}`,
+      label: locale?.add_rows_before ?? 'Add rows before',
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
+        fontSize: 14
+      }),
+      children: [{
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_1',
+        label: locale?.add_1 ?? 'Add 1 rows',
+        row: 1
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_10',
+        label: locale?.add_10 ?? 'Add 10 rows',
+        row: 10
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_50',
+        label: locale?.add_50 ?? 'Add 50 rows',
+        row: 50
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_100',
+        label: locale?.add_100 ?? 'Add 100 rows',
+        row: 100
+      }, {
+        parentKey: 'INSERT_BEFORE',
+        key: 'INSERT_BEFORE_ADV',
+        label: locale?.custom ?? 'Custom'
+      }]
+    }, {
+      key: 'INSERT_AFTER',
+      label: locale?.add_rows_after ?? 'Add rows after',
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
+        fontSize: 14
+      }),
+      children: [{
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_1',
+        label: locale?.add_1 ?? 'Add 1 rows',
+        row: 1
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_10',
+        label: locale?.add_10 ?? 'Add 10 rows',
+        row: 10
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_50',
+        label: locale?.add_50 ?? 'Add 50 rows',
+        row: 50
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_100',
+        label: locale?.add_100 ?? 'Add 100 rows',
+        row: 100
+      }, {
+        parentKey: 'INSERT_AFTER',
+        key: 'INSERT_AFTER_ADV',
+        label: locale?.custom ?? 'Custom'
+      }]
+    }, {
+      key: 'INSERT_CHILDREN',
+      // label: 'Insert item children',
+      label: locale?.add_children ?? 'Add children',
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Plus, {
+        fontSize: 14
+      })
+      // children: [
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_1',
+      //     label: 'Thêm 1 dòng',
+      //     row: 1
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_10',
+      //     label: 'Thêm 10 dòng',
+      //     row: 10
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_50',
+      //     label: 'Thêm 50 dòng',
+      //     row: 50
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_100',
+      //     label: 'Thêm 100 dòng',
+      //     row: 100
+      //   },
+      //   {
+      //     parentKey: 'INSERT_AFTER',
+      //     key: 'INSERT_AFTER_ADV',
+      //     label: 'Tùy chỉnh'
+      //   }
+      // ]
+    }, {
+      key: 'DELETE_CONTENT',
+      label: locale?.delete_content ?? 'Delete content',
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_ROWS',
+      label: locale?.delete_rows ?? 'Delete rows',
+      icon: /*#__PURE__*/_react.default.createElement(_becoxyIcons.Trash2, {
+        fontSize: 14
+      })
+    }];
+  }, [locale]);
   const itemsAdd = _react.default.useMemo(() => {
     return [{
       key: '10',
@@ -157,12 +264,14 @@ const TableContainerEdit = props => {
       label: `100 ${t ? t('rows') : 'rows'}`
     }];
   }, [t]);
+  const contextMenuItems = _react.default.useMemo(() => {
+    const a = showDefaultContext !== false ? [...defaultContext] : [];
+    const b = propsContext && propsContext.length > 0 ? [...propsContext, {
+      type: 'divider'
+    }] : [];
+    return [...b, ...a];
+  }, [defaultContext, propsContext, showDefaultContext]);
   const [dataErrors, setDataErrors] = _react.default.useState([]);
-  _react.default.useEffect(() => {
-    requestAnimationFrame(() => {
-      columnVirtualizer.measure();
-    });
-  }, [columnSizingState, columnVirtualizer]);
   _react.default.useEffect(() => {
     if (validate && dataSource && dataSource.length) {
       validateData(dataSource, validate).then(error => {
@@ -173,6 +282,25 @@ const TableContainerEdit = props => {
       });
     }
   }, [validate, dataSource]);
+  const visibleColumns = table.getVisibleLeafColumns();
+  const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
+  const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
+
+  //we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
+  const columnVirtualizer = (0, _reactVirtual.useVirtualizer)({
+    count: visibleColumns.length,
+    estimateSize: index => visibleColumns[index].getSize(),
+    //estimate width of each column for accurate scrollbar dragging
+    getScrollElement: () => tableContainerRef.current,
+    horizontal: true,
+    // measureElement(element) {
+
+    //   return element?.getBoundingClientRect().width;
+    // },
+
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
+    overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
+  });
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
   const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
@@ -1110,6 +1238,174 @@ const TableContainerEdit = props => {
       };
     });
   }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
+  const triggerCommandClick = args => {
+    const {
+      id: idCommand,
+      rowId,
+      rowData,
+      index
+    } = args;
+    const tmpData = [...dataSource];
+    if (idCommand === 'DELETE') {
+      // bật modal confirm
+      if (commandSettings && commandSettings.confirmDialog) {
+        MySwal.fire({
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
+          // icon: 'warning',
+          allowOutsideClick: false,
+          showCancelButton: true,
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
+          customClass: {
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
+          },
+          buttonsStyling: false
+        }).then(async result => {
+          if (result.value) {
+            if (!commandSettings || commandSettings && commandSettings.client !== false) {
+              // client
+
+              // kiểm tra dòng hiện tại có parent
+
+              let newData = [];
+              if (rowData?.parentId) {
+                const parent = (0, _utils.findItemByKey)(tmpData, rowKey, rowData.parentId);
+                const childData = parent?.children ? [...parent.children] : [];
+                const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+                childData.splice(Number(findIndex), 1);
+                const newRowData = {
+                  ...parent,
+                  children: childData
+                };
+                // const newDataSource =  updateArrayByKey(tmpData, newRowData, rowKey as string)
+                newData = (0, _utils.updateArrayByKey)(tmpData, newRowData, rowKey);
+              } else {
+                tmpData.splice(Number(index), 1);
+                newData = [...tmpData];
+              }
+              if (commandClick) {
+                commandClick({
+                  id: idCommand,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  rows: [...newData]
+                });
+              }
+            } else {
+              // server ~~ không làm gì
+              if (commandClick) {
+                commandClick({
+                  id: idCommand,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  rows: [...originData]
+                });
+              }
+            }
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // -------------------
+
+        if (!commandSettings || commandSettings && commandSettings.client !== false) {
+          // client
+
+          let newData2 = [];
+          if (rowData?.parentId) {
+            const parent = (0, _utils.findItemByKey)(originData, rowKey, rowData.parentId);
+            const childData = parent?.children ? [...parent.children] : [];
+            const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+            childData.splice(Number(findIndex), 1);
+            const newRowData = {
+              ...parent,
+              children: childData
+            };
+            newData2 = (0, _utils.updateArrayByKey)(tmpData, newRowData, rowKey);
+          } else {
+            tmpData.splice(Number(index), 1);
+            newData2 = [...tmpData];
+          }
+          if (commandClick) {
+            commandClick({
+              id: idCommand,
+              rowId,
+              rowData,
+              index,
+              rows: [...newData2]
+            });
+          }
+        } else {
+          // server
+          if (commandClick) {
+            commandClick({
+              id: idCommand,
+              rowId,
+              rowData,
+              index,
+              rows: [...originData]
+            });
+          }
+        }
+      }
+    } else {
+      if (commandClick) {
+        commandClick({
+          ...args,
+          rows: originData
+        });
+      }
+    }
+  };
+  const triggerContextMenuClick = args => {
+    if (args.item?.parentKey && args.item.parentKey === 'INSERT_BEFORE') {
+      if (args.item.key === 'INSERT_BEFORE_ADV') {
+        // mở Modal
+
+        // setOpenModalAddRow((prev) => (
+        //   {
+        //     ...prev,
+        //     open: true,
+        //     type: 'INSERT_BEFORE'
+        //   }
+        // ))
+      } else {
+        handleInsertBefore(args.item, args.item.row);
+      }
+      return;
+    }
+    if (args.item?.parentKey && args.item.parentKey === 'INSERT_AFTER') {
+      if (args.item.key === 'INSERT_AFTER_ADV') {
+
+        // setOpenModalAddRow((prev) => (
+        //   {
+        //     ...prev,
+        //     open: true,
+        //     type: 'INSERT_AFTER'
+        //   }
+        // ))
+      } else {
+        handleInsertAfter(args.item, args.item.row);
+      }
+      return;
+    }
+    if (args.item.key === 'INSERT_CHILDREN') {
+      handleInsertChild(args.item);
+      return;
+    }
+    if (args.item.key === 'DELETE_ROWS') {
+      handleDeleteRows(args.item);
+      return;
+    }
+    if (args.item.key === 'DELETE_CONTENT') {
+      handleDeleteContent();
+      return;
+    }
+    contextMenuClick?.(args);
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: id
@@ -1169,21 +1465,6 @@ const TableContainerEdit = props => {
     columnHidden: columnHidden
   })))), /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    // className="container"
-    className: (0, _classnames.default)(`${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
-    }),
-    ref: tableContainerRef,
-    style: {
-      overflow: 'auto',
-      //our scrollable table container
-      position: 'relative',
-      //needed for sticky header
-      // height: tableHeight, //should be a fixed height
-      maxHeight: tableHeight //should be a fixed height
-    }
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
       locale,
@@ -1200,7 +1481,7 @@ const TableContainerEdit = props => {
       recordDoubleClick,
       selectionSettings,
       setIsSelectionChange,
-      onContextMenu,
+      // onContextMenu,
       setSorterChange,
       setFilterChange,
       rangeState,
@@ -1234,44 +1515,33 @@ const TableContainerEdit = props => {
       triggerPaste,
       handleDeleteContent,
       handleAddMulti,
-      dataErrors
+      dataErrors,
+      windowSize
     }
-  }, /*#__PURE__*/_react.default.createElement("table", {
-    // className={`${prefix}-grid-container`}
-    style: {
-      display: 'grid',
-      //  minWidth: table.getTotalSize()
-      width: table.getTotalSize()
-    }
-  }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
-    tableContainerRef: tableContainerRef,
-    columnVirtualizer: columnVirtualizer,
-    table: table,
-    virtualPaddingLeft: virtualPaddingLeft,
-    virtualPaddingRight: virtualPaddingRight,
-    fixedLeftColumns: fixedLeftColumns,
-    fixedRightColumns: fixedRightColumns
-  }), /*#__PURE__*/_react.default.createElement(_TableBody.default, {
-    tableId: id,
-    columnVirtualizer: columnVirtualizer,
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+    contextMenuItems: contextMenuItems,
+    height: tableHeight,
+    id: id,
+    prefix: prefix,
     table: table,
     tableContainerRef: tableContainerRef,
-    virtualPaddingLeft: virtualPaddingLeft,
-    virtualPaddingRight: virtualPaddingRight,
-    fixedLeftColumns: fixedLeftColumns,
-    fixedRightColumns: fixedRightColumns,
-    commandClick: commandClick,
+    commandClick: triggerCommandClick,
+    contextMenuClick: triggerContextMenuClick,
+    contextMenuHidden: contextMenuHidden,
+    contextMenuOpen: contextMenuOpen,
     editAble: editAble,
-    contextMenuItems: contextMenuItems,
-    showEmptyText: showEmptyText
-  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
+    showEmptyText: showEmptyText,
+    summary: summary,
+    dataSource: dataSource,
+    infiniteScroll: infiniteScroll,
+    next: next,
+    loading: loading,
     columnVirtualizer: columnVirtualizer,
-    table: table,
     virtualPaddingLeft: virtualPaddingLeft,
     virtualPaddingRight: virtualPaddingRight,
     fixedLeftColumns: fixedLeftColumns,
     fixedRightColumns: fixedRightColumns
-  }))))), /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: 'ui-rc-toolbar-bottom'
@@ -1291,7 +1561,7 @@ const TableContainerEdit = props => {
     onClick: ({}) => {
       setEditingKey('');
     }
-  })), pagination && /*#__PURE__*/_react.default.createElement(_pagination.default
+  })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}
   , (0, _extends2.default)({}, pagination, {
     rootClassName: 'pagination-template',
@@ -1299,7 +1569,7 @@ const TableContainerEdit = props => {
     responsive: true,
     size: 'small',
     total: pagination.total,
-    pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
+    pageSize: pagination.onChange ? pagination?.pageSize : table.getState().pagination.pageSize,
     pageSizeOptions: [20, 50, 100, 1000, 10000],
     onChange: (page, pageSize) => {
       if (pagination.onChange) {

package/lib/table-component/body/TableBody.d.ts

@@ -1,16 +1,10 @@
-import { type Column, type Table } from "@tanstack/react-table";
-import type { Virtualizer } from "@tanstack/react-virtual";
+import { type Table } from "@tanstack/react-table";
 import type { CommandClick } from "../type";
 import React from "react";
 interface TableBodyProps<T> {
-    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     table: Table<T>;
     tableContainerRef: React.RefObject<HTMLDivElement>;
-    virtualPaddingLeft: number | undefined;
-    virtualPaddingRight: number | undefined;
-    fixedLeftColumns: Column<T, unknown>[];
-    fixedRightColumns: Column<T, unknown>[];
-    commandClick?: (args: CommandClick) => void;
+    commandClick?: (args: CommandClick<T>) => void;
     editAble?: boolean;
     tableId: string;
     showEmptyText?: boolean;

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

@@ -13,6 +13,8 @@ var _useContext = require("../useContext");
 var _rcMasterUi = require("rc-master-ui");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import type { Virtualizer } from "@tanstack/react-virtual";
+
 // import type { Dispatch, SetStateAction } from "react";
 
 const TableBody = ({

package/lib/table-component/body/TableBodyCell.d.ts

@@ -4,7 +4,7 @@ import React from "react";
 import type { VirtualItem } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
     cell: Cell<T, unknown>;
-    commandClick?: (args: CommandClick) => void;
+    commandClick?: (args: CommandClick<T>) => void;
     table: Table<T>;
     virtualRow?: VirtualItem;
 }

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

@@ -22,7 +22,9 @@ const renderCellIndex = props => {
     parrents,
     cell
   } = props;
-  return /*#__PURE__*/_react.default.createElement("span", null, parrents.map(pr => {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, parrents.map(pr => {
     return `${pr.index + 1}.`;
   }), cell.row.index + 1);
 };
@@ -30,7 +32,8 @@ const renderCommand = args => {
   const {
     cell,
     commandClick,
-    id
+    id,
+    data
   } = args;
   const col = cell.column.columnDef.meta ?? {};
   const record = cell.row.original;
@@ -43,7 +46,9 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/_react.default.createElement(_Command.default, {
       id: id,
       key: item.id,
@@ -52,15 +57,14 @@ const renderCommand = args => {
       onClick: () => {
         commandClick?.({
           id: item.id,
-          // rowId: getRowKey(record, index) as any,
           rowId: record.rowId,
           rowData: record,
-          index: cell.row.index
-          // rows: [...resource]
+          index: cell.row.index,
+          rows: [...data]
         });
       }
     });
-  }));
+  })));
 };
 const renderSelection = args => {
   const {
@@ -105,7 +109,9 @@ const TableBodyCell = props => {
     prefix,
     setIsSelectionChange,
     selectionSettings,
-    id
+    id,
+    originData,
+    wrapSettings
   } = (0, _react.useContext)(_useContext.TableContext);
   const columnMeta = cell.column.columnDef.meta ?? {};
   const parrents = cell.row.getParentRows();
@@ -118,12 +124,15 @@ const TableBodyCell = props => {
   return /*#__PURE__*/_react.default.createElement("td", {
     key: cell.id,
     className: (0, _classnames.default)(`${prefix}-grid-cell`, {
-      [`${prefix}-grid-cell-ellipsis`]: true,
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+      [`${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-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
-      display: 'flex',
+      // display: 'flex',
       width: cell.column.getSize(),
       // border: '1px solid #e5e7eb',
       ...(0, _utils.getCommonPinningStyles)(cell.column)
@@ -149,12 +158,15 @@ const TableBodyCell = props => {
   }), cell.column.id === "command" && renderCommand({
     cell,
     commandClick,
-    id
+    id,
+    data: originData
   }), cell.column.id === "selection_column" && renderSelection({
     cell,
     table,
     selectionSettings,
     setIsSelectionChange
-  }), !_constant.nonActionColumn.includes(cell.column.id) && (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
+  }), !_constant.nonActionColumn.includes(cell.column.id) && (isFirstRightPinnedColumn ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())) : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
 };
 var _default = exports.default = TableBodyCell;

package/lib/table-component/body/TableBodyCellEdit.d.ts

@@ -8,7 +8,7 @@ interface TableBodyCellProps<T> {
     columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     tableId: string;
     cell: Cell<T, unknown>;
-    commandClick?: (args: CommandClick) => void;
+    commandClick?: (args: CommandClick<T>) => void;
     virtualRow: VirtualItem;
     [key: string]: any;
 }