Datatable with backend filtering loses selected row when another table is added in div
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 24.4k
- Forks
- 2.3k
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 13
Description
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)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the provided Dash reproduction and add datatables with selected rows, using the shown sort_by and dynamic children setup. Investigate how adding a table affects existing DataTable selection state when sort_by is present. Done means previously selected rows remain selected after another table is added, while the reproduction continues to support backend filtering and sorting.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100