es-grid-template 1.8.64 → 1.8.66

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

@@ -0,0 +1,464 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactTable = require("@tanstack/react-table");
+var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
+var _server = _interopRequireDefault(require("react-dom/server"));
+var _utils = require("../hook/utils");
+var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _useContext = require("../useContext");
+var _useColumns = require("../hook/useColumns");
+var _Command = _interopRequireDefault(require("../../table-component/components/command/Command"));
+const renderCellIndex = props => {
+  const {
+    cell,
+    pagination
+  } = props;
+  const parrents = cell.row.getParentRows();
+  if (parrents && parrents.length > 0) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc_cell-content"
+    }, parrents.map(pr => {
+      return `${pr.index + 1}.`;
+    }), cell.row.index + 1);
+  }
+  if (pagination && pagination.onChange) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc_cell-content"
+    }, cell.row.index + (pagination ? ((pagination.currentPage ?? 1) - 1) * (pagination?.pageSize ?? 0) : 0) + 1);
+  }
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, cell.row.index + 1);
+};
+const renderCommand = args => {
+  const {
+    cell,
+    commandClick,
+    id,
+    data
+  } = args;
+  const col = cell.column.columnDef.meta ?? {};
+  const record = cell.row.original;
+
+  // const commandItems = args.cell.column.columnDef?.meta?.commandItems ?? []
+
+  const commands = col.commandItems ? col.commandItems.map(it => {
+    return {
+      ...it,
+      visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
+    };
+  }) : [];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    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,
+      item: item,
+      record: record,
+      onClick: () => {
+        commandClick?.({
+          id: item.id,
+          rowId: record.rowId,
+          rowData: record,
+          index: cell.row.index,
+          rows: [...data]
+        });
+      }
+    });
+  })));
+};
+const renderSelection = args => {
+  const {
+    row
+  } = args.cell;
+  const {
+    cell,
+    expandIconColumnIndex,
+    isDataTree,
+    expanded,
+    setExpanded
+  } = args;
+  const {
+    selectionSettings,
+    setIsSelectionChange,
+    isSelectionChange
+  } = args;
+  const checked = selectionSettings?.type === 'single' || selectionSettings?.checkStrictly ? row.getIsSelected() : row.getIsSelected() || row.getIsAllSubRowsSelected();
+  const indeterminate = selectionSettings?.type === 'single' || selectionSettings?.checkStrictly ? false : row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' || row.getIsSomeSelected();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {}
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.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.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+    checked: checked,
+    indeterminate: indeterminate,
+    onChange: e => {
+      (0, _useColumns.toggleRowSelection)({
+        e,
+        cell,
+        setIsSelectionChange,
+        isSelectionChange,
+        selectionSettings
+      });
+    },
+    disabled: !row.getCanSelect()
+  })));
+};
+const TableBodyCell = props => {
+  const {
+    cell,
+    commandClick,
+    // tableId,
+    table,
+    isEditing,
+    colSpan,
+    groupValue
+  } = props;
+  const {
+    id,
+    prefix,
+    focusedCell,
+    setFocusedCell,
+    // endCell,
+    // startCell,
+    originData,
+    expanded,
+    setExpanded,
+    expandable,
+    isDataTree,
+    setIsSelectionChange,
+    isSelectionChange,
+    selectionSettings,
+    wrapSettings,
+    pagination
+    // dataSource
+  } = _react.default.useContext(_useContext.TableContext);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
+  const record = cell.row.original;
+  const columnMeta = cell.column.columnDef.meta ?? {};
+  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+
+  // const tooltipContent = (isOpenTooltip === false || columnMeta.type === 'checkbox') ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+    value: cell.getValue(),
+    record
+  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
+  const allRows = table.getRowModel().flatRows;
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
+  const colIndex = cell.column.getIndex();
+  const isPinned = cell.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const enableClick = typeof columnMeta.allowSelection === 'function' ? columnMeta.allowSelection(record) : columnMeta.allowSelection;
+  if (cell.column.id === "#") {
+    return /*#__PURE__*/_react.default.createElement("td", {
+      key: cell.id,
+      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
+        [`${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?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
+      }),
+      style: {
+        ...cellStyles,
+        // display: 'flex',
+        userSelect: 'none',
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        ...(0, _utils.getCommonPinningStyles)(cell.column)
+      },
+      onClick: e => {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          (0, _useColumns.toggleRowSelection)({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+        }
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
+      // onClick: cell.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.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), renderCellIndex({
+      cell,
+      pagination
+    }));
+  }
+  if (cell.column.id === "command") {
+    return /*#__PURE__*/_react.default.createElement("td", {
+      key: cell.id,
+      className: (0, _classnames.default)(`${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?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
+      }),
+      style: {
+        ...cellStyles,
+        // display: 'flex',
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        ...(0, _utils.getCommonPinningStyles)(cell.column)
+      }
+    }, renderCommand({
+      cell,
+      commandClick,
+      id,
+      data: originData
+    }));
+  }
+  if (cell.column.id === "selection_column") {
+    return /*#__PURE__*/_react.default.createElement("td", {
+      key: cell.id,
+      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-selection`, {
+        [`${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?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
+      }),
+      style: {
+        ...cellStyles,
+        // display: 'flex',
+        minHeight: 36,
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        ...(0, _utils.getCommonPinningStyles)(cell.column)
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('ui-rc_cell-content', {})
+    }, cell.column.id === "selection_column" && renderSelection({
+      cell,
+      table,
+      selectionSettings,
+      setIsSelectionChange,
+      expanded,
+      isDataTree,
+      setExpanded,
+      expandIconColumnIndex,
+      isSelectionChange
+    })));
+  }
+  return /*#__PURE__*/_react.default.createElement("td", {
+    key: cell.id,
+    colSpan: colSpan,
+    ref: el => {
+      if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
+        el?.focus();
+      }
+    },
+    tabIndex: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? 0 : -1,
+    "data-col-index": colIndex,
+    "data-row-index": rowNumber,
+    "data-col-key": cell.column.id
+    // data-row-key={cell.row.id}
+    ,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent))
+    // data-tooltip-delay-show={500}
+    ,
+
+    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-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+      // [`${prefix}-grid-cell-selected`]: isCellSelected,
+
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+    }),
+    style: {
+      ...cellStyles,
+      // display: 'flex',
+      width: cell.column.getSize(),
+      minWidth: cell.column.getSize(),
+      minHeight: 36,
+      ...(0, _utils.getCommonPinningStyles)(cell.column)
+    },
+    onMouseEnter: e => {
+      if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+        setIsOpenTooltip(true);
+      }
+    },
+    onKeyDown: e => {
+      const flatRows = table.getRowModel().flatRows;
+      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
+        const nextIndex = cell.row.index + 1;
+        // const nextIndex = rowNumber + 1
+
+        const nextId = flatRows[nextIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.key === 'ArrowUp' && rowNumber > 0) {
+        const prevIndex = cell.row.index - 1;
+        const nextId = flatRows[prevIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
+        (0, _useColumns.toggleRowSelection)({
+          e,
+          cell,
+          setIsSelectionChange,
+          isSelectionChange,
+          selectionSettings
+        });
+        cell.row.getToggleSelectedHandler()(e);
+      }
+    },
+    onClick: e => {
+      const selection = window.getSelection();
+      const text = selection ? selection.toString() : "";
+      if (text.length > 0 || enableClick === false) {} else {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          (0, _useColumns.toggleRowSelection)({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: cell.row.id
+          });
+        }
+      }
+    }
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('ui-rc_cell-content', {})
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
+    // onClick: cell.row.getToggleExpandedHandler(),
+
+    // onClick: (e) => {
+    //   e.stopPropagation()
+    //   cell.row.toggleExpanded()
+    // },
+
+    onClick: e => {
+      e.stopPropagation();
+      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.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), groupValue ? groupValue : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, groupValue ? groupValue : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+};
+var _default = exports.default = TableBodyCell;

