es-grid-template 1.7.26 → 1.7.28

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

@@ -13,7 +13,9 @@ const renderCellIndex = props => {
     parrents,
     cell
   } = props;
-  return /*#__PURE__*/React.createElement("span", null, parrents.map(pr => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, parrents.map(pr => {
     return `${pr.index + 1}.`;
   }), cell.row.index + 1);
 };
@@ -21,7 +23,8 @@ const renderCommand = args => {
   const {
     cell,
     commandClick,
-    id
+    id,
+    data
   } = args;
   const col = cell.column.columnDef.meta ?? {};
   const record = cell.row.original;
@@ -34,7 +37,9 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/React.createElement(Command, {
       id: id,
       key: item.id,
@@ -43,15 +48,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 {
@@ -96,25 +100,32 @@ const TableBodyCell = props => {
     prefix,
     setIsSelectionChange,
     selectionSettings,
-    id
+    id,
+    originData,
+    wrapSettings
   } = 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 = flexRender(cell.column.columnDef.cell, cell.getContext());
+  const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
   return /*#__PURE__*/React.createElement("td", {
     key: cell.id,
     className: classNames(`${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',
       ...getCommonPinningStyles(cell.column)
     },
     "data-tooltip-id": `${id}-tooltip-content`,
@@ -138,12 +149,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
-  }), !nonActionColumn.includes(cell.column.id) && flexRender(cell.column.columnDef.cell, cell.getContext()));
+  }), !nonActionColumn.includes(cell.column.id) && (isFirstRightPinnedColumn ? /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, flexRender(cell.column.columnDef.cell, cell.getContext())) : flexRender(cell.column.columnDef.cell, cell.getContext())));
 };
 export default TableBodyCell;

package/es/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/es/table-component/body/TableBodyCellEdit.js

@@ -1,8 +1,7 @@
 import { flexRender } from "@tanstack/react-table";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-
-// import ReactDOMServer from 'react-dom/server'
+import ReactDOMServer from 'react-dom/server';
 import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, flattenArray, flattenData,
 // getCellsByPosition,
 getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
@@ -29,7 +28,8 @@ const renderCommand = args => {
   const {
     cell,
     commandClick,
-    id
+    id,
+    data
   } = args;
   const col = cell.column.columnDef.meta ?? {};
   const record = cell.row.original;
@@ -54,8 +54,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]
         });
       }
     });
@@ -125,14 +125,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' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.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 = isEditable(cell.column.columnDef.meta, record);
   // const allRows = table.getRowModel().rows;
   const allRows = table.getRowModel().flatRows;
@@ -185,7 +182,9 @@ const TableBodyCellEdit = props => {
       className: classNames(`${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',
@@ -237,7 +236,9 @@ const TableBodyCellEdit = props => {
       className: classNames(`${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',
@@ -248,7 +249,8 @@ const TableBodyCellEdit = props => {
     }, renderCommand({
       cell,
       commandClick,
-      id
+      id,
+      data: originData
     }));
   }
   if (cell.column.id === "selection_column") {
@@ -257,7 +259,9 @@ const TableBodyCellEdit = props => {
       className: classNames(`${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',
@@ -434,6 +438,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?.({
@@ -739,11 +744,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 : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent)),
     className: classNames(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -759,7 +762,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',
@@ -776,13 +781,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/es/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/es/table-component/body/TableBodyRow.js

@@ -19,12 +19,12 @@ const TableBodyRow = ({
   editAble,
   isEditing,
   contextMenuItems,
+  onContextMenu,
   ...rest
 }) => {
   const {
     prefix,
-    recordDoubleClick,
-    onContextMenu
+    recordDoubleClick
   } = React.useContext(TableContext);
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -50,8 +50,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?.({
@@ -65,8 +65,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/es/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/es/table-component/footer/TableFooter.js

@@ -1,13 +1,13 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+// import type { Virtualizer } from "@tanstack/react-virtual";
 import TableFooterRow from "./TableFooterRow";
 import { TableContext } from "../useContext";
 import React, { useContext } from "react";
 const TableFooter = ({
-  columnVirtualizer,
-  table,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  ...rest
+  // columnVirtualizer,
+  table
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
+  // ...rest
 }) => {
   const {
     prefix
@@ -20,14 +20,15 @@ const TableFooter = ({
       bottom: 0,
       zIndex: 1
     }
-  }, /*#__PURE__*/React.createElement(TableFooterRow, _extends({
-    table: table,
-    columnVirtualizer: columnVirtualizer,
+  }, /*#__PURE__*/React.createElement(TableFooterRow, {
+    table: table
+    // columnVirtualizer={columnVirtualizer}
+    ,
     headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1]
     // key={headerGroup.id}
-    ,
-    virtualPaddingLeft: virtualPaddingLeft,
-    virtualPaddingRight: virtualPaddingRight
-  }, rest)));
+    // virtualPaddingLeft={virtualPaddingLeft}
+    // virtualPaddingRight={virtualPaddingRight}
+    // {...rest}
+  }));
 };
 export default TableFooter;

package/es/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/es/table-component/footer/TableFooterCell.js

@@ -1,3 +1,4 @@
+// import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 import React, { useContext } from "react";
 // import type { Person } from "../makeData";
 import { checkDecimalSeparator, checkThousandSeparator, getCommonPinningStyles, getFormat, isEmpty } from "../hook/utils";
@@ -8,17 +9,17 @@ import { numericFormatter } from "react-numeric-component";
 // 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
   } = 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 = getFormat(colFormat, format);
   const thousandSeparator = cellFormat?.thousandSeparator;
@@ -51,16 +52,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',
-      ...getCommonPinningStyles(header.column),
-      width: header?.getSize() ?? header.column.getSize(),
+      ...getCommonPinningStyles(column),
+      width: column?.getSize() ?? column.getSize(),
       backgroundColor: "#fafafa"
     }
-  }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/React.createElement("span", null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
+  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
 };
 export default TableFooterCell;

package/es/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/es/table-component/footer/TableFooterRow.js

@@ -1,3 +1,4 @@
+// import type { Virtualizer } from "@tanstack/react-virtual";
 // import type { Person } from "../makeData";
 import TableFooterCell from "./TableFooterCell";
 import React from "react";
@@ -7,15 +8,23 @@ import React from "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.createElement("tr", {
     // data-index={headerGroup.id}
     key: headerGroup.id,
@@ -26,48 +35,14 @@ const TableFooterRow = ({
       borderTop: "1px solid #e0e0e0",
       height: 37
     }
-  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+  }, visibleColumns.map(header => {
     return /*#__PURE__*/React.createElement(TableFooterCell, {
-      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.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.createElement(TableFooterCell, {
-        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.createElement(TableFooterCell, {
-    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.createElement("td", {
-    className: "",
-    style: {
-      display: "flex",
-      width: virtualPaddingRight
-    }
-  }) : null);
+  }));
 };
 export default TableFooterRow;

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

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

@@ -1,9 +1,9 @@
-import { useVirtualizer } from '@tanstack/react-virtual';
 import React, { useContext } from 'react';
 import { TableContext } from "../useContext";
 import TableHeadRow from "./TableHeadRow";
+// import { getCommonPinningStyles } from '../hook/utils'
+
 const TableHead = ({
-  tableContainerRef,
   columnVirtualizer,
   table,
   virtualPaddingLeft,
@@ -14,46 +14,24 @@ const TableHead = ({
   const {
     prefix
   } = useContext(TableContext);
-  const rowVirtualizer = useVirtualizer({
-    count: table.getHeaderGroups().length,
-    estimateSize: () => 34,
-    //estimate row height for accurate scrollbar dragging
-    getScrollElement: () => tableContainerRef.current,
-    //measure dynamic row height, except in firefox because it measures table border height incorrectly
-    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
-    overscan: 5
-  });
-  const virtualRows = rowVirtualizer.getVirtualItems();
-
-  // const columnSizingState = table.getState().columnSizing
-
-  // React.useEffect(() => {
-  //   requestAnimationFrame(() => {
-  //     rowVirtualizer.measure()
-  //   })
-  // }, [columnSizingState, rowVirtualizer])
-
   return /*#__PURE__*/React.createElement("thead", {
     className: `${prefix}-grid-thead`,
     style: {
-      display: 'grid',
+      // display: 'grid',
       position: 'sticky',
       top: 0,
       zIndex: 1
     }
-  }, virtualRows.map(virtualRow => {
-    const headerGroup = table.getHeaderGroups()[virtualRow.index];
+  }, table.getHeaderGroups().map(headerGroup => {
     return /*#__PURE__*/React.createElement(TableHeadRow, {
       table: table,
-      columnVirtualizer: columnVirtualizer,
-      rowHeaderVirtualizer: rowVirtualizer,
       headerGroup: headerGroup,
       key: headerGroup.id,
+      columnVirtualizer: columnVirtualizer,
       virtualPaddingLeft: virtualPaddingLeft,
       virtualPaddingRight: virtualPaddingRight,
       fixedLeftColumns: fixedLeftColumns,
-      fixedRightColumns: fixedRightColumns,
-      rowHeaderVirtual: virtualRow
+      fixedRightColumns: fixedRightColumns
     });
   }));
 };