es-grid-template 1.9.94 → 1.9.96

package/es/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;
@@ -800,6 +800,8 @@ export type SelectionSettings<T = AnyObject> = {
     checkedStrategy?: 'all' | 'parent' | 'child';
     columnWidth?: number;
     hideSelectAll?: boolean;
+    /** When true, keep selection only for records in the current filtered data view. Default: false. */
+    pruneSelection?: boolean;
     selectedRowKeys?: Key[];
     defaultSelectedRowKeys?: Key[];
     getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>>;

package/es/group-component/TableContainer.js

@@ -339,6 +339,7 @@ const TableContainer = props => {
       groupColumns
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
+    footerDataSource: props.footerDataSource,
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,

package/es/group-component/TableContainerEdit.js

@@ -2259,6 +2259,7 @@ const TableContainerEdit = props => {
       groupColumns
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
+    footerDataSource: props.footerDataSource,
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,

package/es/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/es/group-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/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/es/group-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/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/es/group-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/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/es/group-component/table/TableWrapper.js

@@ -232,9 +232,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-component/TableContainer.js

@@ -350,7 +350,9 @@ const TableContainer = props => {
       setIsExpandClick,
       maxDepth
     }
-  }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(TableWrapper, _extends({
+    footerDataSource: props.footerDataSource
+  }, rest, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,

package/es/table-component/TableContainerEdit.js

@@ -2277,7 +2277,9 @@ const TableContainerEdit = props => {
       setIsExpandClick,
       isAddAble
     }
-  }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(TableWrapper, _extends({
+    footerDataSource: props.footerDataSource
+  }, rest, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,

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

@@ -285,9 +285,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/InternalTable.js

@@ -8,7 +8,7 @@ import 'dayjs/locale/vi';
 import { faker } from '@faker-js/faker';
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import { getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
-import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray, removeKeys } from "./hook/utils";
+import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flattenArray, flattenData, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray, removeKeys } from "./hook/utils";
 // import { convertToTanStackColumns } from './hook/useColumns'
 import { removeInvisibleColumns } from "../grid-component/hooks";
 import Grid from "./table/Grid";
@@ -82,6 +82,7 @@ const InternalTable = props => {
   const [columnResizeMode] = React.useState('onChange');
   const [columnResizeDirection] = React.useState('ltr');
   const [rowSelection, setRowSelection] = React.useState({});
+  const pruneSelection = selectionSettings?.pruneSelection === true;
 
   // const [grouping, setGrouping] = React.useState<GroupingState>([])
 
@@ -118,6 +119,9 @@ const InternalTable = props => {
     return isTreeArray(originData);
   }, [originData]);
   React.useEffect(() => {
+    if (pruneSelection) {
+      return;
+    }
     if (groupColumns && groupColumns.length > 0 && groupSetting?.client !== false && isDataOriginTree === false) {
       const abc = groupArrayByColumns(originData, groupColumns);
       const rs = filterDataByColumns(abc, filterStates, sorterStates, []);
@@ -126,9 +130,48 @@ const InternalTable = props => {
       const rs = filterDataByColumns(originData, filterStates, sorterStates, []);
       setTableData(rs);
     }
-  }, [groupColumns, originData, filterStates, sorterStates, groupSetting?.client, isDataOriginTree]);
+  }, [groupColumns, originData, filterStates, sorterStates, groupSetting?.client, isDataOriginTree, pruneSelection]);
   // }, [groupColumns, originData, filterStates, sorterStates, groupSetting?.client])
 
+  // Resolve the opt-in view before paint, including inline grouping arrays.
+  const groupColumnsKey = JSON.stringify(groupColumns ?? []);
+  const viewData = React.useMemo(() => {
+    if (!pruneSelection) {
+      return tableData;
+    }
+    const groups = JSON.parse(groupColumnsKey);
+    const grouped = groups.length && groupSetting?.client !== false && !isDataOriginTree ? groupArrayByColumns(originData, groups) : originData;
+    return filterDataByColumns(grouped, filterStates, sorterStates, []);
+  }, [pruneSelection, tableData, groupColumnsKey, originData, groupSetting?.client, isDataOriginTree, filterStates, sorterStates]);
+  const effectiveRowSelection = React.useMemo(() => {
+    if (!pruneSelection || props.loading) {
+      return rowSelection;
+    }
+    const ids = new Set(flattenArray(viewData).map(row => String(row.rowId)));
+    const next = Object.fromEntries(Object.entries(rowSelection).filter(([selectedId, checked]) => checked && ids.has(selectedId)));
+
+    // A group can stay checked only if its remaining real children are checked.
+    const checkGroups = rows => {
+      rows.forEach(row => {
+        if (row.isGroupRow && next[String(row.rowId)]) {
+          const children = flattenData('children', row.children ?? []).filter(child => !child.isGroupRow && !selectionSettings?.getCheckboxProps?.(child)?.disabled);
+          if (!children.length || children.some(child => !next[String(child.rowId)])) {
+            delete next[String(row.rowId)];
+          }
+        }
+        if (Array.isArray(row.children)) {
+          checkGroups(row.children);
+        }
+      });
+    };
+    checkGroups(viewData);
+    return Object.keys(next).length === Object.keys(rowSelection).length ? rowSelection : next;
+  }, [pruneSelection, props.loading, rowSelection, viewData, selectionSettings?.getCheckboxProps]);
+  React.useEffect(() => {
+    if (effectiveRowSelection !== rowSelection) {
+      setRowSelection(prev => prev === rowSelection ? effectiveRowSelection : prev);
+    }
+  }, [effectiveRowSelection, rowSelection]);
   React.useEffect(() => {
     // setColumns(updateWidthsByOther(propsColumns, columns))
     setColumns(propsColumns);
@@ -142,8 +185,8 @@ const InternalTable = props => {
     });
   }, [t, columns, format, editAble]);
   const isDataTree = React.useMemo(() => {
-    return isTreeArray(tableData);
-  }, [tableData]);
+    return isTreeArray(viewData);
+  }, [viewData]);
   const columnPinning = React.useMemo(() => {
     return {
       left: getFixedFields(columns, 'left'),
@@ -203,11 +246,11 @@ const InternalTable = props => {
   };
   const table = useReactTable({
     _features: [OperatorFeature],
-    data: tableData,
+    data: viewData,
     // data: mergedData,
     columns: mergedColumns,
     state: {
-      rowSelection,
+      rowSelection: effectiveRowSelection,
       expanded,
       columnPinning,
       columnVisibility: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
@@ -282,20 +325,20 @@ const InternalTable = props => {
   React.useEffect(() => {
     if (expandable?.preserveExpandedOnDataChange) {
       // Chờ cây có dữ liệu mới khởi tạo; những lần thay đổi tableData sau đó không reset expanded.
-      if (initializedExpansionRef.current || tableData.length === 0) {
+      if (initializedExpansionRef.current || viewData.length === 0) {
         return;
       }
       initializedExpansionRef.current = true;
     }
     if (defaultExpandAllRows) {
-      const allKeys = findAllChildrenKeys2(tableData, rowKey, 'children');
+      const allKeys = findAllChildrenKeys2(viewData, rowKey, 'children');
       setExpanded(convertToObjTrue(allKeys));
     } else {
       if (defaultExpandedRowKeys) {
         setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
       }
     }
-  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData, expandable?.preserveExpandedOnDataChange]);
+  }, [defaultExpandAllRows, defaultExpandedRowKeys, viewData, expandable?.preserveExpandedOnDataChange]);
   const triggerGroupColumns = groupedColumns => {
     // const abc = updateColumnsByGroup(columns, groupedColumns)
 
@@ -382,7 +425,7 @@ const InternalTable = props => {
     originData: originData
     // dataSource={mergedData}
     ,
-    dataSource: tableData,
+    dataSource: viewData,
     locale: locale,
     format: format
     // columns={convertColumns(mergedColumns)}
@@ -417,7 +460,7 @@ const InternalTable = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     setColumnSizing: setColumnSizing,
-    rowSelection: rowSelection,
+    rowSelection: effectiveRowSelection,
     pagination: pagination
   })))));
 };

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;