package/lib/table-virtuoso/body/TableBodyRow.d.ts

@@ -0,0 +1,13 @@
+import { type Row, type Table } from "@tanstack/react-table";
+import type { CommandClick } from "../../table-component/type";
+import React from "react";
+interface TableBodyRowProps<T> {
+    tableId: string;
+    table: Table<T>;
+    row: Row<T>;
+    commandClick?: (args: CommandClick<T>) => void;
+    editAble?: boolean;
+    [key: string]: any;
+}
+declare const TableBodyRow: <RecordType extends object>({ tableId, table, row, virtualRow, commandClick, contextMenuItems, onContextMenu, ...rest }: TableBodyRowProps<RecordType>) => React.JSX.Element;
+export default TableBodyRow;

package/lib/table-virtuoso/body/TableBodyRow.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _TableBodyCell = _interopRequireDefault(require("./TableBodyCell"));
+var _reactTable = require("@tanstack/react-table");
+var _react = _interopRequireDefault(require("react"));
+var _useContext = require("../useContext");
+var _classnames = _interopRequireDefault(require("classnames"));
+const TableBodyRow = ({
+  tableId,
+  table,
+  row,
+  virtualRow,
+  commandClick,
+  contextMenuItems,
+  onContextMenu,
+  ...rest
+}) => {
+  const {
+    prefix,
+    recordDoubleClick,
+    focusedCell,
+    rowClassName,
+    onRowStyles,
+    groupSetting
+  } = _react.default.useContext(_useContext.TableContext);
+  const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
+  const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
+  const visibleCells = row.getVisibleCells();
+  const allCells = row.getAllCells();
+  return /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({
+    key: row.id,
+    "data-row-key": row.id
+  }, rest, {
+    className: (0, _classnames.default)(`${prefix}-grid-row ${rowClass ?? ''}`, {
+      [`${prefix}-grid-row-selected`]: row.getIsSelected(),
+      [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId,
+      [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0
+    }),
+    style: {
+      ...rowStyles
+    },
+    onDoubleClick: e => {
+      recordDoubleClick?.({
+        e,
+        rowData: row.original,
+        rowIndex: row.index
+      });
+    },
+    onContextMenu: e => {
+      if (contextMenuItems && contextMenuItems.length) {
+        onContextMenu?.(row.original)(e);
+      }
+    }
+  }), visibleCells.map(cell => {
+    const nonGroupColumns = visibleCells.filter(col => col.column.id !== 'selection_column' && col.column.id !== '#');
+    const firstNonGroupColumn = nonGroupColumns[0];
+
+    // const colSpan  = row.subRows && cell.column.id === firstNonGroupColumn?.id ? (groupSetting?.groupColumnSpan ?? 2)
+    const colSpan = row.subRows && row.subRows.length > 0 && cell.column.id === firstNonGroupColumn?.column.id ? 2 : row.subRows && nonGroupColumns[1].column.id === cell.column.id ? 0 : 1;
+    if (row.subRows && row.subRows.length > 0 && colSpan === 0) {
+      return null;
+    }
+
+    // if (groupAble && column.field === firstNonGroupColumn?.field && row.subRows) {
+    if (cell.column.id === firstNonGroupColumn.column.id && row.subRows && row.subRows.length > 0) {
+      const {
+        field
+      } = row.original ?? {};
+      const cellGroup = allCells.find(it => it.column.id === field);
+      const headerContext = cellGroup && groupSetting?.showHeaderColumn !== false ? {
+        table,
+        column: cellGroup.column,
+        header: {
+          id: cellGroup.column.id,
+          column: cellGroup.column,
+          depth: 0,
+          index: 0,
+          subHeaders: []
+        }
+      } : undefined;
+      const cellValue = cellGroup ? cellGroup.getValue() : '';
+      const headertext = headerContext && cellGroup ? (0, _reactTable.flexRender)(cellGroup.column.columnDef.header, headerContext) : '';
+      const cellContent = cellGroup ? (0, _reactTable.flexRender)(cellGroup.column.columnDef.cell, cellGroup.getContext()) : '';
+      const groupValue = typeof groupSetting?.groupTemplate === 'function' ? groupSetting?.groupTemplate({
+        column: cellGroup?.column.columnDef.meta,
+        rowData: row.original,
+        value: cellValue
+      }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
+      return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, {
+        table: table,
+        tableId: tableId,
+        key: cell.id,
+        cell: cell,
+        commandClick: commandClick,
+        virtualRow: virtualRow,
+        isEditing: false,
+        colSpan: colSpan ?? 1,
+        groupValue: groupValue
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, {
+      table: table,
+      tableId: tableId,
+      key: cell.id,
+      cell: cell,
+      commandClick: commandClick,
+      virtualRow: virtualRow,
+      isEditing: false,
+      colSpan: colSpan ?? 1
+    });
+  }));
+};
+var _default = exports.default = TableBodyRow;

package/lib/table-virtuoso/footer/TableFooterCell.d.ts

@@ -0,0 +1,7 @@
+import type { Column } from "@tanstack/react-table";
+import React from "react";
+interface TableFooterCellProps<T> {
+    column: Column<T, any>;
+}
+declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => React.JSX.Element;
+export default TableFooterCell;

package/lib/table-virtuoso/footer/TableFooterCell.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../hook/utils");
+var _useContext = require("../useContext");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../../grid-component/hooks");
+var _reactNumericComponent = require("react-numeric-component");
+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 TableFooterCell = ({
+  column
+}) => {
+  const {
+    prefix,
+    format,
+    dataSource
+  } = (0, _react.useContext)(_useContext.TableContext);
+  const col = column.columnDef.meta ?? {};
+  const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
+  const thousandSeparator = cellFormat?.thousandSeparator;
+  const decimalSeparator = cellFormat?.decimalSeparator;
+
+  // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+  const dec = cellFormat?.decimalScale;
+
+  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
+  const sumValue = col.type === 'number' ? (0, _hooks.sumByField)(dataSource, col?.field) : 0;
+  const value = !(0, _utils.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+  const numberValue = Number(value);
+  const numericFormatProps = {
+    thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+    decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+    allowNegative: cellFormat?.allowNegative ?? false,
+    prefix: cellFormat?.prefix,
+    suffix: cellFormat?.suffix,
+    decimalScale: dec,
+    fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+  };
+  return /*#__PURE__*/_react.default.createElement("th", {
+    className: (0, _classnames.default)(`${prefix}-grid-cell`, {
+      // [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      // [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      // [`${prefix}-grid-cell-text-right`]: true
+    })
+    // key={column.id}
+    ,
+    style: {
+      // display: 'flex',
+      ...(0, _utils.getCommonPinningStyles)(column),
+      minWidth: column?.getSize(),
+      height: 40
+    }
+  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
+};
+var _default = exports.default = TableFooterCell;

package/lib/table-virtuoso/header/TableHeadCell.d.ts

@@ -0,0 +1,14 @@
+import type { Table } from '@tanstack/react-table';
+import { type Header } from '@tanstack/react-table';
+import React from 'react';
+interface TableHeadCellProps<T> {
+    t?: any;
+    table: Table<T>;
+    header: Header<T, unknown>;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    colSpan: any;
+    rowSpan: any;
+    rowIndex: number;
+}
+declare const TableHeadCell: <RecordType extends object>(props: TableHeadCellProps<RecordType>) => React.JSX.Element;
+export default TableHeadCell;