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 :