如何在Dash Plotly中显示基于用户输入的列

Question

我试图根据用户的输入显示列。例如，不显示列2和列3，但如果用户键入2，将显示列2。然而，我目前的程序显示两列，即使唯一的输入是2，我不知道为什么。回调有问题吗?

data = {"1": [1, 2, 3, 4, 5], "2": [6, 7, 8, 9, 10], "3": [11, 12, 13, 14, 15]}
hide_cols = ["2", "3"]
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"),
row_deletable=True,
),
]
)

@app.callback(Output("df", "style_data_conditional"), Input("show_col", "value"))
def show_column_data(value):
if value is not None and value in hide_cols:
return [{"if": {"column_id": value}, "display": ""}]
else:
return [{"if": {"column_id": hide_cols}, "display": "None"}]

@app.callback(Output("df", "style_header_conditional"), Input("show_col", "value"))
def show_column_header(value):
if value is not None and value in hide_cols:
return [{"if": {"column_id": value}, "display": ""}]
else:
return [{"if": {"column_id": hide_cols}, "display": "None"}]

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

用户输入前

用户输入后

Answer 1

没关系!我设法弄清楚了，我只需要添加另一个style_data_conditional和style_header_conditional，使额外的列隐藏:

@app.callback(Output("df", "style_data_conditional"), Input("show_col", "value"))
def show_column_data(value):
if value is not None and value in hide_cols:
index = hide_cols.index(value)
keep_hidden = hide_cols[:index] + hide_cols[index + 1 :]
return [{"if": {"column_id": value}, "display": ""}] + [{"if": {"column_id": keep_hidden}, "display": "None"}]
else:
return [{"if": {"column_id": hide_cols}, "display": "None"}]

@app.callback(Output("df", "style_header_conditional"), Input("show_col", "value"))
def show_column_header(value):
if value is not None and value in hide_cols:
index = hide_cols.index(value)
keep_hidden = hide_cols[:index] + hide_cols[index + 1 :]
return [{"if": {"column_id": value}, "display": ""}] + [{"if": {"column_id": keep_hidden}, "display": "None"}]
else:
return [{"if": {"column_id": hide_cols}, "display": "None"}]