Felt that there are too few events exposed

[edzehoo]

Hi there,

First, I love this component. But one problem I have is the fact that there is only 1 event : OnChange , to tell me that something has changed on the grid. But the problem is, this event is triggered on every key press (if i'm editing a cell, and i type "apple", it triggers this event 5 times).

And because OnChange is usually hooked up to the onchange event handler, which propagates changes back to the datasource, this will trigger a refresh/redraw of the entire grid on every keypress. This is fine if I'm not doing anything heavy in the rerendering of the grid. But if we try to do anything (like building a collapsible treelist - as given in the samples here : https://react-datasheet-grid.netlify.app/docs/examples/collapsible-rows) , it is a downright performance killer. What is essentially happening is that we have to reassemble the entire treelist array on every keypress!

There really should be an event called "onCellLeave" or "onCellDoneEditing" , where it triggers only after one has finished his changes on that cell.

Ed

[nick-keller]

Hello @edzehoo,
We have such events, but on the grid itself: https://react-datasheet-grid.netlify.app/docs/api-reference/props#callbacks
For "onCellLeave" you might want to look at onActiveCellChange.
For "onCellDoneEditing" you might want to look at onBlur.
But that might not be what you are really looking for, check this out instead 👇

Now regarding the performance issue, you are absolutely right, but it is up to the component to call "onChange" when needed. Luckily the built-in text column has a continuousUpdates property that let you only update the data when blurred (huge performance gain).

Let me know if that helps!

[edzehoo]

Thank you very much for the reply Nick.

I found a solution to this question, so I thought I'd just post it here for the benefit of others. Yes, you're right on there being a "onCellLeave" and "onCellDoneEditing", but this wasn't really the same thing I was after, because if you did a copy and paste of the cells, it wouldn't trigger any of these events, and the only real way to get a notification when something changed on the grid was through "onChange", but my problem was still the performance drain, because onChange would trigger with every single keypress (when you're doing the editing).

The continuousUpdates property was exactly what I needed, thanks!

But going back to the example on collapsible rows : https://react-datasheet-grid.netlify.app/docs/examples/collapsible-rows , I realize that the performance drain was actually primarily caused by the setGroups([...groups]) line. The [...xxx] basically means that its doing a clone of the entire array, and doing that in the onChange handler means that with every keypress, you're recloning the entire array. I only had 10+ rows, and the effect of doing this cloning in OnChange was slow enough to be really visible.

Once I changed that line to setGroups(groups), the performance problem went away almost immediately. Now I'm not sure if there are any side effects of not recloning the entire array on every OnChange keypress, but I've used it so far, without any problems.

But anyway, it's solved for now. If there are really no benefits of doing setGroups([...groups]) instead of setGroups(groups), thought it might be a good idea to change the documentation, or to include the continuousUpdates property in the sample? It could save some people 2-3 days of performance testing to discover this.