Selecting Row After Render/Table Load - tabulator

Question

I'm attempting to select a row within a Tabulator table once the data or table has been rendered/loaded. I'm not particularly fussed which callback is used, but when a user navigates to this page the table should load a predetermined record (which I will parse as a parameter).
The callback itself works well, as I can display a JS alert, however I'm still unable to select a line within Tabulator.
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator(
"#example-table", {
height: (window.innerHeight), // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically
headerFilterPlaceholder: '', //default place holder text for filters
selectable: 1, //allows row within table to be selected and have selected state (not to be confused with row click function), can be set to have multiple selected (integer), true or false
data: [ **DATA1** ], //assign data to table
dataTree: true,
dataTreeStartExpanded: true,
dataTreeBranchElement: false, //adds or removes right angle leading from parent to child
dataTreeChildIndent: 25, //changes the indent padding
dataTreeCollapseElement: !1,
dataTreeStartExpanded: !0, //changes whether or not the entire table begins expanded
dataTreeCollapseElement: "<span>▼ </span>",
dataTreeExpandElement: "<span>► </span>",
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ **COLUMN1** ],
rowClick:function(e, row) //triggered when the row is clicked
{
var scriptParam = **SCRIPTPARAM1**;
var rowId = row.getData().id;
var fieldName = **FIELDNAME1**;
var theList = [scriptParam, rowId, fieldName];
var doThis = "fmp://$/**FILE**?script=**SCRIPT1**&param=" + theList;
window.location.href = doThis;
},
rowDblClick:function(e, row) //triggered when the row is double clicked
{
table.selectRow(**ROWID**);
},
rowContext:function(e, row) //triggered when the row is right clicked
{
alert('right click');
e.preventDefault(); //overrides the browsers native right click function
},
cellEdited: function(cell)
{
var parameter = 1.1;
var distribute = cell.getColumn().getDefinition().distribute;
var id = cell.getData().id;
var table = cell.getColumn().getDefinition().fmTable;
var field = cell.getColumn().getDefinition().fmTable + "::" + cell.getColumn().getDefinition().fmField;
var table = cell.getColumn().getDefinition().fmTable;
var scriptBefore = cell.getColumn().getDefinition().script_before;
var scriptAfter = cell.getColumn().getDefinition().script_after;
var value = cell.getValue();
var theList = [parameter, distribute, id, table, field, value];
var doThis = "fmp://$/**FileName**?script=**ScriptName**&param=" + theList;
window.location.href = doThis;
},
rowFormatter: function(row) {
var rowColor = row.getData().color
row.getElement().style.backgroundColor = rowColor;
},
renderComplete:function()
{
table.selectRow(**ROWID**);
}
}
);
I'm expecting that once the page is loaded, the row I defined as **ROWID** (which for my testing is ID 1) is selected. FYI, the double click function (regardless of which row is clicked) performs as expected, selecting the correct row.
To further this, I'm looking to (at times) select a child row of the data tree, for example:
const tabledata1 = [{
id: "1",
name: "Oli Bob",
location: "United Kingdom",
gender: "male",
col: "red",
dob: "14/04/1984",
_children: [{
id: "2",
name: "Mary May",
location: "Germany",
gender: "female",
col: "blue",
dob: "14/05/1982"
},
{
name: "Christine Lobowski",
location: "France",
gender: "female",
col: "green",
dob: "22/05/1982"
},
{
name: "Brendon Philips",
location: "USA",
gender: "male",
col: "orange",
dob: "01/08/1980",
_children: [{
name: "Margret Marmajuke",
location: "Canada",
gender: "female",
col: "yellow",
dob: "31/01/1999"
},
{
name: "Frank Harbours",
location: "Russia",
gender: "male",
col: "red",
dob: "12/05/1966"
},
]
},
]
},
{
name: "Jamie Newhart",
location: "India",
gender: "male",
col: "green",
dob: "14/05/1985"
},
{
name: "Gemma Jane",
location: "China",
gender: "female",
col: "red",
dob: "22/05/1982",
_children: [{
name: "Emily Sykes",
location: "South Korea",
gender: "female",
col: "maroon",
dob: "11/11/1970"
}, ]
},
{
name: "James Newman",
location: "Japan",
gender: "male",
col: "red",
dob: "22/03/1998"
},
];
const table = new Tabulator("#example-table", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata1, //assign data to table
selectable: true, //make rows selectable
layout: "fitColumns", //fit columns to width of table (optional)
autoColumns: true,
dataTree: true,
dataTreeStartExpanded: true,
renderComplete: function() {
console.log('done');
this.selectRow(2);
}
});

Answer 1

table.selectRow(ROWID); wont work until table is initialized you
have to do this.selectRow
Check this jsfiddle
renderComplete: function() {
const rows = this.getRows();
console.log('rows', rows);
for (let i = 0; i < rows.length; i++) {
const childRows = rows[i].getTreeChildren();
if (childRows.length > 0) {
// console.log('childRows', childRows);
// this.selectRow(childRows);
for (let j = 0; j < childRows.length; j++) {
const gender = childRows[j].getData().gender;
console.log('gender', gender);
if (gender === 'male') {
this.selectRow(childRows[j]);
const childRows2 = childRows[j].getTreeChildren();
}
}
}
}
}
});