es-grid-template 1.9.95 → 1.9.97

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

@@ -1,4 +1,4 @@
-import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
+import { focusArrowRow, notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
 import { getCommonPinningStyles, getFormat } from "../hook/utils";
@@ -435,44 +435,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
-        });
-        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-
-        // if (rowNumber < flatRows.length - 5) {
-        //   e.stopPropagation()
-        //   e.preventDefault()
-        //   rowVirtualizer.scrollToIndex(cell.row.index, {
-        //     align: 'center', // 'start' | 'center' | 'end'
-        //   })
-        // }
-
-        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
-        });
-        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
+          });
+          focusArrowRow(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

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

@@ -1,4 +1,4 @@
-import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
+import { focusArrowRow, notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
 import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getDragRightData, getEditType, getFormat,
@@ -819,77 +819,26 @@ const TableBodyCellEdit = props => {
       }
       return;
     }
-    if (e.key === 'ArrowDown') {
-      // e.preventDefault()
-      // e.stopPropagation()
-
-      const nextRow = table.getRowModel().rows[rowNumber + 1];
-      if (nextRow) {
-        const nextRowId = nextRow.id;
-        setFocusedCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        notifyArrowRowFocus(table.getRow(nextRowId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        setStartCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setEndCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setRangeState?.(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];
+    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;
+      const nextIndex = currentIndex + step;
+      const nextRow = rows[nextIndex];
       if (nextRow) {
-        const nextRowId = nextRow.id;
-        setFocusedCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        notifyArrowRowFocus(table.getRow(nextRowId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        setStartCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setEndCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setRangeState?.(getSelectedCellMatrix(table, {
-          rowId: nextRowId,
-          colId
-        }, {
-          rowId: nextRowId,
+        const nextCell = {
+          rowId: nextRow.id,
           colId
+        };
+        setFocusedCell?.(nextCell);
+        setStartCell?.(nextCell);
+        setEndCell?.(nextCell);
+        setRangeState?.(getSelectedCellMatrix(table, nextCell, nextCell));
+        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();
-        }
+        notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
       }
       return;
     }

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

@@ -4,7 +4,8 @@ import { TableContext } from "../useContext";
 import React, { useContext } from "react";
 const TableFooter = ({
   // columnVirtualizer,
-  table
+  table,
+  footerDataSource
   // virtualPaddingLeft,
   // virtualPaddingRight,
   // ...rest
@@ -20,15 +21,11 @@ const TableFooter = ({
       bottom: 0,
       zIndex: 1
     }
-  }, /*#__PURE__*/React.createElement(TableFooterRow, {
-    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.createElement(TableFooterRow, {
+    key: index,
+    table: table,
+    headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1],
+    footerRow: footerRow
+  })));
 };
 export default TableFooter;

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

@@ -5,7 +5,8 @@ import classNames from "classnames";
 import { sumByField } from "../../grid-component/hooks";
 import { numericFormatter } from "react-numeric-component";
 const TableFooterCell = ({
-  column
+  column,
+  footerRow
 }) => {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
@@ -16,7 +17,10 @@ const TableFooterCell = ({
     dataSource
   } = 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 = getFormat(colFormat, format);
   const thousandSeparator = cellFormat?.thousandSeparator;
   const decimalSeparator = cellFormat?.decimalSeparator;
@@ -25,7 +29,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' ? sumByField(dataSource, col?.field) : 0;
+  const sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : sumByField(dataSource, field) : 0;
   const value = !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);
@@ -38,6 +42,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] : numericFormatter(cellValue, numericFormatProps);
   return /*#__PURE__*/React.createElement("div", {
     // ref={el => {
     //   if (el) columnVirtualizer.measureElement(el)
@@ -61,6 +66,6 @@ const TableFooterCell = ({
       minWidth: column?.getSize()
       // backgroundColor: "#fafafa",
     }
-  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
+  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, content) : '');
 };
 export default TableFooterCell;

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

@@ -3,7 +3,8 @@ import React from "react";
 import { TableContext } from "../useContext";
 const TableFooterRow = ({
   table,
-  headerGroup
+  headerGroup,
+  footerRow
 }) => {
   const visibleColumns = table.getVisibleLeafColumns();
   const {
@@ -23,7 +24,8 @@ const TableFooterRow = ({
   }, visibleColumns.map(header => {
     return /*#__PURE__*/React.createElement(TableFooterCell, {
       key: header.id,
-      column: header
+      column: header,
+      footerRow: footerRow
     });
   }));
 };

package/es/table-component/table/TableWrapper.d.ts

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

package/es/table-component/table/TableWrapper.js

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

package/es/table-virtuoso/body/TableBodyCell.d.ts

@@ -4,6 +4,7 @@ import type { CommandClick } from "../../grid-component/type";
 import type { VirtualItem } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    scrollToRow?: (index: number) => void;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

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

@@ -1,4 +1,4 @@
-import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
+import { focusArrowRow, notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 import Space from "rc-master-ui/es/space";
 import { getCommonPinningStyles, getFormat } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
@@ -374,35 +374,18 @@ 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
-        });
-        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
-        });
-        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
+          });
+          focusArrowRow(e, nextRow.id, cell.column.id, () => props.scrollToRow?.(nextIndex));
+          notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/es/table-virtuoso/body/TableBodyCellRowGroup.d.ts

@@ -4,6 +4,7 @@ import type { CommandClick } from "../../grid-component/type";
 import type { VirtualItem } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    scrollToRow?: (index: number) => void;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

package/es/table-virtuoso/body/TableBodyCellRowGroup.js

@@ -1,4 +1,4 @@
-import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
+import { focusArrowRow, notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 import { getCommonPinningStyles } from "../hook/utils";
 import classNames from "classnames";
 import React from "react";
@@ -89,35 +89,18 @@ const TableBodyCellRowGroup = 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
-        });
-        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
-        });
-        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
+          });
+          focusArrowRow(e, nextRow.id, cell.column.id, () => props.scrollToRow?.(nextIndex));
+          notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

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

