Select Multiple Rows by Holding Shift

[nleroy917]

I've been trying to figure this out for a little bit. Is there a way to override the select behavior such that I can select multiple rows by holding shit? That is, select a row, then hold shift and select a row multiple rows down and then all the in-between rows will be populated. I found this on stack-overflow, but there isn't enough context really to figure it out.

Is there a way to implement this? How can I reach into the table and override the toggleRowSelected function to search for those "in-between" rows and select them if not selected.

Thanks!

[vitalikda]

@nleroy917 have you found a way to implement multi select?

[1UDIT]

@nleroy917 @vitalikda have you found any solution? please send me an example/code

[ZiedHf]

@U121 See my answer below

[ZiedHf]

Don't use toggleRowsSelected.

Create instead a new action in the internal React State Reducer and pass the row indexes you want to select or deselct in this format : { [index1]: boolean, [index2]: boolean .... }

So { 0: true, 1: true, 2:true, 3: false } which will select the first three rows and deselct the fourth one.

Then you can save the last focused row and the last clicked row whi;le holding shift and pass all the indexes in between to that new action.

Check also the dispatch method provided useTable.

[ZiedHf]

I am not sure if I get your question.

The state of react-table contains rowSelection.

Let's say you want to add a new selected row to your current selection :

const onAddNewSelectedRow = (id) => setState(previousState => ({...previousState, rowSelection: {...previousState.rowSelection, [id]: true }}))

[BSeblu]

I know how to manipulate the set of selected rows via the row selection state. What I try to do is implement a range selection: toggle first item of the range then shift+click the last item. For that, I need to keep track of the last toggled item. The row selection state isn't able to model that.
If thats a special case and the table state type is not meant to be extendable, its ok. I can work around this.

[ZiedHf]

If you already know now how to change the selected status of one or multiple rows. Now you need just to get the ids. Right ?
So that's a different issue. You will need to implement your own logic :

• Set your previous focused/clicked row (A) somewhere
• Same with the last clicked row (B)
• Test if shift is pressed
• Get the ids of rows in between (loop from A to B)
• Then use setState to change theirs selection status from false to true

[ZiedHf]

const shiftSelect = React.useCallback(
        (row: Row<TRowData>) => {
            if (!lastFocusedRowId || oneExpandableRowIsSelected(selectedFlatRows)) {
                return;
            }

            const lastIndex = getRowIndex(rows, getRowById(rows, lastFocusedRowId));
            const index = getRowIndex(rows, row);

            if (lastIndex !== undefined && lastIndex !== index) {
                const min = index > lastIndex ? lastIndex + 1 : index;
                const max = index > lastIndex ? index + 1 : lastIndex;

                const newSelectedRows = rows.slice(min, max).filter((r) => !isExpandableRow(r));
                toggleSelect(newSelectedRows, [], row, SelectBehaviorType.ADD_TO_SELECTION);
            }
        },
        [rows, selectedFlatRows, lastFocusedRowId, toggleSelect]
    );

[BSeblu]

Yes, something like that 👍 I just thought that i could store this "previously clicked item" in the table state itself. But I get that this might not be the concern of this library.

I think I'm ok with that. Thx a lot🙏🏽

[chiptus]

I use the following for v8, it's a column definition that has inner state for last selected id:

import { ColumnDef, Row } from '@tanstack/react-table';

import { Checkbox } from '@@/form-components/Checkbox';

export function createSelectColumn<T>(): ColumnDef<T> {
  let lastSelectedId = '';

  return {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        id="select-all"
        checked={table.getIsAllRowsSelected()}
        indeterminate={table.getIsSomeRowsSelected()}
        onChange={table.getToggleAllRowsSelectedHandler()}
      />
    ),
    cell: ({ row, table }) => (
      <Checkbox
        id={`select-row-${row.id}`}
        checked={row.getIsSelected()}
        indeterminate={row.getIsSomeSelected()}
        onChange={row.getToggleSelectedHandler()}
        onClick={(e) => {
          if (e.shiftKey) {
            const { rows, rowsById } = table.getRowModel();
            const rowsToToggle = getRowRange(rows, row.id, lastSelectedId);
            const isLastSelected = rowsById[lastSelectedId].getIsSelected();
            rowsToToggle.forEach((row) => row.toggleSelected(isLastSelected));
          }

          lastSelectedId = row.id;
        }}
      />
    ),
    maxSize: 50,
  };
}

