Refresh issue prevents button click in editable data example

[LauSam09]

I have forked the editable data example and added an additional column to allow row deletion - see the code sandbox here.

The deletion logic has a dependency on data, so I have added this to the dependency array for the memoized columns array. This has the undesirable effect of recreating the columns array every time data is edited, and as a result, you must click the button twice after editing data as the initial onMouseDown event is not firing.

Steps to reproduce:

1. Edit some data.
2. Try to delete any row - the first click will do nothing and a second click is required.

I realise I could use the lambda overload for setData in this example, bypassing the need for adding data to the columns dependency array - but in my real-world case, the table is nested multiple components down from where data is stored so it doesn't seem feasible to do this.
Also in this example I could omit data from the dependency array - but again in my real application I can also add rows (which we would be unable to delete if data was omitted).

Does anyone have any advice for my situation? Thanks!

[LauSam09]

In the end I solved this problem by following the same pattern as is used for injecting the update function in useTable.
By doing this, I could remove data from the dependency array with no adverse effects, and clicking works correctly as a result.

E.g. injecting functions to use at runtime.

useTable({ .... }, update, remove, add)

[sRidder]

Hi @LauSam09
I have a very similar problem. I added also an additional column but with a "Save/update" button. I want to save/update the changes after a user did some changes in row.
In my case the first click do also nothing. Because after editing in the table, the data is updating (Blur event) and then table is refreshing. The second click is working.
Do you have an idea how I can solve the problem ?

[LauSam09]

Hi @sRidder,

I've updated the code sandbox (https://codesandbox.io/s/button-click-workaround-em093) with how I worked around the problem.

Basically:

1. Remove any event handler (in my case the delete button) from being defined inside the columns array. This means we can remove data from the columns dependency array which is what I believe is causing the issue.
2. Define the event handler outside (I made a function called remove on line 267).
3. Inject this function into the table in the normal way and access it from the Cell object (see lines 112 and 203).

I hope this helps 👍

[sRidder]

Hi @LauSam09,

thanks for your quick response.

The problem in my case is that I want to send the new/updated data to the backend, but with your solution I have no access to the updated data because the data is only updated by the blur event. The remove action is not depending on the new/updated data.
Do you understand my problem ?

[sRidder]

@LauSam09: I have to correct myself. Your solution is also working for update. Thanks for your help.