Hi both, I finally had a moment to put together a MRE (FYI @AnnMarieW). This is what I’d like to do, but the checkbox inputs don’t affect the column state.
import dash_ag_grid as dag
import dash_mantine_components as dmc
import pandas as pd
from dash import Dash, dcc, html, Input, Output, State
# Random dataframe
d = {'col1': [1, 2, 3], 'col2': ['A', 'B', 'C'], 'col3': ['X', 'Y', 'Z']}
df = pd.DataFrame(data=d)
grid_data = df.to_dict('records')
# AG Grid column defs
columnDefs = [
{
"headerName": "Column 1",
"field": "col1",
},
{
"headerName": "Column 2",
"field": "col2",
},
{
"headerName": "Column 3",
"field": "col3",
},
]
defaultColDef = {
"filter": True,
"resizable": True,
"sortable": True,
"editable": False,
"enableRowGroup": True,
}
app = Dash(__name__)
app.layout = dmc.MantineProvider(
id="mantine-theme",
withGlobalStyles=True,
withNormalizeCSS=True,
children=[
dmc.Container(
size="sm",
children=[
# Checkboxes
dmc.CheckboxGroup(
id="checkbox-grp",
label="Select the columns you want to see",
orientation="horizontal",
offset="md",
persistence=True,
persistence_type="session",
persisted_props=["value"],
children=[
dmc.Checkbox(label="Column 1", value="col1"),
dmc.Checkbox(label="Column 2", value="col2"),
dmc.Checkbox(label="Column 3", value="col3"),
],
value=[
"col1",
"col2",
"col3",
]
),
dmc.Space(h=30),
# AG Grid
dag.AgGrid(
id="data-grid",
columnDefs=columnDefs,
defaultColDef=defaultColDef,
dashGridOptions={
"maintainColumnOrder": True,
"skipHeaderOnAutoSize": True,
"pagination": True,
"enableCellTextSelection": True,
"ensureDomOrder": True,
},
rowData=grid_data,
columnSize="responsiveSizeToFit",
suppressDragLeaveHidesColumns=False,
# style={"height": "100px", "width": "100%"}
)
],
mt=100,
)
],
)
# Adjust column display
@app.callback(
Output('data-grid', 'columnState'),
Input('checkbox-grp', 'value'),
State('data-grid', 'columnState'),
prevent_initial_call=True,
)
def display_selected_columns(col_selections, col_state):
for c in col_state:
if c['colId'] in col_selections:
c['hide'] = False
else:
c['hide'] = True
return col_state
if __name__ == '__main__':
app.run_server(debug=True)