Dash Datatable Shifting on Selection

Dash Python
1

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

2

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?

3

@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)
4

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
5

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

1 Like