Fixing Header In Dash Table Causing Rows to be Distorted

Dash Python
1

Hi,

I’m trying to have a dash table that only shows the first 30 rows and has a fixed header when scrolling.

The default table looks good:

image
image1305×303 14.8 KB

code here:

app.layout = html.Div([dash_table.DataTable(id='raw_data',
                                        data=[]
                                        ),
                   dcc.Interval(id='interval_component',
                                interval=60000,
                                n_intervals=0
                                )
                   ])

adding in maxHeight here still keeps the format looking good:

app.layout = html.Div([dash_table.DataTable(id='raw_data',
                                            data=[],
                                            style_table={
                                                'maxHeight': '30',
                                                'overflowY': 'scroll',
                                            }
                                            ),
                       dcc.Interval(id='interval_component',
                                    interval=60000,
                                    n_intervals=0
                                    )
                       ])

it’s when i try and fix the header that everything gets distorted.

I’ve tried setting maxWidth and max-width as well as a overflorwX and nothing seems to fix the problem.

image
image1304×532 25.2 KB

final code that’s not working:
app.layout = html.Div([dash_table.DataTable(id=‘raw_data’,
data=,
fixed_rows={‘headers’: True},
style_table={
‘maxHeight’: ‘30’,
‘overflowY’: ‘scroll’,
}
),
dcc.Interval(id=‘interval_component’,
interval=60000,
n_intervals=0
)
])

Any advice would be greatly appreciated!

2

Issue fixed with this code :slight_smile:
style_header=
{
‘fontWeight’: ‘bold’,
‘border’: ‘thin lightgrey solid’,
‘backgroundColor’: ‘rgb(100, 100, 100)’,
‘color’: ‘white’
},
style_cell={
‘fontFamily’: ‘Open Sans’,
‘textAlign’: ‘left’,
‘width’: ‘150px’,
‘minWidth’: ‘180px’,
‘maxWidth’: ‘180px’,
‘whiteSpace’: ‘no-wrap’,
‘overflow’: ‘hidden’,
‘textOverflow’: ‘ellipsis’,
‘backgroundColor’: ‘Rgb(230,230,250)’
},
style_data_conditional=[
{
‘if’: {‘row_index’: ‘odd’},
‘backgroundColor’: ‘rgb(248, 248, 248)’
},
{
‘if’: {‘column_id’: ‘country’},
‘backgroundColor’: ‘rgb(255, 255, 255)’,
‘color’: ‘black’,
‘fontWeight’: ‘bold’,
‘textAlign’: ‘center’
}
],
fixed_rows={‘headers’: True, ‘data’: 0}

3

awesome and it is easy to understand

4

Gentlemen,

I’m facing similar issue, when using fixed_rows={‘headers’: True, ‘data’: 0} the table is messed up.

Please advise how to solve this issue.

Here is the used code:

        fixed_rows={'headers': True, 'data': 0},
        style_table={
            'overflowY': 'scroll',  
            'overflowX': 'scroll',
            'height': 400,  # Adjust table height,
        },
        style_data={  # overflow cells' content into multiple lines
            'whiteSpace': 'normal',
            'height': 'auto',
            'backgroundColor': colors['background'], 
            'color': 'white'  
        },
        style_filter={
            'backgroundColor': colors['background'], 
            'color': 'white'
        },
        style_header={
            'backgroundColor': colors['background'], 
            'fontWeight': 'bold',  # make it bold
            'color': 'white',  # header text color
            # 'minWidth': 95, 'maxWidth': 95, 'width': 95
            # 'border': '1px solid white'
        },
        style_cell_conditional=[  # align text columns to left. By default they are aligned to right
            {
                'if': {'column_id': c},
                'textAlign': 'left'
            } for c in ['country', 'iso_alpha3']
        ],
        style_cell={  # ensure adequate header width when text is shorter than cell's text
            'minWidth': 95,
            'maxWidth': 95,
            'width': 95,
            'whiteSpace': 'no-wrap',
            'overflow': 'hidden',
            # 'backgroundColor': 'rgb(50, 50, 50)',   # 'backgroundColor': colors['background'],
            # 'color': 'white'
        },

image
image2522×858 152 KB

5

when you do a “pip list” in your virtual environment do you see dash version 1.14.0? I had an issue where my venv was on dash 1.14.0 but my conda environment was still on 1.13.x and I was running the app out of the conda environment on accident. 1.14.0 has fixed the header alignment the best I can tell.