Skip to content

Add Shift-click range selection to HyperTableV2 - #291

Merged
JulienVannier66 merged 3 commits into
masterfrom
jv/vel-6988/hypertable-add-support-for-contiguous-shift-click-selection
Nov 3, 2026
Merged

JulienVannier66 merged 3 commits into
masterfrom
jv/vel-6988/hypertable-add-support-for-contiguous-shift-click-selection

Conversation

@JulienVannier66

Copy link
Copy Markdown
Contributor

What does this PR do?

Adds contiguous selection to HyperTableV2: holding Shift while clicking a row of the selection column applies the state of the last clicked row to every loaded row in between, in both directions.

  • TableHandler owns the anchor and the range through updateSelectionRange(row). In global mode (selection = 'all'), the range updates exclusion instead of selection.
  • The component intercepts Shift-clicks in the capture phase on the selection cell, because OSS::Checkbox stops the propagation and does not forward the event. Clicks without Shift keep their existing path.
  • user-select: none on the selection cells prevents the native text selection on Shift-click.

Related to : https://linear.app/upfluence/issue/VEL-6988/hypertable-add-support-for-contiguous-shift-click-selection

What are the observable changes?

In every Hypertable v2 table with selection enabled (Payments, Workflow > Creators, Workflow > Affiliate performance, IRM, Inbox):

  • Check row 2, then Shift-click row 5: rows 2 to 5 are checked. It works the same way upward.
  • Uncheck row 5, then Shift-click row 3: rows 3 to 5 are unchecked.
  • With Select all, uncheck row 2, then Shift-click row 5: rows 2 to 5 are excluded and the counter drops by 4.
  • When the range has nothing to change, only the clicked row is toggled, so a Shift-click always has an effect.

🧑‍💻 Developer Heads Up

⚡ Since we are using Ember Octane now:

  • Feel free to migrate existing components to Glimmer Components.
  • Write new ones exclusively in it.

Useful Resource : Ember Octane vs Classic Cheat Sheet

Good PR checklist

  • Title makes sense
  • Is against the correct branch
  • Only addresses one issue
  • Properly assigned
  • Added/updated tests
  • Added/updated documentation
  • Migrated touched components to Glimmer Components
  • Properly labeled

Additional Notes

  • The anchor is the last clicked row. It is stored as a Row, so prependRows does not shift it, and it is reset by clearSelection, selectAllGlobal and toggleSelectAll. Without a valid anchor, a Shift-click toggles the clicked row alone.
  • The range applies the state of the anchor, not the opposite of the clicked row, and only covers loaded rows.
  • The browserslist bump has its own commit: 4.24.4 does not parse the baseline queries of upfluence-web, which breaks the build when hypertable is linked with pnpm link.
  • Only checked on Chromium. -webkit-user-select is there for Safari but was not tested on it.

@JulienVannier66 JulienVannier66 self-assigned this Oct 30, 2026
@JulienVannier66
JulienVannier66 requested review from a team and phndiaye as code owners October 30, 2026 16:27
@JulienVannier66
JulienVannier66 removed the request for review from a team October 30, 2026 16:27
@linear-code

linear-code Bot commented Oct 30, 2026

Copy link
Copy Markdown

VEL-6988

Comment thread addon/core/handler.ts Outdated
const selected = this.isRowSelected(this.rows[anchorIndex]);
const range = this.rows
.slice(Math.min(anchorIndex, rowIndex), Math.max(anchorIndex, rowIndex) + 1)
.filter((rangeRow) => !rangeRow._isLoading);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we sure we want to exclude these? 🤔

Comment thread addon/core/handler.ts
}
}

updateSelectionRange(row: Row): boolean {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think we can split this one a bit more

@phndiaye phndiaye left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pre LGTM

@olxmpe olxmpe left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Except Phil's comments LGTM

@JulienVannier66
JulienVannier66 merged commit 6b77e86 into master Nov 3, 2026
5 checks passed
@JulienVannier66
JulienVannier66 deleted the jv/vel-6988/hypertable-add-support-for-contiguous-shift-click-selection branch November 3, 2026 14:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants