Can I manipulate the table with an external button event?

Tags: #<Tag:0x00007f4528338438>

I want to sort the table through the outside button.


For example, assuming that there is a gender in the fourth column as shown in the picture, I would like to sort it out with an external button.


There is a button as below and I want to show only male list when I press ‘only male’ button, is there a built-in function in the handsontable?

It is not a function to use filters in headers, but a format to add events to buttons.

Hi @curlydoggi

Here I have an example of including only some of the rows based on cell value. In the example when the button is clicked only the temperature for USA is shown. Other button shows only temperature in Russia. The last button erases the filers (shows all the values).

Thank you for your reply Alexandra, but if you press the USA ONLY button and press the Russia button, the filter will be applied in duplicate, so I modified it as below.


I got a question after seeing this code. My table size is not that big right now. The headers are currently full of text, and when I use the filter function, the filter arrow pops out of the header and looks bad. I can’t increase the header width because I have a fixed div size.

The first is, can I sort it out with an external button without using the filter function?

Second, if I can’t do that, I want to make a filter arrow display none. Is it possible?

Hi @curlydoggi,
You’re right, plugin.clearConditions(...) is necessary in your case to switch between filter conditions.

Buttons in headers come from the DropdownMenu plugin. If you don’t need a dropdown menu, you can disable that plugin by removing the following option

dropdownMenu: true,

from your configuration.

Alternatively, you can hide the dropdown’s arrow using CSS:

.handsontable .changeType {
  display: none;