Extend the selected cell range on shift + click.

lib/index.d.ts

@@ -303,6 +303,8 @@ interface Renderers<TRow, TSummaryRow> {
 interface SelectCellOptions {
   enableEditor?: Maybe<boolean>;
   shouldFocusCell?: Maybe<boolean>;
+  /** Extend the selected range from the selected cell instead of moving the selection */
+  extendRange?: Maybe<boolean>;
 }
 interface ColumnWidth {
   readonly type: 'resized' | 'measured';

src/Cell.tsx

@@ -71,8 +71,13 @@ function Cell<R, SR>({
   function handleMouseDown(event: MouseEvent<HTMLDivElement>) {
     onMouseDown?.(event);
     if (!handleMouseEvent(event, onCellMouseDown)) {
-      // select cell if the event is not prevented
-      selectCellWrapper();
+      // select cell if the event is not prevented, or extend the
+      // selected range up to this cell on shift + click
+      if (rangeSelectionMode && event.shiftKey) {
+        selectCell({ rowIdx, idx: column.idx }, { extendRange: true });
+      } else {
+        selectCellWrapper();
+      }
     }
   }
 

src/DataGrid.tsx

@@ -966,6 +966,31 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     if (!isCellWithinSelectionBounds(position)) return;
     commitEditorChanges();
 
+    if (
+      options?.extendRange &&
+      enableRangeSelection &&
+      selectedPosition.idx >= 0 &&
+      isRowIdxWithinViewportBounds(selectedPosition.rowIdx) &&
+      isRowIdxWithinViewportBounds(position.rowIdx)
+    ) {
+      // Keep the selected cell as the anchor, as shift + arrow keys do
+      if (selectedPosition.mode === 'EDIT') {
+        // close the editor, its changes have been committed above
+        setSelectedPosition({
+          idx: selectedPosition.idx,
+          rowIdx: selectedPosition.rowIdx,
+          mode: 'SELECT'
+        });
+      }
+      setSelectedRangeWithBoundary({
+        startColumnIdx: selectedPosition.idx,
+        startRowIdx: selectedPosition.rowIdx,
+        endColumnIdx: position.idx,
+        endRowIdx: position.rowIdx
+      });
+      return;
+    }
+
     const samePosition = isSamePosition(selectedPosition, position);
 
     if (options?.enableEditor && isCellEditable(position)) {
@@ -974,6 +999,20 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     } else if (samePosition) {
       // Avoid re-renders if the selected cell state is the same
       scrollIntoView(getCellToScroll(gridRef.current!));
+      // Clicking the selected cell collapses an extended range back to that cell
+      setSelectedRange((range) =>
+        range.startColumnIdx === position.idx &&
+        range.endColumnIdx === position.idx &&
+        range.startRowIdx === position.rowIdx &&
+        range.endRowIdx === position.rowIdx
+          ? range
+          : {
+              startColumnIdx: position.idx,
+              startRowIdx: position.rowIdx,
+              endColumnIdx: position.idx,
+              endRowIdx: position.rowIdx
+            }
+      );
     } else {
       setShouldFocusCell(options?.shouldFocusCell === true);
       setSelectedPosition({ ...position, mode: 'SELECT' });

src/types.ts

@@ -363,6 +363,8 @@ export interface Renderers<TRow, TSummaryRow> {
 export interface SelectCellOptions {
   enableEditor?: Maybe<boolean>;
   shouldFocusCell?: Maybe<boolean>;
+  /** Extend the selected range from the selected cell instead of moving the selection */
+  extendRange?: Maybe<boolean>;
 }
 
 export interface ColumnWidth {

test/browser/rangeSelection.test.tsx

@@ -1,4 +1,4 @@
-import { userEvent } from '@vitest/browser/context';
+import { page, userEvent } from '@vitest/browser/context';
 
 import type { Column } from '../../src';
 import type { CellsRange } from '../../src/types';
@@ -16,25 +16,50 @@ const columns: readonly Column<Row>[] = [
   { key: 'c', name: 'C' }
 ];
 
-const rows: readonly Row[] = [
-  { a: 'a1', b: 'b1', c: 'c1' },
-  { a: 'a2', b: 'b2', c: 'c2' },
-  { a: 'a3', b: 'b3', c: 'c3' }
-];
+const rows: readonly Row[] = Array.from({ length: 5 }, (_, rowIdx) => ({
+  a: `a${rowIdx + 1}`,
+  b: `b${rowIdx + 1}`,
+  c: `c${rowIdx + 1}`
+}));
+
+const onSelectedRangeChange = vi.fn<(range: CellsRange) => void>();
+
+function setupGrid(enableRangeSelection = true) {
+  onSelectedRangeChange.mockClear();
+  setup<Row, unknown>({ columns, rows, enableRangeSelection, onSelectedRangeChange });
+}
+
+async function shiftClick(name: string) {
+  await userEvent.keyboard('{Shift>}');
+  await userEvent.click(getCell(name));
+  await userEvent.keyboard('{/Shift}');
+}
+
+function getSelectedCells() {
+  return page.getByRole('gridcell', { selected: true });
+}
+
+function expectRange(
+  startRowIdx: number,
+  startColumnIdx: number,
+  endRowIdx: number,
+  endColumnIdx: number
+) {
+  expect(onSelectedRangeChange).toHaveBeenLastCalledWith({
+    startRowIdx,
+    startColumnIdx,
+    endRowIdx,
+    endColumnIdx
+  });
+}
 
 test('shift + arrow keys extend the selected range when range selection is enabled', async () => {
-  const onSelectedRangeChange = vi.fn<(range: CellsRange) => void>();
-  setup<Row, unknown>({ columns, rows, enableRangeSelection: true, onSelectedRangeChange });
+  setupGrid();
 
   await userEvent.click(getCell('a1'));
   await userEvent.keyboard('{Shift>}{ArrowDown}{ArrowRight}{/Shift}');
 
-  expect(onSelectedRangeChange).toHaveBeenLastCalledWith({
-    startRowIdx: 0,
-    startColumnIdx: 0,
-    endRowIdx: 1,
-    endColumnIdx: 1
-  });
+  expectRange(0, 0, 1, 1);
   await expect.element(getCell('b2')).toHaveAttribute('aria-selected', 'true');
   await expect.element(getCell('c3')).toHaveAttribute('aria-selected', 'false');
 
@@ -45,11 +70,70 @@ test('shift + arrow keys extend the selected range when range selection is enabl
 });
 
 test('shift + arrow keys navigate when range selection is disabled', async () => {
-  const onSelectedRangeChange = vi.fn<(range: CellsRange) => void>();
-  setup<Row, unknown>({ columns, rows, onSelectedRangeChange });
+  setupGrid(false);
 
   await userEvent.click(getCell('a1'));
   await userEvent.keyboard('{Shift>}{ArrowDown}{ArrowRight}{/Shift}');
   await validateCellPosition(1, 2);
   await expect.element(getCell('a1')).toHaveAttribute('aria-selected', 'false');
 });
+
+test('shift + click extends the range from the selected cell', async () => {
+  setupGrid();
+  await userEvent.click(getCell('a2'));
+  expectRange(1, 0, 1, 0);
+  await expect.poll(() => getSelectedCells().elements()).toHaveLength(1);
+
+  await shiftClick('c4');
+  expectRange(1, 0, 3, 2);
+  await expect.poll(() => getSelectedCells().elements()).toHaveLength(9);
+  await expect.element(getCell('a2')).toHaveAttribute('aria-selected', 'true');
+  await expect.element(getCell('c4')).toHaveAttribute('aria-selected', 'true');
+  await expect.element(getCell('a5')).toHaveAttribute('aria-selected', 'false');
+});
+
+test('shift + click extends the range upwards and leftwards', async () => {
+  setupGrid();
+  await userEvent.click(getCell('c4'));
+  await shiftClick('b2');
+  expectRange(1, 1, 3, 2);
+  await expect.poll(() => getSelectedCells().elements()).toHaveLength(6);
+  await expect.element(getCell('a2')).toHaveAttribute('aria-selected', 'false');
+});
+
+test('shift + click again keeps the selected cell as the anchor', async () => {
+  setupGrid();
+  await userEvent.click(getCell('b2'));
+  await shiftClick('c4');
+  expectRange(1, 1, 3, 2);
+  await shiftClick('a1');
+  expectRange(0, 0, 1, 1);
+  await expect.poll(() => getSelectedCells().elements()).toHaveLength(4);
+});
+
+test('plain click resets the extended range', async () => {
+  setupGrid();
+  await userEvent.click(getCell('a2'));
+  await shiftClick('c4');
+  await expect.poll(() => getSelectedCells().elements()).toHaveLength(9);
+
+  await userEvent.click(getCell('b5'));
+  expectRange(4, 1, 4, 1);
+  await expect.poll(() => getSelectedCells().elements()).toHaveLength(1);
+  await expect.element(getCell('b5')).toHaveAttribute('aria-selected', 'true');
+
+  // clicking the selected cell itself also collapses the range
+  await shiftClick('c3');
+  await expect.poll(() => getSelectedCells().elements()).toHaveLength(6);
+  await userEvent.click(getCell('b5'));
+  expectRange(4, 1, 4, 1);
+  await expect.poll(() => getSelectedCells().elements()).toHaveLength(1);
+});
+
+test('shift + click moves the selected cell when range selection is disabled', async () => {
+  setupGrid(false);
+  await userEvent.click(getCell('a2'));
+  await shiftClick('c4');
+  await expect.poll(() => getSelectedCells().elements()).toHaveLength(1);
+  await expect.element(getCell('c4')).toHaveAttribute('aria-selected', 'true');
+});