Add custom button to header and catch click event

Tags: #<Tag:0x00007f8b28ce2970>
#1

Hey guys, I was hoping you can help me here. I need to replace basic fillter (dropdown menu) that you have with custom button in column header that will open another window on click, so I need to catch click event when button is clicked. Here’s demo that you can use, will appreciate your help.
https://jsfiddle.net/alexdarui/ws8zx0ay/20/

#2

Hi @alext

You can use the afterOnCellMouseDown hook and where e.target would be your icon.

#3

But if I will use it my sorting will be disabled right? Is there a way to keep sorting functionality and catch click event? Basically I need to click on my custom button and it should do one thing and by clicking on cloud icon it should do sorting.
Please let me know if it can be done, thank you.

#4

Column sorting works only for text, example https://jsfiddle.net/6n371jfa/

57

If you would like to use icons only and provide sorting for columns you can use the same hook - afterOnCellMouseDown to trigger sorting.

afterOnCellMouseDown: function(e, coords, TD){
      	this.getPlugin('columnSorting').sort({ column: coords.col, sortOrder: 'asc' });
}

you’d just need to check the sorting order to change asc to desc.

https://jsfiddle.net/6q8xeo7u/

#5

Thank you and to clarify I can catch click event only from Cell, but not from added to header custom button, right?

#6

if you click a button inside the cell/header you will also trigger the afterOnCellMouseDown.

ps. if you’d ever what to do something before the default behavior or stop the default behavior you can use the beforeOnCellMouseDown src: https://handsontable.com/docs/8.0.0/Hooks.html#event:beforeOnCellMouseDown

#7