Filters in React Handsontable

Hello @aleksandra_budnik!
We are using Handsontable Pro in our project based on React.js.
I’m trying to make datatable with filters, but there is a strange problem. Look at screenshot please:

When I click on the filters button, nothing happens. Only there is an additional vertical scroll

I set the following settings:

<HotTable settings={{
dataSchema: {ID: null, RefStatus: null, Code: null, Name: null, territory: {ID: null, Name: null}, RefBeginDate: null, RefEndDate: null},
data: this.props.datatable.table,
    height: (areaHeight-100),
    stretchH: "all",
    allowEmpty: true,
    fillHandle: false,
    columns: [{
        data: 'RefStatus',
        editor: false,
        renderer: this.statusRenderer,
        type: 'text',
      }, {
        data: 'Code',
        editor: false,
        type: 'text',
      }, {
        data: 'Name',
        editor: false,
        type: 'text',
      }, {
        data: 'territory.Name',
        editor: false,
        type: 'text',
      }, {
        data: 'RefBeginDate',
        editor: false,
        renderer: this.dateRenderer,
        type: 'text',
      }, {
        data: 'RefEndDate',
        editor: false,
        renderer: this.dateRenderer,
        type: 'text',
      }
    ],
    colWidths: [40, 60, 300, 120, 80, 80],
    columnSorting: true,
    sortIndicator: true,
    filters: true,
    dropdownMenu: true,
  }} />

I will wait for your answer :slight_smile:

Hi @a.dugaev

could you please load the code into Fiddle?

You can use the following demo as a base https://codepen.io/handsoncode/pen/pRamwZ?editors=0010

At the first glance, the code looks fine. Please let me know on which browser/s and OS you experience the issue.

Here is a demo
https://codepen.io/Deprime/pen/prLKdJ

But I think that the example is not the PRO version, since the filters do not appear at all.
I tested this solution in different browsers - Chrome, Vivaldi, Firefox.
OS - Windows 7, Windows 10.

Hi @a.dugaev

CodePen has some unknown issues with the dropdown menu alignment settings. Can we use the JSFiddle? Here is a working example http://jsfiddle.net/229ac4fu/

Weird. My apologies, it is possible that I have the project conflict with any third party library.
Let me ask an additional question: is there any example of how can I render a Link component of a React-Router in a HOT td cell?

Unfortunately, we do not have any similar examples.

Thank you for the reply. Have a nice day :slight_smile:

Thank you!

Wish you a great day as well @a.dugaev