es-grid-template 1.9.95 → 1.9.97

package/lib/grid-component/GridRefreshButton.css

@@ -1,9 +1,9 @@
-.ui-rc-grid-refresh-spin {
-  transform-origin: center;
-  transform-box: fill-box;
-  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
-}
-
-@keyframes ui-rc-grid-refresh-spin {
-  to { transform: rotate(360deg); }
-}
+.ui-rc-grid-refresh-spin {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
+}
+
+@keyframes ui-rc-grid-refresh-spin {
+  to { transform: rotate(360deg); }
+}

package/lib/grid-component/hooks/rowFocus.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { KeyboardEvent, MouseEvent } from 'react';
 import type { RowFocusEventArgs } from '../type';
 type RowFocus<T> = (args: RowFocusEventArgs<T>) => void;
 /** Capture clicks even when a cell handles the event itself. */
@@ -8,4 +8,5 @@ export declare function getRowFocusHandlers<T>(rowData: T, rowFocus?: RowFocus<T
 };
 /** Notify arrow focus without changing the existing navigation or selection. */
 export declare function notifyArrowRowFocus<T>(rowData: T, method: 'arrowUp' | 'arrowDown', useArrow?: boolean, rowFocus?: RowFocus<T>): void;
+export declare function focusArrowRow(event: KeyboardEvent, rowId: string, columnId: string, scrollToRow: () => void): void;
 export {};

package/lib/grid-component/hooks/rowFocus.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.focusArrowRow = focusArrowRow;
 exports.getRowFocusHandlers = getRowFocusHandlers;
 exports.notifyArrowRowFocus = notifyArrowRowFocus;
 /** Capture clicks even when a cell handles the event itself. */
@@ -29,4 +30,30 @@ function notifyArrowRowFocus(rowData, method, useArrow, rowFocus) {
     rowData,
     method
   });
+}
+function focusArrowRow(event, rowId, columnId, scrollToRow) {
+  event.preventDefault();
+  const source = event.currentTarget;
+  const body = source.closest('.ui-rc-grid-row')?.parentElement;
+  const row = body && Array.from(body.children).find(child => child.getAttribute('data-row-key') === rowId);
+  const viewport = source.closest('[data-grid-scroll], [data-virtuoso-scroller]');
+  const canScroll = viewport && viewport.scrollHeight > viewport.clientHeight;
+  if (!row) {
+    if (canScroll) scrollToRow();
+    return;
+  }
+  const cell = Array.from(row.querySelectorAll(':scope > [data-col-key]')).find(element => element.getAttribute('data-col-key') === columnId) ?? row.querySelector(':scope > .ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+  cell?.focus({
+    preventScroll: true
+  });
+  if (canScroll) {
+    const header = body?.parentElement?.querySelector(':scope > .ui-rc-grid-thead');
+    const footer = body?.parentElement?.querySelector(':scope > .ui-rc-grid-tfoot');
+    const headerHeight = header?.getBoundingClientRect().height ?? 0;
+    const footerHeight = footer?.getBoundingClientRect().height ?? 0;
+    const viewportTop = viewport.getBoundingClientRect().top + viewport.clientTop;
+    const viewportCenter = viewportTop + (viewport.clientHeight + headerHeight - footerHeight) / 2;
+    const rowRect = row.getBoundingClientRect();
+    viewport.scrollTop += rowRect.top + rowRect.height / 2 - viewportCenter;
+  }
 }

package/lib/grid-component/type.d.ts

