How to select all sorted rows between currently selected and a given row?

[geeseofbeverlyroad]

I have a sortable and filterable table with many rows. Selecting individual rows with row.toggleSelected() works fine. I want to implement a standard shift-select functionality, where clicking on a row, then shift clicking another row, selects all rows inbetween.

So how would I write the implementation of this function?

const selectFromCurrentToRow = <TData>(table: Table<TData>, selectUpTo: Row<TData>) => {
  /* implementation */
}`

Note: I don't want to just select rows by ID between the currently selected row's ID and the newly selected one's, as they are sorted and filtered, so the rows displayed in the table go in some arbitrary sequence of IDs like [ 12, 4, 15, 0, 5 ... ]).

[agammann]

For v8, use the positions in table.getRowModel().rows and keep the last normally clicked row's ID as an explicit anchor. The selection state can contain several rows, so it does not identify that anchor by itself.

For a flat table:

import type { Table } from '@tanstack/table-core';

function selectRange<TData>(
  table: Table<TData>,
  anchorId: string,
  targetId: string,
) {
  const rows = table.getRowModel().rows;
  const anchorIndex = rows.findIndex(row => row.id === anchorId);
  const targetIndex = rows.findIndex(row => row.id === targetId);
  if (anchorIndex < 0 || targetIndex < 0) return;

  const start = Math.min(anchorIndex, targetIndex);
  const end = Math.max(anchorIndex, targetIndex);
  table.setRowSelection(previous => {
    const next = { ...previous };
    for (const row of rows.slice(start, end + 1)) {
      if (row.getCanSelect()) next[row.id] = true;
    }
    return next;
  });
}

On an ordinary click, store row.id as the anchor. On a shift-click, call selectRange(table, anchorId, row.id). This adds the inclusive range and preserves selections outside it.

I tested this with @tanstack/table-core 8.21.2 and 8.21.3: filtering and descending sorting changed the displayed order, and the range still selected the correct rows in both directions. It also skipped rows with selection disabled. With client pagination, this uses the current page; use getPrePaginationRowModel().rows if your intended range spans all loaded pages.

The row models guide explains the processing order, and the selection guide covers storing selection by row ID.