plotly / plotly/dash

Datatable with backend filtering loses selected row when another table is added in div

Open
#2,101 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug dash-data-table P3
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.