function getRowRange<T>(rows: Array<Row<T>>, idA: string, idB: string) {
  const range: Array<Row<T>> = [];
  let foundStart = false;
  let foundEnd = false;
  for (let index = 0; index < rows.length; index += 1) {
    const row = rows[index];
    if (row.id === idA || row.id === idB) {
      if (foundStart) {
        foundEnd = true;
      }
      if (!foundStart) {
        foundStart = true;
      }
    }

    if (foundStart) {
      range.push(row);
    }

    if (foundEnd) {
      break;
    }
  }

  return range;
}

I know the getRange is ugly, would love suggestions how to clean it

[Philistino]

Thanks, @chiptus, this is helpful!

For anyone else running into this issue, here is some important nuance:

table.getRowModel() only returns the visible rows so if the user changes the range of rows visible (e.g., sorted, filtered, paginated) before shift+clicking, the rows returned by getRowRange returns the wrong subset of rows.

To remedy this, you could use table.getSortedRowModel() instead of table.getRowModel(). However, this makes the selection process really slow, so I don't recommend it for tables with many rows.

Furthermore, one should think about what behavior they should provide the user in the case of filtering. Consider the case when the user selects a row, then applies a filter that removes rows between the selected row and their shift+click row. Should the table select all rows between the two or only the rows that appear with the filter applied? What if the first row selected was filtered out?

For this reason, I am limiting the shift+click to rows on the same page:

function getRowRange<T>(rows: Array<Row<T>>, idA: string, idB: string) {
  const range: Array<Row<T>> = []
  let foundStart = false
  let foundEnd = false
  for (let index = 0; index < rows.length; index += 1) {
    const row = rows[index]
    if (row.id === idA || row.id === idB) {
      if (foundStart) {
        foundEnd = true
      }
      if (!foundStart) {
        foundStart = true
      }
    }
    if (foundStart) {
      range.push(row)
    }
    if (foundEnd) {
      break
    }
  }
  // added this check
  if (!foundEnd) {
    throw Error('Could not find whole row range')
  }
  return range
}

onClick: (e: MouseEvent) => {
  if (e.shiftKey) {
    const { rows, rowsById } = table.getRowModel()
    try {
      const rowsToToggle = getRowRange(rows, row.id, lastSelectedId)
      const isLastSelected = rowsById[lastSelectedId].getIsSelected()
      rowsToToggle.forEach((row) => row.toggleSelected(isLastSelected))
    } catch (e) {
     // Show the user a message
      useToast().toast({
        description: 'Multi-select with shift+click is disabled across multiple pages'
      })
      row.toggleSelected(!row.getIsSelected())
    }
  } else {
    row.toggleSelected(!row.getIsSelected())
  }
  lastSelectedId = row.id
}

@LoicKairon's solution is elegant if you use the default row ID implementation, but it doesn't address the issues above.

[LoicKairon]

@chiptus thanks for sharing that! very useful!

Here's my version, with another version of the getRowRange method:

        onClick={(e: MouseEvent<HTMLInputElement>): void => {
          if (e.shiftKey) {
            const { rows, rowsById } = table.getRowModel();
            const rowsToToggle = getRowRange(rows, Number(row.id), Number(lastSelectedID));
            const isCellSelected = rowsById[row.id].getIsSelected();
            rowsToToggle.forEach((_row) => _row.toggleSelected(!isCellSelected));
          } else {
            row.toggleSelected();
          }

          lastSelectedID = row.id;
        }}

const getRowRange = (rows: Row<T>[], currentID: number, selectedID: number): Row<T>[] => {
  const rangeStart = selectedID > currentID ? currentID : selectedID;
  const rangeEnd = rangeStart === currentID ? selectedID : currentID;
  return rows.slice(rangeStart, rangeEnd + 1);
};

[Zain-ul-din]

@LoicKairon This is not a good approach since it's not working with pagination