value of 'hide' property in columnDefs has no effect in version 32.3.2

Ultimately, I would like my users to be able to toggle column visibility from a multi-select dropdown.

I have a callback that outputs columnDefs with various properties including the 'hide' property, which is True for selected columns and False for de-selected columns.

This works well with dash_ag_grid version 31.3.0 but not with 32.3.2. With 32.3.2 there is an animation in the column headers (like a rearragnement) but ultimately all columns remain visible.

I have not tested any versions in between.

@mfrancke

Hello @mfrancke

Can you give an example code?

Sure!

The toggle works with dash_ag_grid 31.3.0 but not with 32.3.2

import dash_ag_grid as dag
import dash_bootstrap_components as dbc
import pandas as pd
from dash import callback, Dash, dcc, Input, Output


app = Dash(__name__)

data = pd.DataFrame([
    {"a": 1, "b": 2},
    {"a": 3, "b": 4},
])


select_columns = dcc.Dropdown(
    id="select-columns",
    value=data.columns,
    options=data.columns,
    multi=True,
)


results_table = dag.AgGrid(
    id="ag-grid",
    style={"height": "75vh", "width": "100%"},
    rowData=data.to_dict(orient="records"),
)


@callback(
    Output("ag-grid", "columnDefs"),
    Input("select-columns", "value"),
)
def toggle_column_visibility(selected_columns):
    return [
        {
            "field": col_name,
            "hide": col_name not in selected_columns,
        }
        for col_name in data.columns
    ]


app.layout = dbc.Col(
    [
        select_columns,
        results_table,
    ],
)

if __name__ == '__main__':
    app.run(debug=True)

@mfrancke

@mfrancke

For now you can use:

import dash_ag_grid as dag
# import dash_bootstrap_components as dbc
import pandas as pd
from dash import callback, Dash, dcc, Input, Output, html, State


app = Dash(__name__)

data = pd.DataFrame([
    {"a": 1, "b": 2},
    {"a": 3, "b": 4},
])


select_columns = dcc.Dropdown(
    id="select-columns",
    value=data.columns,
    options=data.columns,
    multi=True,
)


results_table = dag.AgGrid(
    id="ag-grid",
    style={"height": "75vh", "width": "100%"},
    rowData=data.to_dict(orient="records"),
    columnDefs=[{"field": col_name} for col_name in data.columns],
)


@callback(
    Output("ag-grid", "columnState"),
    Input("select-columns", "value"),
    State("ag-grid", "columnState"),
    prevent_initial_call=True
)
def toggle_column_visibility(selected_columns, s):
    return [
        {**col, "hide": col["colId"] not in selected_columns}
        for col in s
    ]


app.layout = html.Div(
    [
        select_columns,
        results_table,
    ],
)

if __name__ == '__main__':
    app.run(debug=True)

Its normally better to manipulate the state rather than try to adjust the columnDefs unless adding or removing data columns.

@BSd3v

@BSd3v thanks, that works for me.

On a related note. Sometimes when using columnState to hide columns, I find that the normal column re-ordering and resizing that ag grid supports by interacting with the headers will no longer work. This happens particularly when row selection is on:

import dash_ag_grid as dag
import pandas as pd
from dash import callback, Dash, dcc, Input, Output, html, State


app = Dash(__name__)

data = pd.DataFrame([
    {"a": 1, "b": 2, "c": 3},
    {"a": 11, "b": 12, "c": 13}
])


select_columns = dcc.Dropdown(
    id="select-columns",
    value=data.columns,
    options=data.columns,
    multi=True,
)


results_table = dag.AgGrid(
    id="ag-grid",
    style={"height": "75vh", "width": "100%"},
    rowData=data.to_dict(orient="records"),
    columnDefs=[{"field": col_name} for col_name in data.columns],
    dashGridOptions={'rowSelection': {'mode': 'multiRow'}}, # without this enabled column dragging seems to work
)


@callback(
    Output("ag-grid", "columnState"),
    Input("select-columns", "value"),
    State("ag-grid", "columnState"),
    prevent_initial_call=True
)
def toggle_column_visibility(selected_columns, s):
    return [
        {**col, "hide": col["colId"] not in selected_columns}
        for col in s
    ]


app.layout = html.Div(
    [
        select_columns,
        results_table,
    ],
)

if __name__ == '__main__':
    app.run(debug=True)

With a workaround:

@callback(
    Output("ag-grid", "columnState", allow_duplicate=True),
    Input("select-columns", "value"),
    State("ag-grid", "columnState"),
    prevent_initial_call=True
)
def toggle_column_visibility(selected_columns, s):
    return [
        {**col, "hide": col["colId"] not in selected_columns}
        for col in s
    ]

@app.callback(
    Output('ag-grid', 'columnState'),
    Input('ag-grid', 'columnState'),
)
def complete_column_update(columnState):
    return columnState

column dragging and resizing starts working again.

@jackarnatt

@jackarnatt

Just to make sure, this is with the most up to date version?

I was on dash 3.2.0, dash-ag-grid 32.3.1, updating dash-ag-grid has fixed it, thanks :)

Navigation Menu

Repository navigation

value of 'hide' property in columnDefs has no effect in version 32.3.2 #407

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

value of 'hide' property in columnDefs has no effect in version 32.3.2 #407

Description

Activity

BSd3v commented on Sep 18, 2025

mfrancke commented on Sep 18, 2025

BSd3v commented on Sep 18, 2025

mfrancke commented on Sep 19, 2025

jackarnatt commented on Oct 9, 2025

jackarnatt commented on Oct 9, 2025

BSd3v commented on Oct 9, 2025

jackarnatt commented on Oct 9, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions