CODEWITHSUNDEEP
plotly-dash
Dave Anderson
Dave Anderson

Reputation: 667

Disable highlighting of active cell in DashTable

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

enter image description here

Upvotes: 6

Views: 5615

Answers (3)

Ange Tresca
Ange Tresca

Reputation: 61

Actually is really much simpler (at least in Python Dash DataTable). You can use the DataTable attribute cell_selectable=False. Docs here.

from dash import dash_table
dash_table.DataTable(
                      id="datatable-interactivity",
                      columns=columns,
                      data=data,
                      cell_selectable=False,
                     )

Upvotes: 6

EdH
EdH

Reputation: 240

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;
    }

Upvotes: 18

Andreas
Andreas

Reputation: 354

It took me a while and none of the solutions i found online worked.

The 'hotpink' selection can be styled by putting a .css file, i.e. datatable.css into the assets folder.

The content of my file is:

td.dash-cell.cell--selected.focused {
  background-color: #c4f0d5 !important;
}

td.dash-cell {
  border-color: #d8d8d8 !important;
}

where the first style is for the highlighted/focused cell and the second is styling all cells in the table, here the border color.

Upvotes: 5

Related Questions