es-grid-template 1.9.94 → 1.9.96

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

@@ -51,16 +51,46 @@ const Grid = props => {
     setColumnSizing,
     columnFilters,
     setColumnOrder,
-    rowSelection,
     className: tableClassNames,
     ...rest
   } = props;
+  const selectedRowState = table.getState().rowSelection;
   const [isSelectionChange, setIsSelectionChange] = React.useState({
     isChange: false,
     type: '',
     rowData: {},
     rowsData: []
   });
+  const rowSelectedRef = React.useRef(rowSelected);
+  React.useEffect(() => {
+    rowSelectedRef.current = rowSelected;
+  }, [rowSelected]);
+  const pruneSelection = selectionSettings?.pruneSelection === true;
+  const selectedViewRows = React.useMemo(() => {
+    if (!pruneSelection || props.loading) {
+      return [];
+    }
+    return table.getCoreRowModel().flatRows.filter(row => !row.original.isGroupRow && selectedRowState[row.id]).map(row => row.original);
+  }, [pruneSelection, props.loading, table, dataSource, selectedRowState]);
+  const selectedViewIds = JSON.stringify(selectedViewRows.map(row => String(row.rowId)).sort());
+  const lastNotifiedSelection = React.useRef(null);
+
+  // Keep event handlers in sync with the view without another state/effect.
+  const selectionChange = pruneSelection && !props.loading ? {
+    ...isSelectionChange,
+    rowsData: selectedViewRows
+  } : isSelectionChange;
+  React.useEffect(() => {
+    if (!pruneSelection || props.loading || lastNotifiedSelection.current === selectedViewIds) {
+      return;
+    }
+    lastNotifiedSelection.current = selectedViewIds;
+    rowSelected?.({
+      type: isSelectionChange.isChange ? isSelectionChange.type : 'selectionPruned',
+      rowData: isSelectionChange.rowData,
+      selected: selectedViewRows
+    });
+  }, [pruneSelection, props.loading, selectedViewIds, selectedViewRows, rowSelected, isSelectionChange.isChange, isSelectionChange.type, isSelectionChange.rowData]);
   const [sorterChange, setSorterChange] = React.useState(false);
   const [filterChange, setFilterChange] = React.useState(false);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
