feat(Table): Table shift click support

[r100-stack]

Closes #632

Checklist

• [x] Add meaningful unit tests for your component (verify that all lines are covered)
• [x] Verify that all existing tests pass
• [x] Add component features demo in Storybook (different stories)
• [x] Approve test images for new stories
• [x] Add screenshots of the key elements of the component

TODOs

• [x] When shift clicking, the browser also selects the content/text between the last clicked position and the current clicked position. How to stop this from happening? When searching for solutions, I only found answers to disable selection altogether, which is not what we want. We want to allow selection by mouse hold and select but disallow selection by shift clicks. How to achieve this?
• [x] Solve bug: Selecting a subrow selects all the rows vokoscreenNG-2022-08-29_10-07-30.webm
• [x] Solve bug: r.toggleRowSelected is not a function More details

Screenshots

1. Holding Shift selects rows from the lastSelectedRow to the clicked row (or subrows)
(Expandable Subrows Story)

vokoscreenNG-2022-09-20_08-49-36.webm

2. Doing a shift click resets the previous selection (like Windows File Explorer)
(SelectableMulti Story)

vokoscreenNG-2022-09-20_08-47-48.webm

3. If no row selected before shift clicking, then assume first row is the last selectedRow (like Windows File Explorer)
(Selectable Multi Story)

vokoscreenNG-2022-09-20_08-46-04.webm

4. Text selection is disabled when shift is held (if isSelectable && selectionMode === 'multi') (Selectable Multi Story)

vokoscreenNG-2022-09-20_08-40-30.webm

5. Can select from lower to upper rows also (instead of upper to lower) (Full 2 Story)

vokoscreenNG-2022-09-20_08-51-25.webm

Click to see old screenshot

https://user-images.githubusercontent.com/45748283/184366150-0d3ee646-b457-4928-9a7b-89f815a79048.mp4

[gretanausedaite]

Got error when trying to shift select in Full 2 story

[r100-stack]

Got error when trying to shift select in Full 2 story

This error is happening when running resetSelection() in selectHandler.ts. This method goes through all the rows and toggles them to false.

const resetSelection = () => {
  instance.rows.forEach((r) => {
    console.log(r);
    r.toggleRowSelected(false);
  });
};

But looks like after the row with id=25, toggleRowSelected() is not there in the row object.

I also got such inconsistent behavior in subrows in some of my trial shift selections. i.e. sometimes the subrows of some of the rows don't have all the attributes that a row should have (or usually has). One of the attributes is toggleRowSelected().

I'm not sure why this is happening. Does anyone know why this could be happening? @mayank99

[gretanausedaite]

I'm not sure why this is happening.

Found that this happens because virtualization is enabled.

[r100-stack]

I'm not sure why this is happening.

Found that this happens because virtualization is enabled.

Thanks, I fixed it using what you and Mayank suggested of using instance.toggleAllRowsSelected(false). It works correctly, but I am getting some flickering (not smooth scrolling) when I scroll to a very lower row (e.g. row 70+), especially when I have expanded some sub rows. Is this expected?

vokoscreenNG-2022-08-29_11-16-31.webm