✊🏿 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!

Dash Datatable Shifting on Selection

Hey everyone,

So I’m having an issue in my Dash Datatables, wherein I would like the cell borders to not be visible, and I would like the selected cell to have a minimal border around it. I think that the interaction between styling my cells as border: none is creating this weird shifting that occurs when a cell is highlighted, and I was wondering if anyone has run into this or if anyone has a suggestion on how I could go about fixing it? Attached below is a gif of it happening in my application (it is a minor issue but because my application depends heavily on Datatables, it seems a worthwhile endeavor to see if there is a fix). I appreciate all of the help in advance :slight_smile: . (In the code, I have styled cells as border: none and the active cell has border: 1px solid lightgray).

Screen Recording 2021-07-20 at 10.42.58 AM

Hi @dash-beginner
You could try making the border 1px with a transparent color. If that doesn’t work, could you post a minimal working example?

@AnnMarieW This is an example that I just put together that replicates what I was experiencing at a minimal level - I tried the 1px transparent suggestion and I couldn’t get that to work either. I also remembered that I had put in a css component to adjust the height of the cells to mimic Excel styling a little bit better that could be the cause? I appreciate the suggestion and please let me know if you get the chance to take a look at the below code :slight_smile:. (As a sidenote, if you have any suggestions on how to fix the weird height for the filter row, would appreciate that as well).

import dash
import dash_table
import dash_html_components as html
import pandas as pd
import numpy as np

app = dash.Dash(__name__)

data = pd.DataFrame(np.random.randint(0,100,size=(100, 4)), columns=list('ABCD'))
data_columns = [{"name": i, "id": i} for i in data.columns]

app.layout = html.Div(
    dash_table.DataTable(
        id = 'sample-datatable',
        columns = data_columns,
        page_size=25,
        filter_action= 'native',
        data = data.to_dict('records'),
        css=[
            {'selector': '.dash-spreadsheet tr', 'rule': 'height: 12px;'},
        ],
        style_cell = {
            'whiteSpace': 'normal',
            'height': 'auto',
            'font-family': 'Calibri',
            'font-size': 13,
            'border': 'none',
        },
        style_header = {
            'borderBottom': '1px solid lightgray',
            'background': 'none',
            'fontWeight': 'bold'
        },
        style_data_conditional = [
            {
                'if': {
                    'state': 'active'
                },
                'backgroundColor': 'none',
                'border': '1px solid grey'
            },
        ],
    )
)

if __name__ == '__main__':
    app.run_server(debug=True, port=8088)

Hi @dash-beginner

Thanks for the example!
In the style_cell I changed the 'border': 'none', to:

'border': '1px solid transparent',

and it worked. To style the filter, you can use the style_filter parameter, for example:

style_filter= {'height': 40},
1 Like

Ah thank you so much for the help! That worked like a charm!

1 Like