es-grid-template 1.7.26 → 1.7.28

package/es/table-component/TableContainerEdit.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from "react";
-import TableBody from "./body/TableBody";
-import TableHead from "./header/TableHead";
-import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getFormat, getRowIdsBetween, getSelectedCellMatrix, isEditable, isFormattedNumber, newGuid, sumSize, unFlattenData, updateArrayByKey, updateOrInsert } from "./hook/utils";
+import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getFormat, getRowIdsBetween, getSelectedCellMatrix, isEditable, isFormattedNumber, newGuid, sumSize,
+// sumSize,
+unFlattenData, updateArrayByKey, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useForm } from 'react-hook-form';
 import { Button, Modal, Typography, Dropdown } from "antd";
@@ -12,9 +12,12 @@ import { TableContext } from "./useContext";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Toolbar } from "rc-master-ui";
 import classNames from "classnames";
-import { Maximize, Minimize } from "becoxy-icons";
+import { Maximize, Minimize, Plus, Trash2 } from "becoxy-icons";
 import { ColumnsChoose } from "./ColumnsChoose";
-import TableFooter from "./footer/TableFooter";
+import TableWrapper from "./table/TableWrapper";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+const MySwal = withReactContent(Swal);
 const {
   Paragraph,
   Title
@@ -69,8 +72,8 @@ const TableContainerEdit = props => {
     // triggerFilter,
     selectionSettings,
     setIsSelectionChange,
-    onContextMenu,
-    contextMenuItems,
+    // onContextMenu,
+    contextMenuItems: propsContext,
     setSorterChange,
     setFilterChange,
     // tableHeight,
@@ -100,7 +103,18 @@ const TableContainerEdit = props => {
     propsColumns,
     triggerChangeColumns,
     columnHidden,
-    showEmptyText
+    showEmptyText,
+    isFullScreen,
+    setIsFullScreen,
+    infiniteScroll,
+    windowSize,
+    next,
+    loading,
+    contextMenuOpen,
+    contextMenuClick,
+    contextMenuHidden,
+    showDefaultContext,
+    commandSettings
   } = props;
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -111,26 +125,126 @@ const TableContainerEdit = props => {
 
   // //The virtualizers need to know the scrollable container element
   const tableContainerRef = React.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 = 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.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.createElement(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.createElement(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.createElement(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.createElement(Trash2, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_ROWS',
+      label: locale?.delete_rows ?? 'Delete rows',
+      icon: /*#__PURE__*/React.createElement(Trash2, {
+        fontSize: 14
+      })
+    }];
+  }, [locale]);
   const itemsAdd = React.useMemo(() => {
     return [{
       key: '10',
@@ -143,12 +257,14 @@ const TableContainerEdit = props => {
       label: `100 ${t ? t('rows') : 'rows'}`
     }];
   }, [t]);
+  const contextMenuItems = React.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.useState([]);
-  React.useEffect(() => {
-    requestAnimationFrame(() => {
-      columnVirtualizer.measure();
-    });
-  }, [columnSizingState, columnVirtualizer]);
   React.useEffect(() => {
     if (validate && dataSource && dataSource.length) {
       validateData(dataSource, validate).then(error => {
@@ -159,6 +275,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 = 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)) : [];
@@ -206,7 +341,7 @@ const TableContainerEdit = props => {
   const [endPasteCell, setEndPasteCell] = React.useState(undefined);
   const [isSelecting, setIsSelecting] = React.useState(false);
   const [isPasting, setIsPasting] = React.useState(false);
-  const [isFullScreen] = React.useState(false);
+  // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = React.useState(0);
   const rowsFocus = React.useMemo(() => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
@@ -1096,6 +1231,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 = 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 = 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 = 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 = 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.createElement("div", {
     ref: containerRef,
     id: id
@@ -1109,7 +1412,7 @@ const TableContainerEdit = props => {
       alignItems: 'center',
       gap: '.75rem'
     }
-  }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
@@ -1117,18 +1420,6 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/React.createElement(Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
     mode: 'scroll'
-  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
-    fontSize: 16
-    // onClick={() => handleFullScreen?.()}
-    ,
-    "data-tooltip-id": "tooltip-icon",
-    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
-  }) : /*#__PURE__*/React.createElement(Maximize, {
-    fontSize: 16
-    // onClick={() => handleFullScreen?.()}
-    ,
-    "data-tooltip-id": "tooltip-icon",
-    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -1144,7 +1435,21 @@ const TableContainerEdit = props => {
     showTotal: (total, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/React.createElement(Maximize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
     columns: columns,
     originColumns: propsColumns,
     t: t,
@@ -1153,21 +1458,6 @@ const TableContainerEdit = props => {
     columnHidden: columnHidden
   })))), /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
-  }, /*#__PURE__*/React.createElement("div", {
-    // className="container"
-    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
-    }),
-    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.createElement(TableContext.Provider, {
     value: {
       locale,
@@ -1184,7 +1474,7 @@ const TableContainerEdit = props => {
       recordDoubleClick,
       selectionSettings,
       setIsSelectionChange,
-      onContextMenu,
+      // onContextMenu,
       setSorterChange,
       setFilterChange,
       rangeState,
@@ -1218,43 +1508,33 @@ const TableContainerEdit = props => {
       triggerPaste,
       handleDeleteContent,
       handleAddMulti,
-      dataErrors
-    }
-  }, /*#__PURE__*/React.createElement("table", {
-    // className={`${prefix}-grid-container`}
-    style: {
-      display: 'grid'
-      //  minWidth: table.getTotalSize()
+      dataErrors,
+      windowSize
     }
-  }, /*#__PURE__*/React.createElement(TableHead, {
-    tableContainerRef: tableContainerRef,
-    columnVirtualizer: columnVirtualizer,
-    table: table,
-    virtualPaddingLeft: virtualPaddingLeft,
-    virtualPaddingRight: virtualPaddingRight,
-    fixedLeftColumns: fixedLeftColumns,
-    fixedRightColumns: fixedRightColumns
-  }), /*#__PURE__*/React.createElement(TableBody, {
-    tableId: id,
-    columnVirtualizer: columnVirtualizer,
+  }, /*#__PURE__*/React.createElement(TableWrapper, {
+    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.createElement(TableFooter, {
+    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.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: 'ui-rc-toolbar-bottom'
@@ -1274,7 +1554,7 @@ const TableContainerEdit = props => {
     onClick: ({}) => {
       setEditingKey('');
     }
-  })), pagination && /*#__PURE__*/React.createElement(Pagination
+  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}
   , _extends({}, pagination, {
     rootClassName: 'pagination-template',
@@ -1282,7 +1562,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/es/table-component/body/TableBody.d.ts

@@ -1,16 +1,10 @@
-import type { Column, 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/es/table-component/body/TableBody.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import TableBodyRow from "./TableBodyRow";
+// import type { Virtualizer } from "@tanstack/react-virtual";
 import { useVirtualizer } from "@tanstack/react-virtual";
 // import type { Dispatch, SetStateAction } from "react";
 import React, { Fragment } from "react";
@@ -64,6 +65,33 @@ const TableBody = ({
   })))) : /*#__PURE__*/React.createElement(Fragment, null, virtualRows.map(virtualRow => {
     const row = rows[virtualRow.index];
     const isEditing = row.id === editingKey;
+
+    // return (
+    //   <tr key={row.id}>
+    //     {row.getVisibleCells().map((cell) => (
+    //       <td
+    //         key={cell.id}
+    //         style={{
+    //           padding: '12px',
+    //           whiteSpace: 'nowrap',
+    //           fontSize: '0.875rem',
+    //           color: '#6b7280',
+    //           border: '1px solid #e5e7eb',
+    //           width: cell.column.getSize(),
+    //           maxWidth: cell.column.getSize(),
+    //           overflow: "hidden",
+    //           ...getCommonPinningStyles(cell.column)
+    //         }}>
+
+    //           {cell.column.id}
+
+    //         {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
+
+    //       </td>
+    //     ))}
+    //   </tr>
+    // )
+
     return /*#__PURE__*/React.createElement(TableBodyRow, _extends({}, rest, {
       table: table,
       tableId: tableId,

package/es/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;
 }