Datatable unselect row does not work

Dash Python
1

I have a dash datatable with row selectable=‘single’. I can select any row. However when I click on a select of an already selected row, it does not unselect. Anyone have any idea what is wrong?

2

Hi @Brent

With the DataTable, when you use the row selectable='single' it functions as a RadioItem and it’s not possible to toggle to unselect it - it’s only possible to select a different row.

With selectable'='multi' it renders as a checkbox which you can toggle, but then you can also select multiple rows.

Try using dash-ag-grid. Below is an example of a single row selection with a checkbox. You can find out more about selectable rows in in the dash-ag-grid docs.


import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, callback
import pandas as pd

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


columnDefs = [
    {"field": "athlete", "checkboxSelection": True},
    {"field": "age", "maxWidth": 100},
    {"field": "country"},
    {"field": "date", "minWidth": 150},
    {"field": "sport"},   
]


defaultColDef = {
    "flex": 1,
    "minWidth": 150,
    "sortable": True,
    "resizable": True,
    "filter": True,
}


app.layout = html.Div(
    [
        dcc.Markdown("This grid has single-select rows with checkboxes."),
        dag.AgGrid(
            id="selection-checkbox-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,
            dashGridOptions={"rowSelection":"single"},
        ),
        html.Div(id="selections-checkbox-output"),
    ],
    style={"margin": 20},
)


@callback(
    Output("selections-checkbox-output", "children"),
    Input("selection-checkbox-grid", "selectedRows"),
)
def selected(selected):
    if selected:
        selected_athlete = [s["athlete"] for s in selected]
        return f"You selected athletes: {selected_athlete}"
    return "No selections"


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

Thanks for the clarification. It seems like an odd way for ‘single’ to work.

I have a large multipage app. When I started it, dash-ag-grid was not available. I have some wrappers built up around datatable and there were a few things that the free version of dash-ag-grid does not have that datatable does. I could probably plug in dash-ag-grid without a huge effort. My app is just in the prototype stage and I do not want to ask my manager to purchase dash-ag-grid yet until I know if the app will be used. My approach is to make it so nice that they would be crazy not to use it. The “official” platform others are using at my company is Supply Chain Navigator. Which in my opinion is not anywhere near up to the task.

4

Hi Brent,

According to the AG Grid License and Pricing page, you are not required to buy a license for evaluation purposes. There are so many cool features in Enterprise, that I expect you will easily be able to “make it so nice that they would be crazy not to use it” :wink:

If it’s necessary to “only” use AG Grid Community, can you say which DataTable features you need? There are some workarounds using Dash components and callbacks.

5

The big thing missing for me in community is excel export. However, now that I think about it, I made my own excel download callback even with datatables. It seems like there may have been something else missing when I watched the intro webinar but I cannot remember now. Maybe I will give it a try when I get a chance.

6

We have made some significant changes since the webinar, the webinar was a very basic version compared to what it can do now. :smiley: