Is there a way to debounce rowclick in tabulator - tabulator

Question

I have both rowclick and rowdblclick handlers for a tabulator table, I'd like to debounce the rowclick handler so I don't get two rowclick's then a rowdblclick firing off whenever I dblclick on a row, is there a built-in method to do this? I'm aware that I can use rxjs and create a subject and debounce, but I would like to use a built in debounce if it exists.

Answer 1

I have a very similar issue - global row/cellClick also fire when column based cellClick fire.
My work around is to place e.stopImmediatePropagation() into the column based cellClick function. This also still allows the rowDblClick event to pass upwards/downwards etc (bubbling?). However, this is probably the reverse of what you need, unless you remove the need for a double click by putting in an event column?
var editIcon = function(cell, formatterParams, onRendered){ //plain text value
return "<i class='fa fa-edit'></i>";
};
var table = new Tabulator("#table", {
columns:[
{title:"Name", field:"name"}, //etc
{formatter:editIcon, headerSort:false, width:40, align:"center", cellClick:function(e, cell){
// do whatever
e.stopImmediatePropagation(); //prevent table wide rowClick() from also triggering
},
],
rowClick:function(e, row){
//all rows/cells will inherit this function, however the cell level cellClick function will take the first bite of the event before bubbling up to rowClick
},
});
Don't know if this helps, probably some more elegant way, but sort of works for me.

Answer 2

This is a standard JavaScript click event behaviour rather than anything specific to Tabulator
Any time you bind a click and double click handler the click handler will be triggered first.
I would suggest that you use a set timeout to detect if the double click has happened, you then make the double click event clear the timeout preventing the click action from happening:
var debounce = null; //hold debounce timer
var table = new Tabulator("#table", {
rowClick:function(e, row){
debounce = setTimeout(function(){
//do something
}, 100)
},
rowDblClick:function(e, row){
clearTimeout(debounce);
},
});

Answer 3

What I ended up doing in the end is using an EventEmitter and doing a .emit and passing the id from the row that was clicked on. Then in my pipe for my subscription to the EventEmitter I did a .distinct, eliminating the second click on the same row when double clicking.
export class XYZComponent implements AfterViewInit {
ngAfterViewInit(): void {
this.tabX = new Tabulator('#xyz', {
columns: [
// 1
{
title: 'clickable column',
field: 'X'
headerSort: false,
// visible: false,
width: '5rem',
cellDblClick: this.itemDblClick.bind(this),
cellClick: this.itemClick.bind(this),
},
//...
]
}
);
}
private itemClick(e, item) {
// both cells and rows have a getData function
this.onItemSelect(item.getData());
}
private itemDblClick(e, item) {
// both cells and rows have a getData function
this.onItemEdit(item.getData());
}
}
export class ABCComponent implements AfterViewInit {
ngAfterViewInit(): void {
this.selectItemSubject
.pipe(
takeWhile(() => this.active)
, distinctUntilChanged() // this will eliminate the second click
)
.subscribe(item => {
// load additional data for item
});
this.editItemSubject.pipe(
takeWhile(() => this.active)
)
.subscribe((item) => {
// do whatever to edit the item
});
}
}