@@ -494,7 +494,7 @@ export type TableProps<RecordType = AnyObject> = {
     allowResizing?: boolean;
     /** Hiển thị dòng tổng hợp */
     summary?: boolean;
-    /** Dữ liệu footer */
+    /** Dữ liệu footer theo field của cột, dùng khi summary=true. Không truyền thì tự tính tổng; [] ẩn các dòng footer. */
     footerDataSource?: any[];
     /** Hiển thị text khi không có dữ liệu */
     showEmptyText?: boolean;

package/lib/group-component/TableContainer.js

@@ -347,6 +347,7 @@ const TableContainer = props => {
       groupColumns
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+    footerDataSource: props.footerDataSource,
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,

package/lib/group-component/TableContainerEdit.js

@@ -2267,6 +2267,7 @@ const TableContainerEdit = props => {
       groupColumns
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+    footerDataSource: props.footerDataSource,
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import type { Virtualizer } from "@tanstack/react-virtual";
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../../grid-component/type";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, HTMLDivElement>;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

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

@@ -454,35 +454,20 @@ const TableBodyCell = props => {
       }
     },
     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
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.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
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

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

@@ -794,93 +794,30 @@ const TableBodyCellEdit = props => {
       }
       return;
     }
-    if (e.key === 'ArrowDown') {
-      // e.preventDefault()
-      // e.stopPropagation()
-
-      let nextRowIndex = rowNumber + 1;
-      let nextRow = table.getRowModel().rows[nextRowIndex];
-
-      // Nếu nextRow có children và chưa được expand, thì tìm tiếp dòng tiếp theo
-      while (nextRow && nextRow.subRows && nextRow.subRows.length > 0) {
-        nextRowIndex++;
-        nextRow = table.getRowModel().rows[nextRowIndex];
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      const rows = table.getRowModel().rows;
+      const currentIndex = rows.findIndex(row => row.id === rowId);
+      if (currentIndex < 0) return;
+      const step = e.key === 'ArrowDown' ? 1 : -1;
+      let nextIndex = currentIndex + step;
+      let nextRow = rows[nextIndex];
+      while (nextRow?.subRows.length) {
+        nextIndex += step;
+        nextRow = rows[nextIndex];
       }
       if (nextRow) {
-        const nextRowId = nextRow.id;
-        setFocusedCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextRowId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        setStartCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setEndCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
-          rowId: nextRowId,
-          colId
-        }, {
-          rowId: nextRowId,
-          colId
-        }));
-
-        // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
-        // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
-
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      return;
-    }
-    if (e.key === 'ArrowUp') {
-      // e.preventDefault()
-      // e.stopPropagation()
-
-      // const nextRow = table.getRowModel().rows[rowNumber - 1]
-
-      let prevRowIndex = rowNumber - 1;
-      let prevRow = table.getRowModel().rows[prevRowIndex];
-
-      // Nếu nextRow có children và chưa được expand, thì tìm tiếp dòng tiếp theo
-      while (prevRow && prevRow.subRows && prevRow.subRows.length > 0) {
-        prevRowIndex--;
-        prevRow = table.getRowModel().rows[prevRowIndex];
-      }
-      if (prevRow) {
-        const nextRowId = prevRow.id;
-        setFocusedCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextRowId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        setStartCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setEndCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
-          rowId: nextRowId,
-          colId
-        }, {
-          rowId: nextRowId,
+        const nextCell = {
+          rowId: nextRow.id,
           colId
+        };
+        setFocusedCell?.(nextCell);
+        setStartCell?.(nextCell);
+        setEndCell?.(nextCell);
+        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, nextCell, nextCell));
+        (0, _rowFocus.focusArrowRow)(e, nextRow.id, colId, () => rowVirtualizer.scrollToIndex(nextIndex, {
+          align: 'center'
         }));
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
+        (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
       }
       return;
     }

package/lib/group-component/body/TableBodyCellEmpty.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import type { Virtualizer } from "@tanstack/react-virtual";
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../../grid-component/type";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, HTMLDivElement>;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

package/lib/group-component/body/TableBodyCellEmpty.js

@@ -99,35 +99,20 @@ const TableBodyCellEmpty = props => {
       setIsPasting?.(false);
     },
     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
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        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
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        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 === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/group-component/body/TableBodyRowGroupCell.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import type { Virtualizer } from "@tanstack/react-virtual";
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../../grid-component/type";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, HTMLDivElement>;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

package/lib/group-component/body/TableBodyRowGroupCell.js

@@ -434,35 +434,20 @@ const TableBodyCell = props => {
       setIsPasting?.(false);
     },
     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
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.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
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

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

@@ -2,6 +2,7 @@
 import type { Table } from "@tanstack/react-table";
 interface TableFooterProps<T> {
     table: Table<T>;
+    footerDataSource?: any[];
 }
-declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => JSX.Element;
+declare const TableFooter: <RecordType extends object>({ table, footerDataSource, }: TableFooterProps<RecordType>) => JSX.Element;
 export default TableFooter;

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

@@ -14,7 +14,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const TableFooter = ({
   // columnVirtualizer,
-  table
+  table,
+  footerDataSource
   // virtualPaddingLeft,
   // virtualPaddingRight,
   // ...rest
@@ -30,15 +31,11 @@ const TableFooter = ({
       bottom: 0,
       zIndex: 1
     }
-  }, /*#__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}
-  }));
+  }, (footerDataSource ?? [undefined]).map((footerRow, index) => /*#__PURE__*/_react.default.createElement(_TableFooterRow.default, {
+    key: index,
+    table: table,
+    headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1],
+    footerRow: footerRow
+  })));
 };
 var _default = exports.default = TableFooter;

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

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

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

