Disable highlighting of active cell in DashTable

Question

How can I stop the active cell (the cell clicked on last) being highlighted in a dash datatable?

Answer 1

This can be achieved by inheriting the background color and border when the cell is selected using conditional styling when creating the data table:

style_data_conditional=[
    {
        "if": {"state": "selected"},
        "backgroundColor": "inherit !important",
        "border": "inherit !important",
    }
]

---

Alternatively, you should be able to achieve this by adding a custom CSS file into the assets folder of your project. How to do this is explained in the Dash forum.

I have completely removed the highlighting by setting values to transparent.

.dash-spreadsheet-container .dash-spreadsheet-inner table {
        border-collapse: collapse;
        font-family: monospace;
        --accent: transparent  !important;
        --border: transparent !important;
        --text-color: transparent !important;
        --hover: transparent !important;
        --background-color-ellipses: transparent !important;
        --faded-text: transparent !important;
        --faded-text-header: transparent !important;
        --selected-background: transparent !important;
        --faded-dropdown: transparent !important;
        --muted: transparent !important;
    }