Get the value of selected cells when using enableRangeSelection

[nmdung28]

Describe the bug When I use enableRangeSelection function. Is there any way I can get the values ​​in that cell to the outside? Thank you everyone for reading

Current behavior I select multiple cells

Expected behavior I can get the values ​​in that cell to the outside. For example, to display in a modal

Screenshots or gifs

Your environment details

• Device: Desktop
• OS Windown
• Browser :Chorme

[zsiswick]

I am also trying to figure out how to access the data of multiple cells selected by the enableRangeSelection function

[nmdung28]

My solution : create ref for table but but it will affect performance const drawControlRef = useCallback( (node: any) => { if (node !== null) { setRefReactGridState(node); // That all data } }, [], ); @zsiswick

[fellmann]

My solution, although using implementation details. However, I would like to see a controlled range selection.

Use this to access the selected cell range, then select your data accordingly.

const reactGrid = useRef<ReactGrid>(null)

...

return (<>
  <button onClick={() => console.log(reactGrid.current?.state.selectedRanges)} />

  <ReactGrid
                ref={reactGrid}
                ...
</>)

[trsiddiqui]

I think there should be a onRangeSelection finished event that should trigger when users mouse key is up after starting a selection. Using a ref I am able to get the control render event on selection start but not on selection end. However, if I use a button or another manual trigger that gives me the selected range through the ref.

[trsiddiqui]

Found a way, I put onMouseUp event on the parent element (typescript complained if I put it on ReactGrid) and the following code worked for me. reactGrid is the reference.

  const [reactGrid, setReactGrid] = useState<ReactGrid | null>(null)

<parent-element
          onMouseUp={() => {
            setFocussedRange(
              reactGrid?.state.selectedRanges[0].first.column.columnId +
                reactGrid?.state.selectedRanges[0].first.row.idx +
                ' to ' +
                reactGrid?.state.selectedRanges[0].last.column.columnId +
                reactGrid?.state.selectedRanges[0].last.row.idx
            )
          }}
>
    <ReactGrid 
            ref={newRef => {
              // gotcha, this wont trigger on finish selection event
              console.log('updated ref')
              if (newRef) {
                setReactGrid(newRef)
              }
            }}
            enableRangeSelection />
</parent-element>

[alonshmiel]

Hi @nmdung28 , please close this issue if the answers make sense. Thanks!

[fellmann]

Hi @nmdung28 , please close this issue if the answers make sense. Thanks!

Do you feel this solution using internal API in state is solid? Every minor change may break this without notice. I would still prefer a public, documented API.

[alonshmiel]

I agree with you but the problem is that the developers of this library don't answer anymore. I forked this library and upgraded to React 18.

I can add it to my library but if so: will you use the forked library?

[fellmann]

I see. My preferred solution would be:

1. Open a new issue to clear up if this library is really unmaintained
2. If so, publish the fork on npm in a new namespace.

If it is on npm, I would definitely use it. I believe this is one of the best grid libraries for React with very special abilities and deserves being maintained.

[nmdung28]

@alonshmiel , I also hope you publish that library soon.So i will close this topic