dash
dash copied to clipboard
[BUG] Datatable with backend filtering loses selected row when another table is added in div
Describe your context I am using the datatable as described in Backend Paging with Filtering and Multi-Column Sorting
I have taken that code one step further by adding a dynamic amount of them inside a div.
dash 2.5.1
dash-bootstrap-components 1.1.0
dash-core-components 2.0.0
dash-extensions 0.1.3
dash-html-components 2.0.0
dash-table 5.0.0
Describe the bug
When adding another datatable in the div, the selected rows in the other datatables get deselected. I think this has something to do with sort_by since if I comment it from the datatable creation the problem disappears.
Expected behavior
I expect that the selected rows should not be removed as I add more datatables
Example Code to reproduce bug
import pandas as pd
from dash import Dash, Input, Output, State, dash_table, html
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")
app = Dash(__name__)
app.layout = html.Div(
children=[
html.Div(
children=[],
id="list-of-datatables",
),
html.Button("Add Datatable", id="add-datatable", n_clicks=0),
]
)
@app.callback(
Output("list-of-datatables", "children"),
State("list-of-datatables", "children"),
Input("add-datatable", "n_clicks"),
prevent_initial_call=True,
)
def add_datatable(children, n_clicks):
children.append(
dash_table.DataTable(
id={"type": "datatable", "index": len(children)},
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict("records"),
row_selectable="multi",
page_current=0,
page_size=10,
page_action="custom",
filter_action="custom",
filter_query="",
sort_action="custom",
sort_mode="multi",
sort_by=[], # Comment this line and the bug will be fixed
)
)
return children
if __name__ == "__main__":
app.run_server(debug=True)