targets.row.findCell is not a function

[HugoP27]

targets.row.findCell is not a function

• bug: when setting table data asynchronously and double clicking on a cell it throws the following error: TypeError targets.row.findCell is not a function

Environment Details

• react-tabulator version: 0.18.1

Long Description

• Its like the state doesn't update correctly when setting data asynchronously. It happes in this repo's example sandbox

Code Sandbox: repo example

Workaround None so far...

[NikitaK92]

Checking data before renderer <ReactTabulator /> fixes the bug

{this.state.data.length 
         ? <ReactTabulator columns={this.columns} data={this.state.data} />
         : null}

[Randy808]

Checking data before renderer <ReactTabulator /> fixes the bug

{this.state.data.length 
         ? <ReactTabulator columns={this.columns} data={this.state.data} />
         : null}

Is a workaround*

[HugoP27]

@NikitaK92 it works, thanks a lot

[HugoP27]

the official code sanbox in the readme file should just be updated to reflect the workaround.

{this.state.data.length > 0 && ( <ReactTabulator columns={this.columns} data={this.state.data} /> )}

[SundaramMaheshkumar]

I am facing this issue now.

But I can't use {this.state.data.length > 0 && ( <ReactTabulator columns={this.columns} data={this.state.data} /> )} as my data is set dynamically.

I use ref on the tabulator and set data using setData() method in the useEffect. In this case, how do I solve this error?

Thanks.

[HugoP27]

I am facing this issue now.

But I can't use {this.state.data.length > 0 && ( <ReactTabulator columns={this.columns} data={this.state.data} /> )} as my data is set dynamically.

I use ref on the tabulator and set data using setData() method in the useEffect. In this case, how do I solve this error?

Thanks.

Hi there,

You just change:

{this.state.data.length > 0 && ( <ReactTabulator columns={this.columns} data={this.state.data} /> )}

To

{ data.length > 0 && ( <ReactTabulator columns={columns} data={data} /> )}

Assuming your state is set up as follows:

const [data, setData] = useState([])

[denisjovic]

I am having the same issue. And can't find a way around it. I am checking for the data (tried with .length > 0 as well). It works as expected when cell is edited with one click, but it throws an error on double click.

I even tried making an empty function and pass that to cellDblClick <> {data && columns.current && ( <ReactTabulator events={{ cellEdited: (e) => handleCellEdited(e), cellDblClick: handleDbClick }} key={tableKey} columns={columns.current} data={data} /> )} </>

[HugoP27]

@denisjovic it seems like support for react tabulator has been discontinued as it was last updated a year and a half ago. So I decided to use the main tabulator library and created a simple component. This works well and can be easily updated when tabulator releases new versions. Sample code attached (example of how to use it at the bottom) Table component.zip

[denisjovic]

Awesome, thank you @HugoP27, I will give it a try and report back.