✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How to enable selecting cell content with mouse?

I would like to be able to select the cell content with my mouse so that I can easily copy-paste it elsewhere. I’m not talking about cell_selectable property: I don’t want to select the cell as Dash means but just highlight the content with my mouse for copy-pasting. I noticed that Dash DataTable sets user-select: none by default in CSS. I tried to override this as follows:

dash_table.DataTable(
    css=[
        {
            "selector": ".dash-cell-value",
            "rule": "user-select: all;",
        },
    ],
    ...
)

But it doesn’t work. Any ideas how to make it work? I did test both with cell_selectable=True and False but it has no effect on being able to select the content. On older Dash version this was still possible so it has changed recently.

This didn’t have any effect either:

style_data={
    "user-select": "all",
},

Nor this:

style_data={
    "userSelect": "all",
},