Checkbox in Dash Datatable

Dash Python
7

Hi @zachmorris

I think the best option would be to use an html table and style it so it’s similar to a Dash Datatable. Then you could put a checkbox component in the table, and it would work quite nicely.

But here is one workaround with a DataTable. You can use check boxes as icons in a dropdown. The callback could use the data prop as an Input.

image


import dash
import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict


app = dash.Dash(__name__)

df = pd.DataFrame(
    OrderedDict(
        [
            ("Task", ["Task 1 ", "Task 2", "Task 3", "Task 4"]),
            ("Employee1", ["checked", "unchecked", "checked", "unchecked"]),
            ("Employee2", ["unchecked", "unchecked", "checked", "checked"]),
        ]
    )
)


app.layout = html.Div(
    [
        dash_table.DataTable(
            id="table-dropdown",
            data=df.to_dict("records"),
            columns=[
                {"id": "Task", "name": ""},
                {"id": "Employee1", "name": "Employee 1", "presentation": "dropdown"},
                {"id": "Employee2", "name": "Employee 2", "presentation": "dropdown"},
            ],
            style_data_conditional=[
                {
                    "if": {"column_id": ["Employee1", "Employee2"]},
                    "fontSize": 30,
                    "textAlign": "center",
                }
            ],
            editable=True,
            dropdown={
                "Employee1": {
                    "options": [
                        {"label": "☑ ", "value": "checked"},
                        {"label": "☐", "value": "unchecked"},
                    ],
                    "clearable": False,
                },
                "Employee2": {
                    "options": [
                        {"label": "☑ ", "value": "checked"},
                        {"label": "☐", "value": "unchecked"},
                    ],
                    "clearable": False,
                },
            },
        ),
        html.Div(id="table-dropdown-container"),
    ]
)


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