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

[mfrancke]

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.

[BSd3v]

Hello @mfrancke

Can you give an example code?

[mfrancke]

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)

[BSd3v]

@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.

[mfrancke]

@BSd3v thanks, that works for me.

[jackarnatt]

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)

[jackarnatt]

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.

[BSd3v]

@jackarnatt

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

[jackarnatt]

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