TableBody: Fix range selection when lazy loading is enabled

Author: rayman-de

components/lib/datatable/TableBody.js

@@ -192,6 +192,10 @@ export const TableBody = React.memo(
             return options ? options[option] : null;
         };
 
+        const getProcessedDataIndex = (rowIndex) => {
+            return props.lazy ? rowIndex - props.first : rowIndex
+        }
+
         const findIndex = (collection, rowData) => {
             return (collection || []).findIndex((data) => equals(rowData, data));
         };
@@ -336,15 +340,17 @@ export const TableBody = React.memo(
             let rangeEnd;
 
             const isAllowCellSelection = allowCellSelection();
-
-            if (rangeRowIndex.current > anchorRowIndex.current) {
-                rangeStart = anchorRowIndex.current;
-                rangeEnd = rangeRowIndex.current;
-            } else if (rangeRowIndex.current < anchorRowIndex.current) {
-                rangeStart = rangeRowIndex.current;
-                rangeEnd = anchorRowIndex.current;
+            const rangeRowIndexInProcessedData = getProcessedDataIndex(rangeRowIndex.current);
+            const anchorRowIndexInProcessedData = getProcessedDataIndex(anchorRowIndex.current);
+
+            if (rangeRowIndexInProcessedData > anchorRowIndexInProcessedData) {
+                rangeStart = anchorRowIndexInProcessedData
+                rangeEnd = rangeRowIndexInProcessedData;
+            } else if (rangeRowIndexInProcessedData < anchorRowIndexInProcessedData) {
+                rangeStart = rangeRowIndexInProcessedData;
+                rangeEnd = anchorRowIndexInProcessedData;
             } else {
-                rangeStart = rangeEnd = rangeRowIndex.current;
+                rangeStart = rangeEnd = rangeRowIndexInProcessedData;
             }
 
             return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
@@ -389,7 +395,7 @@ export const TableBody = React.memo(
             for (let i = rowRangeStart; i <= rowRangeEnd; i++) {
                 let rowData = value[i];
                 let columns = props.columns;
-                let rowIndex = props.paginator ? i + props.first : i;
+                let rowIndex = props.lazy ? i + props.first : i;
 
                 for (let j = cellRangeStart; j <= cellRangeEnd; j++) {
                     let field = getColumnProp(columns[j], 'field');
@@ -920,7 +926,7 @@ export const TableBody = React.memo(
         };
 
         const createGroupHeader = (rowData, rowIndex, expanded, colSpan) => {
-            if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
+            if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, getProcessedDataIndex(rowIndex))) {
                 const style = rowGroupHeaderStyle();
                 const toggler = props.expandableRowGroups && (
                     <RowTogglerButton