es-grid-template 1.7.26 → 1.7.28

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,25 +109,32 @@ 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();
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
-  const cellContent = (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
   const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
   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)
     },
     "data-tooltip-id": `${id}-tooltip-content`,
@@ -147,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;
 }

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _reactTable = require("@tanstack/react-table");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
+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"));
@@ -15,8 +16,6 @@ var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _EditableCell = _interopRequireDefault(require("./EditableCell"));
 var _constant = require("../hook/constant");
-// import ReactDOMServer from 'react-dom/server'
-
 // import { nonActionColumn } from "../hook/constant";
 
 // import type { Dispatch, SetStateAction } from "react";
@@ -36,7 +35,8 @@ const renderCommand = args => {
   const {
     cell,
     commandClick,
-    id
+    id,
+    data
   } = args;
   const col = cell.column.columnDef.meta ?? {};
   const record = cell.row.original;
@@ -61,8 +61,8 @@ const renderCommand = args => {
           // rowId: getRowKey(record, index) as any,
           rowId: record.rowId,
           rowData: record,
-          index: cell.row.index
-          // rows: [...resource]
+          index: cell.row.index,
+          rows: [...data]
         });
       }
     });
@@ -132,14 +132,11 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-
-  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
-  // const hasValue = html.trim().length > 0;
-
+  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+  const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
+  const hasValue = html.trim().length > 0;
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
-  // const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined
-
+  const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record);
   // const allRows = table.getRowModel().rows;
   const allRows = table.getRowModel().flatRows;