@@ -4,10 +4,11 @@ import type { CommandClick } from "../../grid-component/type";
 interface TableBodyRowProps<T> {
     tableId: string;
     table: Table<T>;
+    scrollToRow?: (index: number) => void;
     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, rowheight, editAble, isEditing, isRowEditable, ...rest }: TableBodyRowProps<RecordType>) => JSX.Element;
+declare const TableBodyRow: <RecordType extends object>({ tableId, table, row, scrollToRow, virtualRow, commandClick, contextMenuItems, onContextMenu, rowheight, editAble, isEditing, isRowEditable, ...rest }: TableBodyRowProps<RecordType>) => JSX.Element;
 export default TableBodyRow;

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

@@ -14,6 +14,7 @@ const TableBodyRow = ({
   tableId,
   table,
   row,
+  scrollToRow,
   virtualRow,
   commandClick,
   contextMenuItems,
@@ -133,7 +134,9 @@ const TableBodyRow = ({
         rowData: row.original,
         value: cellValue
       }) : /*#__PURE__*/React.createElement(React.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
-      return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, otherCellAttributes, {
+      return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
+        scrollToRow: scrollToRow
+      }, otherCellAttributes, {
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -166,7 +169,9 @@ const TableBodyRow = ({
       const childrenData = row.subRows.map(it => it.original);
       const sumValue = sumByField(childrenData, cell.column.id);
       const sumValueFormat = numericFormatter(sumValue.toString(), numericFormatProps);
-      return /*#__PURE__*/React.createElement(TableBodyCellRowGroup, _extends({}, otherCellAttributes, {
+      return /*#__PURE__*/React.createElement(TableBodyCellRowGroup, _extends({
+        scrollToRow: scrollToRow
+      }, otherCellAttributes, {
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -179,7 +184,9 @@ const TableBodyRow = ({
         sumValue: sumValueFormat
       }));
     }
-    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, otherCellAttributes, {
+    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
+      scrollToRow: scrollToRow
+    }, otherCellAttributes, {
       table: table,
       tableId: tableId,
       key: cell.id,

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

@@ -5,7 +5,8 @@ import classNames from "classnames";
 import { sumByField } from "../../grid-component/hooks";
 import { numericFormatter } from "react-numeric-component";
 const TableFooterCell = ({
-  column
+  column,
+  footerRow
 }) => {
   const {
     prefix,
@@ -13,7 +14,10 @@ const TableFooterCell = ({
     dataSource
   } = 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 = getFormat(colFormat, format);
   const thousandSeparator = cellFormat?.thousandSeparator;
   const decimalSeparator = cellFormat?.decimalSeparator;
@@ -22,7 +26,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' ? sumByField(dataSource, col?.field) : 0;
+  const sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : sumByField(dataSource, field) : 0;
   const value = !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);
@@ -35,6 +39,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] : numericFormatter(cellValue, numericFormatProps);
   return /*#__PURE__*/React.createElement("th", {
     className: classNames(`${prefix}-grid-cell`, {
       // [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
@@ -49,6 +54,6 @@ const TableFooterCell = ({
       minWidth: column?.getSize(),
       height: 40
     }
-  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
+  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, content) : '');
 };
 export default TableFooterCell;

package/es/table-virtuoso/table/TableContainer.js

@@ -291,7 +291,9 @@ const TableContainer = props => {
       pagination,
       groupSetting
     }
-  }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(TableWrapper, _extends({
+    footerDataSource: props.footerDataSource
+  }, rest, {
     tableContainerRef: tableContainerRef,
     prefix: prefix,
     id: id,

package/es/table-virtuoso/table/TableWrapper.d.ts

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

package/es/table-virtuoso/table/TableWrapper.js

@@ -34,6 +34,11 @@ const TableWrapper = props => {
 
   // ref cho scroll container
   const scrollRef = useRef(null);
+  const virtuosoRef = useRef(null);
+  const scrollToRow = index => virtuosoRef.current?.scrollToIndex({
+    index,
+    align: 'center'
+  });
   const {
     rows
   } = table.getRowModel();
@@ -126,6 +131,7 @@ const TableWrapper = props => {
       position: "relative"
     }
   }, /*#__PURE__*/React.createElement(TableVirtuoso, _extends({
+    ref: virtuosoRef,
     data: table.getRowModel().rows,
     totalCount: rows.length
   }, onVisibleRowsChange ? {
@@ -190,6 +196,7 @@ const TableWrapper = props => {
         return /*#__PURE__*/React.createElement(TableBodyRow, _extends({
           tableId: id,
           row: row,
+          scrollToRow: scrollToRow,
           table: table,
           commandClick: commandClick,
           rowheight: editAble ? 37 : rowheight,
@@ -247,14 +254,14 @@ const TableWrapper = props => {
     },
     fixedFooterContent: summary ? () => {
       const visibleColumns = table.getVisibleLeafColumns();
-      return /*#__PURE__*/React.createElement("tr", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, (props.footerDataSource ?? [undefined]).map((footerRow, index) => /*#__PURE__*/React.createElement("tr", {
+        key: index,
         className: "ui-rc-grid-footer-row"
-      }, visibleColumns.map(header => {
-        return /*#__PURE__*/React.createElement(TableFooterCell, {
-          key: header.id,
-          column: header
-        });
-      }));
+      }, visibleColumns.map(column => /*#__PURE__*/React.createElement(TableFooterCell, {
+        key: column.id,
+        column: column,
+        footerRow: footerRow
+      })))));
     } : undefined
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     id: `${id}-tooltip-content`,