useCellRangeSelection - Working on this hook, Ability to select cell ranges and single select (UI demo)

[07harish]

Multi-cell range selection and single-cell select feature

Hi @tannerlinsley, Implemented this new hook, Will this be a good addition to the library?

@gargroh helped me to come up with this idea.

Usage:

• Multiple cell range selections can be done using Ctrl + range selection (click and drag). First range selection can be done without Ctrl
• Cell selections (and unselection) can be done using Ctrl + click

Compatibility:

This feature works well with useColumnOrder. With useGroupBy, it selects all cells within the range (including empty cells when expanded)

Few details on the implementation:

• added cell Id's
• state.selectedCells Is a map of cell.id = true, Same as selectedRowIds
• I have added instance.cellsById, actions for start, selecting, end on an instance

Few things I have not considered adding (will work on it, if this is required):

• Unselecting cell ranges
• Ability to represent like layer for overlapping range selections, but I am thinking if this can be done by keeping count
  state.selectedCells : {cell.id : count, ...}

I am new to contributing to open source, Need your thoughts and feedback.
If this looks good, I have some refactoring left and I will create a PR.. Thanks :)

[etodanik]

We could definitely use something like this at our company. I'd love to help out building this in whatever way necessary.

[07harish]

Update: @israelidanny @tannerlinsley - This PR is merged in react-table-plugins 🎉

Check Documentation and codesandbox

Let me know, what do you think and if it's a good addition here, will raise a PR

[etodanik]

You're a legend! Will check it.

[tannerlinsley]

I would like to see this integrated with v8 (the next branch). Wanna take a whack at it there? You'll need to look at how other plugins have changed to fit the new architecture.

[07harish]

Sure, I will have a look at the new architecture and will try to implement it there.

[07harish]

@tannerlinsley If you have time, Can you please look at the implementation and can review the code? So that we are following the right direction:

Code link,
Codesandbox and Docs

[tannerlinsley]

This looks awesome. And yes, the architecture looks pretty good. Things might change a little bit with v8, so I'll keep you posted.

[gopal-abbineni]

@tannerlinsley @07harish I think default click cell selection will be more convenient to select single cell instead of doing ctrl+click and also is there any plans for shift click selection between two cells?

[bolam-o]

@07harish this plugin is not support typescript?

[andresgutgon]

Hi, I'm trying to port this to React Table v8.
The part I'm struggling is where to do this hash cellsById

What would be the best place?

[joshkay]

Did you make any progress on this? Looking at setting it up myself.

[ambid17]

bump, I am curious if you ever got this working, I am also struggling to get this to work in v8 :D

[joshkay]

bump, I am curious if you ever got this working, I am also struggling to get this to work in v8 :D

Ended up writing my own hook in the end.
Here's a gist with the hook & the table component I'm using.