Add Shift-click range selection to HyperTableV2

README.md

@@ -356,11 +356,17 @@ this.tableHandler.clearSelection();
 // Update individual row selection
 this.tableHandler.updateSelection(row);
 
+// Apply the state of the last clicked row up to this one
+// Returns false when no range applies (no anchor, removed anchor, or nothing to change)
+this.tableHandler.updateSelectionRange(row);
+
 // Access current selection state
 const selection = this.handler.selection; // Row[] | 'all'
 const exclusions = this.handler.exclusion; // Row[] (when selection is 'all')
 ```
 
+Holding Shift while clicking on a row of the selection column applies the state of the last clicked row to every loaded row in between, in both directions. In global mode, the range updates `exclusion` instead of `selection`. When the range has nothing to change, only the clicked row is toggled. The anchor is reset by `clearSelection`, `selectAllGlobal` and `toggleSelectAll`.
+
 ### Filtering and Ordering
 
 Filter and order structures are used internally by the TableHandler to manage table state and are passed to the TableManager for persistence. See `@upfluence/hypertable/core/interfaces/column.ts` for complete type definitions:

addon/components/hyper-table-v2/index.hbs

@@ -124,6 +124,7 @@
                       @onClick={{fn this.toggleRowSelection row}}
                       @onHover={{this.onRowHover}}
                       @loading={{row._isLoading}}
+                      {{on "click" (fn this.onSelectionCellClick row) capture=true}}
                     >
                       <OSS::Checkbox
                         @checked={{if

addon/components/hyper-table-v2/index.ts

@@ -234,6 +234,18 @@ export default class HyperTableV2 extends Component<HyperTableV2Args> {
     }
   }
 
+  @action
+  onSelectionCellClick(row: Row, event: MouseEvent): void {
+    if (!event.shiftKey || row._isLoading) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!this.args.handler.updateSelectionRange(row)) {
+      this.toggleRowSelection(row);
+    }
+  }
+
   @action
   scrollToEnd(): void {
     const table = this.innerTableElement;

addon/core/handler.ts

@@ -44,6 +44,7 @@ export default class TableHandler {
   private _context: unknown;
   private _renderingResolver?: RendererResolver;
   private _lastOrderedColumn?: Column;
+  private _selectionAnchor?: Row;
 
   tableManager: TableManager;
   rowsFetcher: RowsFetcher;
@@ -425,6 +426,7 @@ export default class TableHandler {
         this.selectAllGlobal();
       } else {
         this.selection = this.rows;
+        this._selectionAnchor = undefined;
       }
     } else {
       this.clearSelection();
@@ -439,6 +441,7 @@ export default class TableHandler {
   selectAllGlobal(): void {
     this.selection = 'all';
     this.exclusion = [];
+    this._selectionAnchor = undefined;
   }
 
   /**
@@ -449,6 +452,7 @@ export default class TableHandler {
   clearSelection(): void {
     this.selection = [];
     this.exclusion = [];
+    this._selectionAnchor = undefined;
   }
 
   /**
@@ -458,6 +462,7 @@ export default class TableHandler {
    */
   updateSelection(row: Row): void {
     this.selection = this.selection instanceof Array ? this.selection : [];
+    this._selectionAnchor = row;
 
     if (this.selection.includes(row)) {
       this.selection = this.selection.filter((selectedRow: Row) => selectedRow !== row);
@@ -475,13 +480,36 @@ export default class TableHandler {
    * @param {Row} row
    */
   updateExclusion(row: Row): void {
+    this._selectionAnchor = row;
+
     if (this.exclusion.includes(row)) {
       this.exclusion = this.exclusion.filter((excludedRow: Row) => excludedRow !== row);
     } else {
       this.exclusion = [...this.exclusion, row];
     }
   }
 
+  updateSelectionRange(row: Row): boolean {
+    const anchor = this._selectionAnchor;
+
+    if (!anchor) return false;
+
+    const range = this.getRowsBetween(anchor, row);
+    const selected = this.isRowSelected(anchor);
+
+    if (!range.length || range.every((rangeRow) => this.isRowSelected(rangeRow) === selected)) return false;
+
+    this._selectionAnchor = row;
+
+    if (this.selection === 'all') {
+      this.applyRangeToExclusion(range, !selected);
+    } else {
+      this.applyRangeToSelection(this.selection, range, selected);
+    }
+
+    return true;
+  }
+
   /**
    * Toggles an instance of Tether for a given column.
    *
@@ -522,6 +550,42 @@ export default class TableHandler {
     this.currentPage = 1;
   }
 
+  private isRowSelected(row: Row): boolean {
+    return this.selection === 'all' ? !this.exclusion.includes(row) : this.selection.includes(row);
+  }
+
+  private getRowsBetween(from: Row, to: Row): Row[] {
+    const fromIndex = this.rows.indexOf(from);
+    const toIndex = this.rows.indexOf(to);
+
+    if (fromIndex === -1 || toIndex === -1) return [];
+
+    return this.rows.slice(Math.min(fromIndex, toIndex), Math.max(fromIndex, toIndex) + 1);
+  }
+
+  private applyRangeToExclusion(range: Row[], excluded: boolean): void {
+    this.exclusion = this.mergeRange(this.exclusion, range, excluded);
+
+    if (this.exclusion.length === this.rowsMeta?.total) {
+      this.clearSelection();
+    }
+  }
+
+  private applyRangeToSelection(selection: Row[], range: Row[], selected: boolean): void {
+    this.selection = this.mergeRange(selection, range, selected);
+
+    if (selected && this.selection.length === this.rowsMeta?.total) {
+      this.selection = 'all';
+    }
+  }
+
+  private mergeRange(rows: Row[], range: Row[], included: boolean): Row[] {
+    const rangeRows = new Set(range);
+    const rowsOutsideRange = rows.filter((row) => !rangeRows.has(row));
+
+    return included ? [...rowsOutsideRange, ...range] : rowsOutsideRange;
+  }
+
   private upsertTetherInstance(options: Tether.ITetherOptions): void {
     if (this.tetherInstance) {
       this.tetherInstance.setOptions(options);

app/styles/columns.less

@@ -169,6 +169,8 @@
 
   .hypertable__cell {
     border-right: none;
+    -webkit-user-select: none;
+    user-select: none;
   }
 }