@@ -77,18 +107,17 @@ const Grid = props => {
   // }, [mergedSelectedKeys])
 
   React.useEffect(() => {
-    if (isSelectionChange.isChange) {
-      const aa = table.getState().rowSelection;
-      const ids = Object.keys(aa);
+    if (!pruneSelection && isSelectionChange.isChange) {
+      const ids = Object.keys(selectedRowState);
       const ssss = filterByIds(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
 
-      rowSelected?.({
+      rowSelectedRef.current?.({
         type: isSelectionChange.type,
         rowData: isSelectionChange.rowData,
         selected: ssss.filter(x => !x.isGroupRow)
       });
     }
-  }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
+  }, [isSelectionChange, selectedRowState, pruneSelection]);
   React.useEffect(() => {
     if (sorterChange) {
       const aa = table.getState().sorting;
@@ -179,7 +208,7 @@ const Grid = props => {
     originData: originData,
     prefix: prefix,
     selectionSettings: selectionSettings,
-    isSelectionChange: isSelectionChange,
+    isSelectionChange: selectionChange,
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,
@@ -249,7 +278,7 @@ const Grid = props => {
     originData: originData,
     prefix: prefix,
     selectionSettings: selectionSettings,
-    isSelectionChange: isSelectionChange,
+    isSelectionChange: selectionChange,
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,

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

@@ -247,14 +247,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`,

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;
@@ -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/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/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

@@ -241,9 +241,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,

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

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

@@ -92,6 +92,7 @@ const InternalTable = props => {
   const [columnResizeMode] = _react.default.useState('onChange');
   const [columnResizeDirection] = _react.default.useState('ltr');
   const [rowSelection, setRowSelection] = _react.default.useState({});
+  const pruneSelection = selectionSettings?.pruneSelection === true;
 
   // const [grouping, setGrouping] = React.useState<GroupingState>([])
 
@@ -128,6 +129,9 @@ const InternalTable = props => {
     return (0, _utils.isTreeArray)(originData);
   }, [originData]);
   _react.default.useEffect(() => {
+    if (pruneSelection) {
+      return;
+    }
     if (groupColumns && groupColumns.length > 0 && groupSetting?.client !== false && isDataOriginTree === false) {
       const abc = (0, _utils.groupArrayByColumns)(originData, groupColumns);
       const rs = (0, _utils.filterDataByColumns)(abc, filterStates, sorterStates, []);
@@ -136,9 +140,48 @@ const InternalTable = props => {
       const rs = (0, _utils.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.default.useMemo(() => {
+    if (!pruneSelection) {
+      return tableData;
+    }
+    const groups = JSON.parse(groupColumnsKey);
+    const grouped = groups.length && groupSetting?.client !== false && !isDataOriginTree ? (0, _utils.groupArrayByColumns)(originData, groups) : originData;
+    return (0, _utils.filterDataByColumns)(grouped, filterStates, sorterStates, []);
+  }, [pruneSelection, tableData, groupColumnsKey, originData, groupSetting?.client, isDataOriginTree, filterStates, sorterStates]);
+  const effectiveRowSelection = _react.default.useMemo(() => {
+    if (!pruneSelection || props.loading) {
+      return rowSelection;
+    }
+    const ids = new Set((0, _utils.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 = (0, _utils.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.default.useEffect(() => {
+    if (effectiveRowSelection !== rowSelection) {
+      setRowSelection(prev => prev === rowSelection ? effectiveRowSelection : prev);
+    }
+  }, [effectiveRowSelection, rowSelection]);
   _react.default.useEffect(() => {
     // setColumns(updateWidthsByOther(propsColumns, columns))
     setColumns(propsColumns);
@@ -152,8 +195,8 @@ const InternalTable = props => {
     });
   }, [t, columns, format, editAble]);
   const isDataTree = _react.default.useMemo(() => {
-    return (0, _utils.isTreeArray)(tableData);
-  }, [tableData]);
+    return (0, _utils.isTreeArray)(viewData);
+  }, [viewData]);
   const columnPinning = _react.default.useMemo(() => {
     return {
       left: (0, _utils.getFixedFields)(columns, 'left'),
@@ -213,11 +256,11 @@ const InternalTable = props => {
   };
   const table = (0, _reactTable.useReactTable)({
     _features: [_operator.OperatorFeature],
-    data: tableData,
+    data: viewData,
     // data: mergedData,
     columns: mergedColumns,
     state: {
-      rowSelection,
+      rowSelection: effectiveRowSelection,
       expanded,
       columnPinning,
       columnVisibility: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
@@ -292,20 +335,20 @@ const InternalTable = props => {
   _react.default.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 = (0, _utils.findAllChildrenKeys2)(tableData, rowKey, 'children');
+      const allKeys = (0, _utils.findAllChildrenKeys2)(viewData, rowKey, 'children');
       setExpanded((0, _utils.convertToObjTrue)(allKeys));
     } else {
       if (defaultExpandedRowKeys) {
         setExpanded((0, _utils.convertToObjTrue)(defaultExpandedRowKeys ?? []));
       }
     }
-  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData, expandable?.preserveExpandedOnDataChange]);
+  }, [defaultExpandAllRows, defaultExpandedRowKeys, viewData, expandable?.preserveExpandedOnDataChange]);
   const triggerGroupColumns = groupedColumns => {
     // const abc = updateColumnsByGroup(columns, groupedColumns)
 
@@ -392,7 +435,7 @@ const InternalTable = props => {
     originData: originData
     // dataSource={mergedData}
     ,
-    dataSource: tableData,
+    dataSource: viewData,
     locale: locale,
     format: format
     // columns={convertColumns(mergedColumns)}
@@ -427,7 +470,7 @@ const InternalTable = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     setColumnSizing: setColumnSizing,
-    rowSelection: rowSelection,
+    rowSelection: effectiveRowSelection,
     pagination: pagination
   })))));
 };