Error when making a dash DataTable filterable by columns values

Question

Only when I add the property filter_action="native" in a dash.DataTable in order to make it possible for the user to filter rows by column values I get an error that varies with the browser I run the webapp on:

• Edge: Cannot read properties of undefined (reading 'placeholder_text') (This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.) TypeError: Cannot read properties of undefined (reading 'placeholder_text') at s.value (http://localhost:8050/_dash-component-suites/dash/dash_table/async-table.js:2:236716)...
• Chrome: same as Edge
• Firefox: r is undefined (This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.) value@http://localhost:8050/_dash-component-suites/dash/dash_table/async-table.js:2:236702...

Note that without setting that single property the app works perfectly.

I terribly need the user to be able to filter rows by column values: what can I do to solve this issue?

environment

python 3.7, Flask 2.2.2, dash 2.8.0

Answer 1

I found a possible solution: that is giving also the columns attribute during DataTable declaration (no, giving just data is not sufficient):

columns=[{"name": i, 'id': i} for i in df.columns]

The minimal code for making a DataTable with working filtering of rows based on column values is

dash_table.DataTable(
   id='my_table_id',
   columns=[
      {"name": i, 'id': i} for i in df.columns
   ],
   data=df.to_dict('records'),
   filter_action="native",
)