@@ -14,7 +14,8 @@ 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
+  column,
+  footerRow
 }) => {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
@@ -25,7 +26,10 @@ const TableFooterCell = ({
     dataSource
   } = (0, _react.useContext)(_useContext.TableContext);
   const col = column.columnDef.meta ?? {};
-  const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+  const isCustomFooter = footerRow !== undefined;
+  const field = col.field;
+  const hasFooterValue = isCustomFooter && Object.prototype.hasOwnProperty.call(footerRow, field) && footerRow[field] != null;
+  const colFormat = typeof col.format === 'function' ? col.format(footerRow ?? {}) : col.format;
   const cellFormat = (0, _utils.getFormat)(colFormat, format);
   const thousandSeparator = cellFormat?.thousandSeparator;
   const decimalSeparator = cellFormat?.decimalSeparator;
@@ -34,7 +38,7 @@ const TableFooterCell = ({
   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 sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : (0, _hooks.sumByField)(dataSource, 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);
@@ -47,6 +51,7 @@ const TableFooterCell = ({
     decimalScale: dec,
     fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
   };
+  const content = isCustomFooter && (!hasFooterValue || col.isSummary === false) ? '' : col.summaryTemplate ? col.summaryTemplate(numberValue, field) : isCustomFooter && col.type !== 'number' ? footerRow[field] : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps);
   return /*#__PURE__*/_react.default.createElement("div", {
     // ref={el => {
     //   if (el) columnVirtualizer.measureElement(el)
@@ -70,6 +75,6 @@ const TableFooterCell = ({
       minWidth: column?.getSize()
       // backgroundColor: "#fafafa",
     }
-  }, 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)) : '');
+  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, content) : '');
 };
 var _default = exports.default = TableFooterCell;

package/lib/group-component/footer/TableFooterRow.d.ts

@@ -2,7 +2,8 @@
 import type { HeaderGroup, Table } from "@tanstack/react-table";
 interface TableFooterRowProps<T> {
     table: Table<T>;
+    footerRow?: Record<string, any>;
     headerGroup: HeaderGroup<T>;
 }
-declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, }: TableFooterRowProps<RecordType>) => JSX.Element;
+declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, footerRow, }: TableFooterRowProps<RecordType>) => JSX.Element;
 export default TableFooterRow;

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

@@ -10,7 +10,8 @@ var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 const TableFooterRow = ({
   table,
-  headerGroup
+  headerGroup,
+  footerRow
 }) => {
   const visibleColumns = table.getVisibleLeafColumns();
   const {
@@ -30,7 +31,8 @@ const TableFooterRow = ({
   }, visibleColumns.map(header => {
     return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
       key: header.id,
-      column: header
+      column: header,
+      footerRow: footerRow
     });
   }));
 };

package/lib/group-component/table/TableWrapper.d.ts

@@ -11,6 +11,7 @@ type Props<T> = {
     height: number;
     minHeight?: number;
     table: Table<T>;
+    footerDataSource?: any[];
     summary?: boolean;
     loading?: boolean;
     commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;

package/lib/group-component/table/TableWrapper.js

@@ -202,6 +202,7 @@ const TableWrapper = props => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     // id={id}
     ref: tableContainerRef,
+    "data-grid-scroll": true,
     style: {
       overflow: 'auto',
       //our scrollable table container
@@ -241,9 +242,10 @@ const TableWrapper = props => {
     virtualPaddingRight: virtualPaddingRight,
     fixedLeftColumns: fixedLeftColumns,
     fixedRightColumns: fixedRightColumns
-  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default
-  // columnVirtualizer={columnVirtualizer}
-  , {
+  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
+    footerDataSource: props.footerDataSource
+    // columnVirtualizer={columnVirtualizer}
+    ,
     table: table
     // virtualPaddingLeft={virtualPaddingLeft}
     // virtualPaddingRight={virtualPaddingRight}

package/lib/table-component/TableContainer.js

@@ -357,7 +357,9 @@ const TableContainer = props => {
       setIsExpandClick,
       maxDepth
     }
-  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({
+    footerDataSource: props.footerDataSource
+  }, rest, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,

package/lib/table-component/TableContainerEdit.js

@@ -2276,7 +2276,9 @@ const TableContainerEdit = props => {
       setIsExpandClick,
       isAddAble
     }
-  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({
+    footerDataSource: props.footerDataSource
+  }, rest, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,