Feature: Allow range selection over multiple pages

Author: rayman-de

components/lib/datatable/DataTable.js

@@ -1704,6 +1704,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 lazy={props.lazy}
                 loading={props.loading}
                 metaKeySelection={props.metaKeySelection}
+                multiPageRangeSelection={props.multiPageRangeSelection}
                 onCellClick={props.onCellClick}
                 onCellSelect={props.onCellSelect}
                 onCellUnselect={props.onCellUnselect}
@@ -1790,6 +1791,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 lazy={props.lazy}
                 loading={props.loading}
                 metaKeySelection={props.metaKeySelection}
+                multiPageRangeSelection={props.multiPageRangeSelection}
                 onCellClick={props.onCellClick}
                 onCellSelect={props.onCellSelect}
                 onCellUnselect={props.onCellUnselect}

components/lib/datatable/TableBody.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { localeOption } from '../api/Api';
 import { ColumnBase } from '../column/ColumnBase';
-import { useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMergeProps, useUnmountEffect } from '../hooks/Hooks';
 import { DomHandler, ObjectUtils } from '../utils/Utils';
 import { BodyRow } from './BodyRow';
 import { RowTogglerButton } from './RowTogglerButton';
@@ -167,7 +167,7 @@ export const TableBody = React.memo(
         };
 
         const allowRangeSelection = (event) => {
-            return isMultipleSelection() && event.originalEvent.shiftKey && anchorRowIndex.current !== null;
+            return isMultipleSelection() && event.originalEvent.shiftKey && anchorRowIndex.current !== null && (anchorRowFirst.current === props.first || (props.multiPageRangeSelection && !props.lazy));
         };
 
         const allowRowSelection = () => {
@@ -882,12 +882,6 @@ export const TableBody = React.memo(
             }
         });
 
-        useUpdateEffect(() => {
-            if (props.paginator && isMultipleSelection()) {
-                anchorRowIndex.current = null;
-            }
-        }, [props.first]);
-
         useUnmountEffect(() => {
             if (props.dragSelection) {
                 unbindDragSelectionEvents();

components/lib/datatable/datatable.d.ts

@@ -1248,6 +1248,10 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
      * An array of SortMeta objects to sort the data by default in multiple sort mode.
      */
     multiSortMeta?: DataTableSortMeta[] | null | undefined;
+    /**
+     * Defines whether a range selection can cover multiple pages.
+     */
+    multiPageRangeSelection?: boolean;
     /**
      * Number of page links to display.
      * @defaultValue 5