targets.row.findCell is not a function

[aespogom]

Hi everyone I am creating a table with editable cells but I always have an error.

Whenever I double click the cell, this error appears: ERROR TypeError: targets.row.findCell is not a function at InteractionManager.bindComponents (tabulator_esm.js:21263) at InteractionManager.track (tabulator_esm.js:21192) at ZoneDelegate.invokeTask (zone.js:406) at Object.onInvokeTask (core.js:28648) at ZoneDelegate.invokeTask (zone.js:405) at Zone.runTask (zone.js:178) at ZoneTask.invokeTask [as invoke] (zone.js:487) at invokeTask (zone.js:1600) at HTMLDivElement.globalZoneAwareCallback (zone.js:1637)

The table is functional itself and this error does not interfere with the table at all but I want to know where it comes from and how to solve it. The error appears do not matter what type of input has the cell.

This is the code:

this.table = new Tabulator(this.tab, {
      data: this.tableData,
      keybindings:false, //disable all key bindings
      selectable: false,
      columns: this.columns,
      height: this.height,
      placeholder:"Seleccione tabla",
    });

getColumns():any[] {
    if (this.selectedNode.length > 0 ){
      const widthVariable = ((window.innerWidth*0.99) / this.selectedNode[0].properties.size);
      this.selectedNode[0].properties.forEach((v,k)=> {

        switch (v.getHtmlType()) {
          case "input":
            this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, 
            width:widthVariable, editable: v.editable, editor: v.getHtmlType(), editorParams:{
              search:true}
            });
            break
          case "number":
            this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, 
            width:widthVariable, editable: v.editable, editor: v.getHtmlType(), editorParams:{
              min:v.min,
              max:v.max}
            });
            break
          case "boolean":
            this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, formatter:"tickCross", 
            width:widthVariable, editable: v.editable, editor: "tickCross", editorParams:{
              tristate: true}
            });
            break
          case "select":
            this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, formatter:cellSelect, 
            width:widthVariable, editable: v.editable, editor: v.getHtmlType(), editorParams:{
              values:this.getOptions(this.selectedNode[0], k), //create list of values from all values contained in this column
              sortValuesList:"asc", //if creating a list of values from values:true then choose how it should be sorted
              verticalNavigation:"hybrid", //navigate to new row when at the top or bottom of the selection list
              multiselect:false,
            }});
            break
          case "date":
            this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, 
            width:widthVariable, editable: v.editable, editor:dateEditor, editorParams:{
              search:true,
              mask:"99-99-9999"}
            });
            break
        }
      });
    }

    return this.columns;
  }

Anyone can help me?

[olifolkerd]

Hey @aespogom

please include a link to a JS fiddle that demonstrates how your table is setup, without seeing exactly how it is configured we cannot help you get to the bottom of the issue.

Cheers

Oli :)

[HugoP27]

Hi everyone I am creating a table with editable cells but I always have an error.

Whenever I double click the cell, this error appears: ERROR TypeError: targets.row.findCell is not a function at InteractionManager.bindComponents (tabulator_esm.js:21263) at InteractionManager.track (tabulator_esm.js:21192) at ZoneDelegate.invokeTask (zone.js:406) at Object.onInvokeTask (core.js:28648) at ZoneDelegate.invokeTask (zone.js:405) at Zone.runTask (zone.js:178) at ZoneTask.invokeTask [as invoke] (zone.js:487) at invokeTask (zone.js:1600) at HTMLDivElement.globalZoneAwareCallback (zone.js:1637)

The table is functional itself and this error does not interfere with the table at all but I want to know where it comes from and how to solve it. The error appears do not matter what type of input has the cell.

This is the code:

this.table = new Tabulator(this.tab, {
      data: this.tableData,
      keybindings:false, //disable all key bindings
      selectable: false,
      columns: this.columns,
      height: this.height,
      placeholder:"Seleccione tabla",
    });

getColumns():any[] {
   if (this.selectedNode.length > 0 ){
     const widthVariable = ((window.innerWidth*0.99) / this.selectedNode[0].properties.size);
     this.selectedNode[0].properties.forEach((v,k)=> {

       switch (v.getHtmlType()) {
         case "input":
           this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, 
           width:widthVariable, editable: v.editable, editor: v.getHtmlType(), editorParams:{
             search:true}
           });
           break
         case "number":
           this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, 
           width:widthVariable, editable: v.editable, editor: v.getHtmlType(), editorParams:{
             min:v.min,
             max:v.max}
           });
           break
         case "boolean":
           this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, formatter:"tickCross", 
           width:widthVariable, editable: v.editable, editor: "tickCross", editorParams:{
             tristate: true}
           });
           break
         case "select":
           this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, formatter:cellSelect, 
           width:widthVariable, editable: v.editable, editor: v.getHtmlType(), editorParams:{
             values:this.getOptions(this.selectedNode[0], k), //create list of values from all values contained in this column
             sortValuesList:"asc", //if creating a list of values from values:true then choose how it should be sorted
             verticalNavigation:"hybrid", //navigate to new row when at the top or bottom of the selection list
             multiselect:false,
           }});
           break
         case "date":
           this.columns.push({title: k + "  [ " + v.units +" ] ", field:k, visible: v.display, 
           width:widthVariable, editable: v.editable, editor:dateEditor, editorParams:{
             search:true,
             mask:"99-99-9999"}
           });
           break
       }
     });
   }

   return this.columns;
 }

Anyone can help me?

Hi, I am having the same issue, were you able to find a solution or workaround? The issue is in the official react-tabulator code sandbox example. To reproduce, click on "set data" and double click on any cell/row.

[wallw-teal]

This was fixed for me by using a newer version of tabulator-tables. react-tabulator still uses 5.0.10 by default. I set the following in package.json:

{
  "overrides": {
    "tabulator-tables": "5.4.2"
  }
}

YMMV, as doing so might cause other breakages with react-tabulator. Please open an issue with them to upgrade tabulator-tables to the latest, mentioning this issue.

[dodo5522]

@wallw-teal Thank you for your advice. I faced the same issue targets.row.findCell is not a function and your solution fixes it, but I used resolutions.

  "resolutions": {
    "tabulator-tables": "5.4.2"
  }