What is the best way to add selectable space on a tabulator row that only has columns that grap the single click for edting? - tabulator

Question

I have a very simple table that is set up like this.
{
"tabulator": {
"rowSelected": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowSelected','row':row.getData(), 'position':row.getPosition()}}); }",
"rowAdded": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowAdded','row':row.getData(), 'position':row.getPosition()}}); }",
"rowDeleted": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowDeleted','row':row.getData(), 'position':row.getPosition()}}); }",
"rowMoved": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowMoved','row':row.getData(), 'position':row.getPosition()}}); }",
"rowUpdated": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowUpdated','row':row.getData(), 'position':row.getPosition()}}); }",
"dataLoaded": "function(data) {var newData=[];data.forEach(function (datum) {var command = [datum.id, datum.torque, datum.duration];newData.push(command);});this.send({topic:this.config.topic,ui_control:{callback:'dataLoaded',data: newData}});}",
"dataEdited": "function(data) {var newData=[];data.forEach(function (datum) {var command = [datum.id, datum.torque, datum.duration];newData.push(command);});this.send({topic:this.config.topic,ui_control:{callback:'dataEdited',data: newData}});}",
"layout": "fitColumns",
"selectable": true,
"columns": [{
"field": "id",
"visible": false
}, {
"title": "Torque",
"field": "torque",
"editor": "number",
"editorParams": {
"step": 0.1
}
}, {
"title": "Duration",
"field": "duration",
"editor": "number"
}]
},
"customHeight": 12
}
I want to be able to select a row or rows with the standard click mechanism. However the rows only contain fields that have a numeric editor. The editor grabs all the single clicks on the row. I have implemented a really bad way of overcoming by introducing a column that has a title set to "Click me" and nothing else. This looks terrible. Does anyone has any suggestions on how I this can be done? I want to avoid using the the rowSelection formatter.
Thanks,
Roger

Answer 1

yes, in the Event, there is a target (or Source ... I forget). I use it on my custom headerFilters that have dropdowns, to distinguish between the user interacting with my dropdown, and Tabulator thinking the user has clicked in the header to move the column or change the sortOrder. If the target/source is my dropdown, I stopPropagation. If not, I let it through. In your case, you prolly want to stopPropagation if they are interacting with your editor.