es-grid-template 1.9.94 → 1.9.95

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+## 1.9.95 / 06-11-2026
+
+### Added
+- Added opt-in `selectionSettings.pruneSelectionOutsideView` (default `false`) to keep selected rows within the current filtered data view.
+
+### Fixed
+- Preserved existing selection on sorting, grouping, expand/collapse and virtual scrolling when rows remain in the view.
+- Synchronized selection callbacks with current view rows, preserving original `children` data.
+- Fixed group selection with disabled child rows, including `getCheckboxProps` rules based on tree structure.
+- Kept existing selection during temporary loading and preserved legacy behavior when the option is disabled.
+
+## 0.0.1 /  20-02-2025
+
+add package

package/es/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/es/grid-component/type.d.ts

@@ -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/hook/utils.d.ts

@@ -167,7 +167,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     haveSum?: boolean;
     isSummary?: boolean;
     sumGroup?: boolean;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
     sorter?: boolean;
     allowFiltering?: boolean;
     allowSortering?: boolean;
@@ -179,27 +179,27 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     showFilterSearch?: boolean;
     hidden?: boolean;
     visible?: boolean;
-    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     columnGroupText?: string;
     headerTextAlign?: import("./../../grid-component/type").ITextAlign;
-    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     fixedType?: import("./../../grid-component/type").FixedType;
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: boolean;
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
-    template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    linkTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
-    }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    onCellStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

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/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/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/type.d.ts

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

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

@@ -60,16 +60,46 @@ const Grid = props => {
     setColumnSizing,
     columnFilters,
     setColumnOrder,
-    rowSelection,
     className: tableClassNames,
     ...rest
   } = props;
+  const selectedRowState = table.getState().rowSelection;
   const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
     isChange: false,
     type: '',
     rowData: {},
     rowsData: []
   });
+  const rowSelectedRef = _react.default.useRef(rowSelected);
+  _react.default.useEffect(() => {
+    rowSelectedRef.current = rowSelected;
+  }, [rowSelected]);
+  const pruneSelection = selectionSettings?.pruneSelection === true;
+  const selectedViewRows = _react.default.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.default.useRef(null);
+
+  // Keep event handlers in sync with the view without another state/effect.
+  const selectionChange = pruneSelection && !props.loading ? {
+    ...isSelectionChange,
+    rowsData: selectedViewRows
+  } : isSelectionChange;
+  _react.default.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.default.useState(false);
   const [filterChange, setFilterChange] = _react.default.useState(false);
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
@@ -86,18 +116,17 @@ const Grid = props => {
   // }, [mergedSelectedKeys])
 
   _react.default.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 = (0, _utils.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.default.useEffect(() => {
     if (sorterChange) {
       const aa = table.getState().sorting;
@@ -188,7 +217,7 @@ const Grid = props => {
     originData: originData,
     prefix: prefix,
     selectionSettings: selectionSettings,
-    isSelectionChange: isSelectionChange,
+    isSelectionChange: selectionChange,
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,
@@ -258,7 +287,7 @@ const Grid = props => {
     originData: originData,
     prefix: prefix,
     selectionSettings: selectionSettings,
-    isSelectionChange: isSelectionChange,
+    isSelectionChange: selectionChange,
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.94",
+  "version": "1.9.95",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -47,7 +47,7 @@
     "@hookform/resolvers": "5.0.1",
     "@popperjs/core": "2.11.8",
     "@rc-component/color-picker": "2.0.1",
-    "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/father-plugin": "2.0.1",
     "@rc-component/trigger": "2.0.0",
     "@rc-component/util": "1.0.1",
     "@tanstack/react-table": "8.21.3",