- set rangeSelectionMode property to data grid components

- set isShiftClick property to useRowSelection react hook update function

Author: KijongHan

web/pgadmin/static/js/components/PgReactDataGrid.jsx

@@ -119,7 +119,7 @@ export function CustomRow({inTest=false, ...props}) {
 
   return (
     <Row {...props} onKeyDown={handleKeyDown} onCellClick={onCellClick} onCellDoubleClick={onCellDoubleClick}
-      selectCell={(row, column)=>props.selectCell(row, column)} aria-selected={isRowSelected}/>
+      selectCell={(row, column)=>props.selectCell(row, column)} aria-selected={isRowSelected} rangeSelectionMode={true}/>
   );
 }
 CustomRow.propTypes = {
@@ -158,6 +158,7 @@ export default function PgReactDataGrid({gridRef, className, hasSelectColumn=tru
           renderSortStatus,
           noRowsFallback: <Box textAlign="center" gridColumn="1/-1" p={1}>{noRowsIcon}{noRowsText || gettext('No rows found.')}</Box>,
         }}
+        enableRangeSelection={true}
         {...props}
       />
     </GridContextUtils.Provider>

web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx

@@ -116,7 +116,7 @@ function CustomRow(props) {
   };
   return (
     <RowInfoContext.Provider value={rowInfoValue}>
-      <Row ref={rowRef} onKeyDown={handleKeyDown} {...props} />
+      <Row ref={rowRef} onKeyDown={handleKeyDown} {...props} rangeSelectionMode={true}/>
     </RowInfoContext.Provider>
   );
 }
@@ -305,9 +305,9 @@ function RowNumColFormatter({row, rowKeyGetter, rowIdx, dataChangeStore, onSelec
   } else if(rowKey in (dataChangeStore?.deleted || {})) {
     rownum = rownum+'-';
   }
-  return (<div className='QueryTool-rowNumCell' onClick={()=>{
+  return (<div className='QueryTool-rowNumCell' onClick={(e)=>{
     onSelectedColumnsChange(new Set());
-    onRowSelectionChange({ type: 'ROW', row: row, checked: !isRowSelected, isShiftClick: false});
+    onRowSelectionChange({ type: 'ROW', row: row, checked: !isRowSelected, isShiftClick: (e.nativeEvent).shiftKey});
   }} onKeyDown={()=>{/* already taken care by parent */}}>
     {rownum}
   </div>);