tabulator.js - scrollToRow() doesn't work on tree?

Question

I've got a Tabulator.js table. This table is a treeview used dataTree option. Rows have a unique id in column 'id'.

scrollToRow() function throws the following error:

Unhandled rejection Scroll Error - No matching row found

table = new Tabulator("#cutover_plan_table_container", {
            height:"500px",
            headerSort: false,
            data:hierarchical_cutover_obj,
            dataTree:true,
            dataTreeStartExpanded:true,
            dataTreeElementColumn:"name",
            dataTreeChildField:"outlineChildren",
            dataTreeBranchElement:false,
            dataTreeChildIndent:17,
            scrollToRowPosition: "center",
            index:"id", 
            virtualDom: true,
            virtualDomBuffer : true,
    
            columns:[
                {title:"", field:"id", align:"center",cssClass:"cutover_column_id"},
                {title:"UID", field:"uid"},
                {title:"Name", field:"name", responsive:0},
                {title:"Predecessor", field: "predecessor", width:150,formatter:function(cell, formatterParams, onRendered){
                    return '<a href="javascript:goToTableRow(' + cell.getValue() + ');">' + cell.getValue()+ '</a>, ';
                }}
            ]
    }); 
    
    
function goToTableRow(targetRow){
        table.scrollToRow(targetRow, "center", true);
} 

If I click Predecessor cell value then I get an Unhandled rejection Scroll Error - No matching row found error on console. If it isn't a tree (dataTree: false ) then scroll is working like a charm.

Answer 1

First off, and slightly unrelated to your original question, that is a really bad approach to triggering a scroll, you can just use the cellClick callback and then you dont need a custom formatter or function:

{title:"Predecessor", field: "predecessor", width:150, cellClick:function(e, cell){
    table.scrollToRow(cell.getValue(), "center", true);
}}

Secondly, the issue is arising because you cannot target child rows by id, the lookup only works on top level data.

If all you are doing is trying to scroll to the parent row, then you can use the getTreeParent function on the row component and call the scrollTo function directly on it.

{title:"Predecessor", field: "predecessor", width:150, cellClick:function(e, cell){
    var parent = cell.getTreeParent();

    if(parent){
        parent.scrollTo();
    }
}}