Selection of cells should be controlled about react-datasheet HOT 15 CLOSED

I also like the idea of being able to set the selection as a property. It's handy that the component manages selection for you, but sometimes it would be nice to control that externally (for example, to restore the last selection from a previous editing session).

from react-datasheet.

@patrick-jones @nadbm
Maybe it should be optional. If the selected prop is set the selection is controlled, otherwise we keep start and end in the state.
I could work on that when I have some time.

from react-datasheet.

🎉 I've made an implementation here: #74

from react-datasheet.

Closing this issue after @educastellano's PR

from react-datasheet.

@educastellano
I realized I forgot to document this. Can you try the prop "onSelect" to see if it does the trick?
Like the following:

onSelected(selected) {
    this.setState({ selected })
}

<DataSheet 
    ...
    onSelect={onSelected}
    />

The onSelect, takes a function with the selected cell as a parameter (cell) => {}. It only gets called if you click a new cell.

from react-datasheet.

The onSelect prop works, but when I set the cell to the state, the selection disappears from the component, probably for the same reason that disappears when you click outside. I can try to look at the code later to see why that happens... But I think this prop could work for me! 👍

from react-datasheet.

@educastellano can you make a fiddle with the issue? The selection should not disappear on a state change.

from react-datasheet.

I managed to make a fiddle: https://jsfiddle.net/69z2wepo/99781/ I had some problems importing the library so I ended up including all the files in the JS section - seems to not be any collision with variable names. The example code is at the end.

The problem is happening when I pass a custom cell in the cellRenderer prop. If I remove this prop it works correctly.

from react-datasheet.

Have a look at the changes I made here: https://jsfiddle.net/j7y0ga47/. You want to avoid using arrow functions as properties (more background here).

from react-datasheet.

As @patrick-jones mentioned, you want to avoid the arrow functions. His fiddle seems to be the same as above. Here is one without the arrow functions and bindings in the render function: https://jsfiddle.net/j7y0ga47/2/

from react-datasheet.

@patrick-jones @nadbm Perfect!! Thanks! 😃

The other problem I had is that I lose the selection when click outside the component, which I have fixed here: #63 Let me know what you think.

from react-datasheet.

Bah! I must have forgotten to save the changes to the fiddle.

from react-datasheet.

@patrick-jones no problem! 😃

Another thing, I'll probably need the selection of all the cells in case of selecting more than one. What about:

onSelected(selected, start, end) {}

selected would still be a single cell or the last cell selected.

from react-datasheet.

@educastellano that sounds good. Currently, the onSelect method wasn't documented. So feel free to make a pull request against that.

from react-datasheet.

@educastellano agree about it being optional

from react-datasheet.