Filters dropdown not displaying in react handsontable app

Getting help Questions
,
1

Hello,

I’m using Handsontable in a React app (@handsontable v15.3.0) and trying to enable filtering on two tables by setting filters={true} and dropdownMenu={true}. However, the filter UI doesn’t appear on either table.

Here is my code :

import './App.css';
import 'handsontable/styles/handsontable.min.css';
import 'handsontable/styles/ht-theme-main.min.css';

import { registerAllModules } from 'handsontable/registry';
import { HotTable } from '@handsontable/react-wrapper';

registerAllModules();

const App = () => {
  const dataCarto = [
    ['', '', '', '', '', '', ''],
    ['', '', '', '', '', '', ''],
    ['', '', '', '', '', '', ''],
    ['', '', '', '', '', '', ''],
  ];
  const dataRefContrats = [
    ['', '', ''],
    ['', '', ''],
    ['', '', ''],
  ]

  return (
    <div style={{ margin: '20px' }}>
      <h2>table 1</h2>
      <HotTable
        data={dataCarto}
        colHeaders={['MISSION', 'SUJET', 'SECTEUR', 'ACTIVITE_clef', 'ACTIVITE_Nom', 'ACTIVITE_description', 'TYPE_CONTRAT_Premier']}
        rowHeaders={true}
        filters={true}
        dropdownMenu={true}
        contextMenu={true}
        licenseKey="non-commercial-and-evaluation"
      />
      <h2>table 2</h2>
      <HotTable
        data={dataRefContrats}
        colHeaders={['ID', 'ABREVIATION', 'DESIGNATION']}
        rowHeaders={true}
        filters={true}
        dropdownMenu={true}
        contextMenu={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </div>
  );
};

export default App;

Result I get :

image
image1362×636 48.8 KB

2

Hi @achraf.elayedi

Thank you for contacting us. I copied your settings into this example and filters and menu works correctly: Handsontable example - JSFiddle - Code Playground

Please check if you don’t customize any headers related CSS as that might the source of the problem.

3

Hello, thnks for your reply.

Actually I don’t have any customized CSS in my app. It’s basic React TypeScript application that contains only handsontable to test its functionalities.

The example you sent works with JSX but doesn’t run with TypeScript. It is possible to build one with React TypeScript so I can compare with my environnement ?

4

@achraf.elayedi

There’s not anything that wouldn’t work with TypeScript in this example. I used your data and just added the options for filters and the dropdown menu.

5

Hi. We need to close this thread as it was stale for more than 7 days.

If you still need help please contact us at suport@handsontable.com or create a new thread.