@@ -192,7 +189,9 @@ const TableBodyCellEdit = props => {
       className: (0, _classnames.default)(`${prefix}-grid-cell`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${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'
       }),
       style: {
         display: 'flex',
@@ -244,7 +243,9 @@ const TableBodyCellEdit = props => {
       className: (0, _classnames.default)(`${prefix}-grid-cell`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${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'
       }),
       style: {
         display: 'flex',
@@ -255,7 +256,8 @@ const TableBodyCellEdit = props => {
     }, renderCommand({
       cell,
       commandClick,
-      id
+      id,
+      data: originData
     }));
   }
   if (cell.column.id === "selection_column") {
@@ -264,7 +266,9 @@ const TableBodyCellEdit = props => {
       className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable111 `, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${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'
       }),
       style: {
         display: 'flex',
@@ -441,6 +445,7 @@ const TableBodyCellEdit = props => {
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
   function handleMouseDown(rowId, colId) {
+    console.log('aaaaaa');
     setIsSelecting?.(true);
     if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
       setStartCell?.({
@@ -746,11 +751,9 @@ const TableBodyCellEdit = props => {
     "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={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
-    ,
-
+    "data-row-key": cell.row.id,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": !isEditing && !hasValue && !message ? undefined : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent)),
     className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -766,7 +769,9 @@ const TableBodyCellEdit = props => {
       'cell-paste-border-top': isInRangePaste && isTopPaste && (pasteRangeState.endRowIndex ?? 0) < (endRowIndex ?? 0),
       'cell-paste-border-left': isInRangePaste && isLeftPaste,
       [`${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',
@@ -783,13 +788,24 @@ const TableBodyCellEdit = props => {
         });
       } else {
         handleMouseDown(cell.row.id, cell.column.id);
+        if (editingKey) {
+          setTimeout(() => {
+            setEditingKey?.('');
+            reset?.();
+          });
+        }
+
+        // reset?.()
       }
-      if (record[rowKey] !== editingKey) {
-        setTimeout(() => {
-          setEditingKey?.('');
-          reset?.();
-        });
-      }
+
+      // if (record[rowKey] !== editingKey) {
+
+      //   setTimeout(() => {
+      //     // setEditingKey?.('')
+      //     reset?.()
+      //   })
+
+      // }
     },
     onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
     onMouseUp: e => handleMouseUp(e),

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

@@ -1,5 +1,5 @@
 import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
-import type { Column, Row, Table } from "@tanstack/react-table";
+import { type Column, type Row, type Table } from "@tanstack/react-table";
 import type { CommandClick } from "../type";
 import React from "react";
 interface TableBodyRowProps<T> {
@@ -13,9 +13,9 @@ interface TableBodyRowProps<T> {
     virtualRow: VirtualItem;
     fixedLeftColumns: Column<T, unknown>[];
     fixedRightColumns: Column<T, unknown>[];
-    commandClick?: (args: CommandClick) => void;
+    commandClick?: (args: CommandClick<T>) => void;
     editAble?: boolean;
     [key: string]: any;
 }
-declare const TableBodyRow: <RecordType extends object>({ tableId, table, columnVirtualizer, row, rowVirtualizer, virtualPaddingLeft, virtualPaddingRight, virtualRow, fixedLeftColumns, fixedRightColumns, commandClick, editAble, isEditing, contextMenuItems, ...rest }: TableBodyRowProps<RecordType>) => React.JSX.Element;
+declare const TableBodyRow: <RecordType extends object>({ tableId, table, columnVirtualizer, row, rowVirtualizer, virtualPaddingLeft, virtualPaddingRight, virtualRow, fixedLeftColumns, fixedRightColumns, commandClick, editAble, isEditing, contextMenuItems, onContextMenu, ...rest }: TableBodyRowProps<RecordType>) => React.JSX.Element;
 export default TableBodyRow;

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

@@ -26,12 +26,12 @@ const TableBodyRow = ({
   editAble,
   isEditing,
   contextMenuItems,
+  onContextMenu,
   ...rest
 }) => {
   const {
     prefix,
-    recordDoubleClick,
-    onContextMenu
+    recordDoubleClick
   } = _react.default.useContext(_useContext.TableContext);
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -57,8 +57,8 @@ const TableBodyRow = ({
       //this should always be a `style` as it changes on scroll
       // width: '100%',
       // height: isEditing ? '36px' : undefined,
-      height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size
+      height: isEditing ? virtualRow.size : undefined
+      // minHeight: isEditing ? undefined : virtualRow.size
     },
     onDoubleClick: e => {
       recordDoubleClick?.({
@@ -72,8 +72,6 @@ const TableBodyRow = ({
         onContextMenu?.(row.original)(e);
       }
     }
-
-    // onContextMenu={onContextMenu(row.original)}
   }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
     const cell = row.getVisibleCells().find(c => c.column.id === column.id);
     if (editAble) {

package/lib/table-component/footer/TableFooter.d.ts

@@ -1,13 +1,7 @@
-import type { Column, Table } from "@tanstack/react-table";
-import type { Virtualizer } from "@tanstack/react-virtual";
+import type { Table } from "@tanstack/react-table";
 import React from "react";
 interface TableFooterProps<T> {
-    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     table: Table<T>;
-    virtualPaddingLeft: number | undefined;
-    virtualPaddingRight: number | undefined;
-    fixedLeftColumns: Column<T, unknown>[];
-    fixedRightColumns: Column<T, unknown>[];
 }
-declare const TableFooter: <RecordType extends object>({ columnVirtualizer, table, virtualPaddingLeft, virtualPaddingRight, ...rest }: TableFooterProps<RecordType>) => React.JSX.Element;
+declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => React.JSX.Element;
 export default TableFooter;

package/lib/table-component/footer/TableFooter.js

@@ -5,18 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _TableFooterRow = _interopRequireDefault(require("./TableFooterRow"));
 var _useContext = require("../useContext");
 var _react = _interopRequireWildcard(require("react"));
 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";
+
 const TableFooter = ({
-  columnVirtualizer,
-  table,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  ...rest
+  // columnVirtualizer,
+  table
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
+  // ...rest
 }) => {
   const {
     prefix
@@ -29,14 +30,15 @@ const TableFooter = ({
       bottom: 0,
       zIndex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_TableFooterRow.default, (0, _extends2.default)({
-    table: table,
-    columnVirtualizer: columnVirtualizer,
+  }, /*#__PURE__*/_react.default.createElement(_TableFooterRow.default, {
+    table: table
+    // columnVirtualizer={columnVirtualizer}
+    ,
     headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1]
     // key={headerGroup.id}
-    ,
-    virtualPaddingLeft: virtualPaddingLeft,
-    virtualPaddingRight: virtualPaddingRight
-  }, rest)));
+    // virtualPaddingLeft={virtualPaddingLeft}
+    // virtualPaddingRight={virtualPaddingRight}
+    // {...rest}
+  }));
 };
 var _default = exports.default = TableFooter;

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

@@ -1,10 +1,7 @@
-import type { Header } from "@tanstack/react-table";
-import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
+import type { Column } from "@tanstack/react-table";
 import React from "react";
 interface TableFooterCellProps<T> {
-    columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
-    header: Header<T, unknown>;
-    column: VirtualItem;
+    column: Column<T, any>;
 }
-declare const TableFooterCell: <RecordType extends object>({ header }: TableFooterCellProps<RecordType>) => React.JSX.Element;
+declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => React.JSX.Element;
 export default TableFooterCell;

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

@@ -13,22 +13,24 @@ 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; }
+// import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
+
 // import type { Person } from "../makeData";
 
 // import type { Person } from "../../tanstack-table/makeData";
 
 const TableFooterCell = ({
-  header
+  column
 }) => {
-  const isPinned = header.column.getIsPinned();
-  const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
-  const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
   const {
     prefix,
     format,
     dataSource
   } = (0, _react.useContext)(_useContext.TableContext);
-  const col = header.column.columnDef.meta ?? {};
+  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;
@@ -61,16 +63,18 @@ const TableFooterCell = ({
       //  [`${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-right-first`]: isFirstRightPinnedColumn
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-right`]: true
     }),
-    key: header.id,
-    colSpan: header.colSpan,
+    key: column.id
+    // colSpan={header.colSpan}
+    ,
     style: {
       display: 'flex',
-      ...(0, _utils.getCommonPinningStyles)(header.column),
-      width: header?.getSize() ?? header.column.getSize(),
+      ...(0, _utils.getCommonPinningStyles)(column),
+      width: column?.getSize() ?? column.getSize(),
       backgroundColor: "#fafafa"
     }
-  }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement("span", null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
+  }, 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-component/footer/TableFooterRow.d.ts

@@ -1,14 +1,8 @@
-import type { Column, HeaderGroup, Table } from "@tanstack/react-table";
-import type { Virtualizer } from "@tanstack/react-virtual";
+import type { HeaderGroup, Table } from "@tanstack/react-table";
 import React from "react";
 interface TableFooterRowProps<T> {
     table: Table<T>;
-    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     headerGroup: HeaderGroup<T>;
-    virtualPaddingLeft: number | undefined;
-    virtualPaddingRight: number | undefined;
-    fixedLeftColumns: Column<T, unknown>[];
-    fixedRightColumns: Column<T, unknown>[];
 }
-declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, columnVirtualizer }: TableFooterRowProps<RecordType>) => React.JSX.Element;
+declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, }: TableFooterRowProps<RecordType>) => React.JSX.Element;
 export default TableFooterRow;

package/lib/table-component/footer/TableFooterRow.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _TableFooterCell = _interopRequireDefault(require("./TableFooterCell"));
 var _react = _interopRequireDefault(require("react"));
+// import type { Virtualizer } from "@tanstack/react-virtual";
 // import type { Person } from "../makeData";
 
 // import type { Person } from "../../tanstack-table/makeData";
@@ -15,15 +16,23 @@ var _react = _interopRequireDefault(require("react"));
 const TableFooterRow = ({
   table,
   // columnVirtualizer,
-  headerGroup,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  fixedLeftColumns,
-  fixedRightColumns,
+  headerGroup
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
+  // fixedLeftColumns,
+  // fixedRightColumns,
   // virtualColumns,
-  columnVirtualizer
+  // columnVirtualizer
 }) => {
-  const virtualColumns = columnVirtualizer.getVirtualItems();
+  // const virtualColumns = columnVirtualizer.getVirtualItems();
+
+  // const a  =  table.getVisibleFlatColumns()
+  const visibleColumns = table.getVisibleLeafColumns();
+
+  // console.log('a', a)
+
+  // const 
+
   return /*#__PURE__*/_react.default.createElement("tr", {
     // data-index={headerGroup.id}
     key: headerGroup.id,
@@ -34,48 +43,14 @@ const TableFooterRow = ({
       borderTop: "1px solid #e0e0e0",
       height: 37
     }
-  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+  }, visibleColumns.map(header => {
     return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
-      columnVirtualizer: columnVirtualizer,
-      key: column.id,
-      header: headerGroup.headers.find(h => h.column.id === column.id),
-      column: column
+      key: header.id
+      // header={header as any}
+      ,
+      column: header
+      // columnVirtualizer={columnVirtualizer}
     });
-  }) : null, virtualPaddingLeft ? /*#__PURE__*/_react.default.createElement("td", {
-    className: "",
-    style: {
-      display: "flex",
-      width: virtualPaddingLeft
-    }
-  }) : null, virtualColumns.map(virtualColumn => {
-    const header = headerGroup.headers[virtualColumn.index];
-    const isFixed = table.getState().columnPinning.left?.includes(header.column.id) || table.getState().columnPinning.right?.includes(header.column.id);
-    // const isFixed = table.getState().columnPinning.left?.includes(header.column.id)
-
-    if (header && !isFixed) {
-      return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
-        key: header.id,
-        header: header,
-        column: virtualColumn,
-        columnVirtualizer: columnVirtualizer
-      });
-    }
-    return null;
-  }),
-  //fake empty column to the right for virtualization scroll padding
-  fixedRightColumns.length > 0 ? fixedRightColumns.map(column => /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
-    key: column.id,
-    header: headerGroup.headers.find(h => h.column.id === column.id),
-    column: column
-  })) : null, virtualPaddingRight ?
-  /*#__PURE__*/
-  //fake empty column to the right for virtualization scroll padding
-  _react.default.createElement("td", {
-    className: "",
-    style: {
-      display: "flex",
-      width: virtualPaddingRight
-    }
-  }) : null);
+  }));
 };
 var _default = exports.default = TableFooterRow;

package/lib/table-component/header/TableHead.d.ts

@@ -1,14 +1,15 @@
-import type { Column, Table } from '@tanstack/react-table';
+import type { Column } from '@tanstack/react-table';
+import { type Table } from '@tanstack/react-table';
 import { type Virtualizer } from '@tanstack/react-virtual';
 import React from 'react';
 interface TableHeadProps<T> {
     tableContainerRef: React.RefObject<HTMLDivElement>;
-    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     table: Table<T>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     virtualPaddingLeft: number | undefined;
     virtualPaddingRight: number | undefined;
     fixedLeftColumns: Column<T, unknown>[];
     fixedRightColumns: Column<T, unknown>[];
 }
-declare const TableHead: <RecordType extends object>({ tableContainerRef, columnVirtualizer, table, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns }: TableHeadProps<RecordType>) => React.JSX.Element;
+declare const TableHead: <RecordType extends object>({ columnVirtualizer, table, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns }: TableHeadProps<RecordType>) => React.JSX.Element;
 export default TableHead;