Custom filter implementation (using HiddenRows & rows that are always visible)

Tags: #<Tag:0x00007efc706aed20>
#1

Firstly, let me set the scene.

I have a table with 8 fixed columns at the start. These are row headings so to speak.

I also have 6 fixed rows at the bottom of the table, which I’m using as a sort of summary (uses formulas to calculate totals etc). The summary rows have conditional formatting based on their values. For each summary row, I merge the first 8 columns as there is only one required row heading for each summary row.

Example:

28
Screenshot 2022-07-12 at 13.25.28.png2928×1422 461 KB

What I’d like to do is have the summary rows always visible, even when a column is filtered. I’d also like the filters to use the HiddenRows plugin, instead of changing row line numbers and removing rows from the actual data table. The reason for this is it messes up some other logic that is based on summary row indexes.

The solution I can think of is to use a before/afterFilter hook, but I’d need an array to pass to HiddenRows#hideRows (which would exclude the last 6 rows). However, I’m not too sure what functionality I can use to achieve this.

TIA

#2

Some extra visibility on why I need row indexes to stay the same.

For deciding if conditional formatting should be assigned to a row:
PASTEBIN LINK (FOR FORMATTING)

The getSummaryRows() functionality… _rowLength is the amount of real data rows, as summary rows as calculated on the fly. So the total amount of rows is always _rowLength + 6 (as there are 6 additional summary rows), obviously shuffling down by 1 as indexes start at 0.
PASTEBIN LINK (FOR FORMATTING)

I hope this makes sense and you can see what I’m trying to achieve.

#3

Hi @rhys.mansfield

It’s nice to see your progress.

In your case, it seems that the hiddenRows in general would be a better option. Filters are not that flexible with picking up the dataset for filter by value and we can’t force it to hide the rows. I recommend building a custom dropdownMenu option.

Here http://jsfiddle.net/handsoncode/wp7ynbng/ is an example of a custom dropdownMenu. What options do you have when you use it

  • callback - your logic when someone clicks the field in the dropdown menu
  • name - the element body (it can be any HTML)
  • hidden - it allows to hide that option for a given column

You also have options disabled and isCommand that can be helpful in your example. Those are well described on this page https://handsontable.com/docs/context-menu/#context-menu-with-fully-custom-configuration in the last demo.

#4

Hi @aleksandra_budnik,

Thanks for your reply. I’ve had a quick look over the custom dropdownMenu API reference & agree this is a better approach.

I’d like to see your example, but running it is giving me an error when trying to open the dropdownMenu. Would you be able to fix that for me so I can view your example?

Thanks!

#5

Sure, it was calling an older version - here’s the newest one http://jsfiddle.net/36rufd78/1/ with the selection method updated.

#6

@aleksandra_budnik Thanks again.

I’ve started implementing my own filter functionality. The only other thing I need help with, which I can’t seem to find any documentation on is having checkboxes/multi-select in dropdown menu.

Is this possible? Is there any reference to this in the docs/any examples you know of?

#7

That is a custom implementation, and we do not have many examples of custom options. Generally, the checkbox would need to be put in the name space. But you’d need to be sure to add isCommand: false otherwise click on the checkbox will close the menu.

#8