Is it possible to either remove the pink selection/focused cell or to change the colour and focus the whole row?
2 Likes
I am also very interested in this issue, as I also have users that use IE, and that doesn’t show any color (defaults to white)!
I have seen this described here: https://github.com/plotly/dash-table/issues/256
Marc proposes a solution using css, but I am not sure how to implement. Maybe someone can help us out!
Marc’s recommendation was to override the table styling by defining a list of selectors in the css attribute of your datatable object (reference docs). Edge/IE isn’t readily accessible, so I didn’t check what he wrote out, but basically do something like this:
..
layout = ...,
..,
dt.DataTable(
data=[...],
columns=[{'id': c, 'name': c} for c in [ ... ],
..,
css=[{ # override default css for selected/focused table cells
selector: 'td.cell--selected, td.focused',
rule: 'background-color: #FF4136;'
}, {
selector: 'td.cell--selected *, td.focused *',
rule: 'color: #3C3C3C !important;'
}],
..,
id='my-table-id'),
..,
...
Alternatively, if you have many tables that you need to modify this way, you could hard-code the table styling using a css stylesheet placed in your assets folder. Use the CSS provided by Marc above, or something like the following should work:
(Arbitrarily, a new file called ./assets/my_custom_table_styling.css)
.dash-spreadsheet-container table {
--accent: #1EAEDB !important;
--selected-background: #FF4136 !important;
--selected-color: #3C3C3C !important;
}
app.py:
..
external_stylesheets = ["my_custom_table_styling.css"]
..
app = Dash(
__name__,
url_base_pathname='/',
..
external_stylesheets=external_css,
)
..
2 Likes
Thanks Brad! I tried the css solution and it worked perfectly for changing the selected cell color – but only in chrome (not in IE/Edge). I am not sure if there is some existing bug there (I am still using Dash version 0.43).
Not sure why it doesn’t work, suggest posting in that github issue for help from marc.
I did implement the stylesheet-in-assets-folder solution I suggested above and confirmed it works in at least Edge (v44.17763.1.0).
How it works is by overriding the table styling variables that are defined within the dash-table component:
.dash-spreadsheet-container .dash-spreadsheet-inner table {
border-collapse: collapse;
font-family: monospace;
--accent: hotpink;
--border: lightgrey;
--text-color: #3c3c3c;
--hover: #fdfdfd;
--background-color-ellipses: #fdfdfd;
--faded-text: #fafafa;
--faded-text-header: #b4b4b4;
--selected-background: rgba(255, 65, 54, 0.2);
--faded-dropdown: #f0f0f0;
--muted: #c8c8c8;
}
If you override --selected-background (and --accent) you can change the behavior of selected + focused cells across all tables. If you want to have different rules for different tables, you can change the css selector to only apply to the specific table id.
Hi brad,
It looks like my local css is not being loaded for IE/Edge pages. This may be due to some internal website configuration for our browsers, and not related to your solution. Thanks!
Nick
I tested again- Edge works, IE 11 is still not displaying selected cell color. I thought it was because my group policy made my pages display in compatibility mode in IE11, but I added headers and meta tags and my page I am not displaying in compatibility mode anymore and other CSS is working fine. I tried changing the opacity/transparency of the cell shading explicitly in the css and it did not make the IE selected cell appear. Kind of at a loss (most users default browser within my company is IE11). There are other issues with table formatting in IE11, but this is the most glaring. Not sure if IE has fundamental differences with displaying than other modern browsers?
Could you please provide a clean working solution to remove all fuzzy buzzy pink bs from the table. Nic
nothing of help
you write some nice stuff and docs etc, but BLANK about obvious stuff!
aint cutting it either: https://stackoverflow.com/questions/56363437/disable-highlighting-of-active-cell-in-dashtable
tried this, NEITHER:
import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
app = dash.Dash(__name__)
app.layout = html.Div([
dash_table.DataTable(
id='datatable-interactivity',
columns=[
{"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
],
data=df.to_dict('records'),
editable=True,
filter_action="native",
sort_action="native",
sort_mode="multi",
# column_selectable="single",
# row_selectable="multi",
# row_deletable=True,
selected_columns=[],
selected_rows=[],
page_action='none',
style_as_list_view=True,
style_cell={
# 'padding': '5px'
'backgroundColor': 'black',
'color': 'white',
'textAlign': 'left',
},
style_header={
'backgroundColor': 'transparent',
'fontWeight': 'bold'
},
style_data_conditional=[
{
'if': {
'state': 'active' # 'active' | 'selected'
},
'backgroundColor': 'rgba(0, 116, 217, 0.3)'
},
{
'if': {
'state': 'selected' # 'active' | 'selected'
},
'backgroundColor': 'rgba(0, 116, 217, 0.3)'
},
],
),
html.Div(id='datatable-interactivity-container')
], style={'backgroundColor': '#444444',})
@app.callback(
Output('datatable-interactivity', 'style_data_conditional'),
[Input('datatable-interactivity', 'selected_columns')]
)
def update_styles(selected_columns):
return [{
'if': { 'column_id': i },
'background_color': '#D2F3FF'
} for i in selected_columns]
@app.callback(
Output('datatable-interactivity-container', "children"),
[Input('datatable-interactivity', "derived_virtual_data"),
Input('datatable-interactivity', "derived_virtual_selected_rows")])
def update_graphs(rows, derived_virtual_selected_rows):
# When the table is first rendered, `derived_virtual_data` and
# `derived_virtual_selected_rows` will be `None`. This is due to an
# idiosyncracy in Dash (unsupplied properties are always None and Dash
# calls the dependent callbacks when the component is first rendered).
# So, if `rows` is `None`, then the component was just rendered
# and its value will be the same as the component's dataframe.
# Instead of setting `None` in here, you could also set
# `derived_virtual_data=df.to_rows('dict')` when you initialize
# the component.
if derived_virtual_selected_rows is None:
derived_virtual_selected_rows = []
dff = df if rows is None else pd.DataFrame(rows)
colors = ['#7FDBFF' if i in derived_virtual_selected_rows else '#0074D9'
for i in range(len(dff))]
return [
dcc.Graph(
id=column,
figure={
"data": [
{
"x": dff["country"],
"y": dff[column],
"type": "bar",
"marker": {"color": colors},
}
],
"layout": {
"xaxis": {"automargin": True},
"yaxis": {
"automargin": True,
"title": {"text": column}
},
"height": 250,
"margin": {"t": 10, "l": 10, "r": 10},
},
},
)
# check if column exists - user may have deleted it
# If `column.deletable=False`, then you don't
# need to do this check.
for column in ["pop", "lifeExp", "gdpPercap"] if column in dff
]
if __name__ == '__main__':
app.run_server(debug=True)
2 Likes
Please help, any ideas appreciated!
The Dash/Plotly team made it much easier to format active and selected cells in the DataTable in V1.12.
Here is an example of what to add to the table definition to change the background color and the border:
style_data_conditional=[
{
"if": {"state": "selected"}, # 'active' | 'selected'
"backgroundColor": "rgba(0, 116, 217, 0.3)",
"border": "1px solid blue",
},
]
In the previous post there was a callback to update the style_data_conditional property to change the background color of a selected column. However, in order to also keep the style for the active or selected cell, it needs to be included in the callback as well. For example:
@app.callback(
Output("datatable-interactivity", "style_data_conditional"),
[Input("datatable-interactivity", "selected_columns")],
)
def update_styles(selected_columns):
return [
# original post
{"if": {"column_id": i}, "backgroundColor": "#D2F3FF"} for i in selected_columns
] + [
{ # added code to keep style of selected cells
"if": {"state": "selected"}, # 'active' | 'selected'
"backgroundColor": "rgba(0, 116, 217, 0.3)",
"border": "1px solid blue",
},
]
3 Likes
With the help of you all i got to an acceptable solution. --text-color was overwriting my active green cell with some 3c3c3c.
import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
app = dash.Dash(__name__)
app.layout = html.Div([
dash_table.DataTable(
id='datatable-interactivity',
columns=[
{"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
],
data=df.to_dict('records'),
editable=True,
filter_action="native",
sort_action="native",
sort_mode="multi",
# column_selectable="single",
# row_selectable="multi",
# row_deletable=True,
selected_columns=[],
selected_rows=[],
page_action='none',
# style_as_list_view=True,
style_cell={
# 'padding': '5px'
'backgroundColor': 'black',
'color': 'white',
'textAlign': 'left',
},
style_header={
'backgroundColor': 'transparent',
'fontWeight': 'bold'
},
css=[
{"selector": ".dash-spreadsheet-container table", "rule": '--text-color: green !important'},
],
style_data_conditional=[
{
"if": {"state": "active"}, # 'active' | 'selected'
"backgroundColor": "black",
"border": "3px solid white",
"color": "green",
},{
"if": {"state": "selected"},
# "backgroundColor": "rgba(255,255,255, 0.1)",
"backgroundColor": "#444444",
},
],
),
html.Div(id='datatable-interactivity-container')
], style={'backgroundColor': '#444444',})
if __name__ == '__main__':
app.run_server(debug=True)
@brad I am trying to achieve the same thing as discussed here. I use dashR and would prefer the css solution with the stylesheet in the assets folder (as provided by you). But the css code directly shows an error. What do the - - signs mean?.
Thank you very much
Edit: Second screenshot with error message
