Datatable - multiple presentation modes in one column

I need to apply multiple presentation modes in one column of a datatable. For example, one cell needs to hold a dropdown field, while other cells in the same column needs to be editable.

Here’s my toy code:

from dash import Dash, dash_table, html
import pandas as pd
from collections import OrderedDict


app = Dash(__name__)

df_per_row_dropdown = pd.DataFrame(
    OrderedDict(
        [
            ("Parameter", ["Direction", "Transaction fee", "Transaction slippage"]),
            ("Value", ["Long_only", 0.002, 0.001]),
        ]
    )
)


app.layout = html.Div(
    [
        dash_table.DataTable(
            id="dropdown_per_row",
            data=df_per_row_dropdown.to_dict("records"),
            columns=[
                {"id": "Parameter", "name": "Parameter"},
                {
                    "id": "Value",
                    "name": "Value",
                    "presentation": "dropdown",
                },
            ],
            editable=True,
            dropdown_conditional=[
                {
                    "if": {
                        "column_id": "Value",
                        "filter_query": '{Parameter} eq "Direction"',
                    },
                    "options": [
                        {"label": i, "value": i}
                        for i in ["Long_only", "Short_only", "Both"]
                    ],
                },
            ],
        ),
        html.Div(id="dropdown_per_row_container"),
    ]
)


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

image

The dropdown cell is working as expected. However, I am not able to edit other cells in the Value column.

A solution to this issue would be highly appreciated. - Thanks.

Hi @Kraxelhuber
I don’t think you can have a column that is both:

"presentation": "dropdown",
"editable": True

I’ll try to play around with it more and let you know if I find anything or a workaround.

Thanks Adam!

A workaround may be to simply create two tables. However, this then looks a bit unprofessional, in my view.

1 Like