Filter dropdown not working

Tags: #<Tag:0x00007efc6dde1c80> #<Tag:0x00007efc6dde18c0>
#1

I am trying to set up filters for my spreadsheet and I am seeing some incorrect behaviour which is likely my own mistake since I cannot find any instance of it online.

Here is my code:

<CardContent>
  {invoices.length ? (
    <HotTable
      data={invoices}
      formulas={{
        engine: hyperformulaInstance,
      }}
      rowHeaders={true}
      columns={col}
      height={500}
      filter={true}
      dropdownMenu={{
        items: ["filter_by_value"],
      }}
      licenseKey="non-commercial-and-evaluation"
    />
  ) : (
    <p>Please generate invoices first</p>
  )}
</CardContent>

This is what is being rendered:

image
image.png918×218 22.3 KB

Any dropdown items I add in the code, they show up as their name in the dropdown.
I have also tried using the simple dropdownMenu={true} as well. In that case, the dropdown renders correctly but there are no filter by value or filter by condition options.

If you need more information/code, let me know.

#2

Hi @muezz7055

there’s a small typo - it should be filters not filter in your component declaration. If that won’t work, please also check if the filtering module is imported and registered.

ps. if you only want the filter by value filter type in your menu you still need to add the filter_action_bar to allow the user to execute the action.

05

Demo: https://jsfiddle.net/g0nLjxw9/

#3

@aleksandra_budnik Thanks for the catch. I did not anticipate such an error because I expected Typescript to help with such typos.

I also just checked and apparently there is a filter and a filters prop which is probably why I missed it. Not sure about the purpose of the first one.

#4

There’s is an option called filter for the autocomplete cell type. You can read more about it at https://handsontable.com/docs/javascript-data-grid/api/options/#filter

1 Like
#5