Dash dataTable toggle button non-functional

I am having a problem with the response of dash_table.DataTable toggle columns button that is not functioning as intended.

In layout I define:


In callback the output is:
Output("table_output", "children"),

and I return

table = dash_table.DataTable(
            columns=[{"name": column_display_names.get(i, i), "id": i} for i in df.columns[:14]],
            hidden_columns = [col for col in method_cols_extended if col not in method_cols],

I can see each of my columns without using hidden_columns feature.

After using hidden_columns the intended columns in fact get hidden and Toggle column button appears, however clicking it, does nothing. Manually defining hidden_columns does not make button functional as well.

Is the problem because I return the table in callback? Do I need to include other input for toggle button in this case, what is the id of the button?

Even with minimal example without callback, toggle columns button does not trigger any response. Using Dash 2.8.1


import dash
from dash import dcc, html, dash_table
import pandas as pd

# Create a sample dataframe
df = pd.DataFrame({
    'Column 1': ['A1', 'A2', 'A3'],
    'Column 2': ['B1', 'B2', 'B3'],
    'Column 3': ['C1', 'C2', 'C3'],
    'Column 4': ['D1', 'D2', 'D3'],
    'Column 5': ['E1', 'E2', 'E3'],

# Initialize the Dash app
app = dash.Dash(__name__)

# Define the app layout
app.layout = html.Div([
        columns=[{"name": i, "id": i} for i in df.columns],
        hidden_columns =['Column 5'],
        style_table={'height': '300px', 'overflowY': 'auto'}

# Run the app
if __name__ == '__main__':

Hi @davzup89

You need to say which columns are hideable. Try defining the columns like this:

 columns=[{"name": i, "id": i, "hideable": True} for i in df.columns],
1 Like