I’m trying to turn on the visibility for a user-inputted column. These columns should start off as invisible and depending on the user input, the columns should re-appear. I used a callback to turn on the visibility, but instead of the columns being invisible in the beginning, they are now all visible. Also what display should I use to match the layout of the table?

data = {"1": [1, 2, 3, 4, 5], "2": [6, 7, 8, 9, 10], "3": [11, 12, 13, 14, 15]}

df = pd.DataFrame(data)

app.layout = html.Div(
    [
        "Choose Column to Show: ",
        dcc.Input(id="show_col", type="text", placeholder="", debounce=True),
        html.Br(),
        dash_table.DataTable(
            id="df",
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict("records"),
            style_data_conditional=[{"if": {"column_id": ["2", "3"]}, "display": "None"}],
            style_header_conditional=[{"if": {"column_id": ["2", "3"]}, "display": "None"}],
            row_deletable=True,
        ),
    ]
)


@app.callback(Output("df", "style_data_conditional"), Input("show_col", "value"))
def show_column_data(value):
    return [{"if": {"column_id": value}, "display": "block"}]


@app.callback(Output("df", "style_header_conditional"), Input("show_col", "value"))
def show_column_header(value):
    return [{"if": {"column_id": value}, "display": "block"}]


if __name__ == "__main__":
    app.run_server(debug=True)

What it looks like right now:

Before entering input

After entering input

What it should look like:

Before input

After Input