headerFilter select (list) doesn't work (Editable Table Example)

[nhkim556]

I am trying to test an "Editable Table" with a HeaderFilter (select list) in Next.js,
but the list doesn't appear when I click the filter input (and column as well).

link - code sandbox for react tabulator example

editableColumns info below
{
title: "Favourite Color",
field: "color",
editor: "select",
editorParams: {
allowEmpty: true,
showListOnEmpty: true,
values: colorOptions
},
headerFilter: "select",
headerFilterParams: { values: colorOptions }
},

Could you please advise on how to solve this issue? . Thank you!

Environment Details
"next": "14.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-tabulator": "^0.19.0",
"typescript": "^5"

[jackohare1]

This is a bit of an old issue, but it still exists in the "Live Demo: Codesandbox" linked from the README.md, for example.

The problem seems to be that the headerFilter select feature requires some css for class .tabulator-popup-container, which is only currently defined in css/tabulator_bootstrap5.css.
So depending on you app, you may be able to fix this by importing that css:
import 'react-tabulator/css/tabulator_bootstrap5.css'

If you are using a different theme, you'll have to define the .tabulator-popup-container yourself or add it to the theme you're using.

I'd think probably this should be fixed by adding the .tabulator-popup-container so that it's there in all the themes or in some way always brought in when you use the classes that require it.