Dash DataTable Bug Width

Dash Python
1

Hey everyone - I’m having some weird behavior with the Dash Datatable with the following code and was wondering whether anyone else who runs this also has the same bug. I want the table to be scrollable horizontally, but it seems to have a really weird behavior when you scroll because it keeps trying to pull the whole thing back to the original position and I’m also not able to set the column width for the “pad” column to be any kind of small pixel width. Any help that you all might have would be appreciated. Thanks! :slight_smile:

import dash
from dash import html
import dash_table
import pandas as pd
from collections import OrderedDict

data_election = OrderedDict(
    [
        (
            "Date",
            [
                "July 12th, 2013 - July 25th, 2013",
                "July 12th, 2013 - August 25th, 2013",
                "July 12th, 2014 - August 25th, 2014",
            ],
        ),
        (
            "Election Polling Organization",
            ["The New York Times", "Pew Research", "The Washington Post"],
        ),
        ("Rep", [1, -20, 3.512]),
        ("Dem", [10, 20, 30]),
        ("Ind", [2, 10924, 3912]),
        ("pad", [None,None, None]),
        (
            "Region",
            [
                "Northern New York State to the Southern Appalachian Mountains",
                "Canada",
                "Southern Vermont",
            ],
        ),
    ]
)

df = pd.DataFrame(data_election)

app = dash.Dash(__name__)

app.layout = html.Div(
    dash_table.DataTable(
        data=df.to_dict('records'),
        columns=[
            {"id": "Date", "name": ["INFO", "Date"]},
            # {"id": "Election Polling Organization", "name": ["INFO", "Election Polling Organization"]},
            {"id": "Rep", "name": ["Party1", "Rep"]},
            {"id": "Dem", "name": ["Party1", "Dem"]},
            {"id": "pad", "name": ["", ""]},
            {"id": "Ind", "name": ["Party3", "Ind"]},
            {"id": "Region", "name": ["INFO", "Region"]},
        ],
        # columns=[{'id': c, 'name': ["test_", c]} for c in df.columns],
        merge_duplicate_headers=True,
        fixed_columns={ 'headers': True, 'data': 1 },
        style_table={'minWidth': '100%'},
        style_cell={
            # all three widths are needed
            'minWidth': '100px', 'width': '100px', 'maxWidth': '100px',
            'overflow': 'hidden',
            'textOverflow': 'ellipsis',
        },
        style_cell_conditional=[
            {'if': {'column_id': ['Rep', 'Dem', 'Ind']},
            'minWidth': '50px', 'width': '50px', 'maxWidth': '50px'},
            {'if': {'column_id': ['Region']},
            'minWidth': '75px', 'width': '75px', 'maxWidth': '75px'},
            {'if': {'column_id': ['pad']},
            'minWidth': '2px', 'width': '2px', 'maxWidth': '2px'},
        ]
    ),
    style={'width': '400px', 'margin-right': 'auto'},
)
if __name__ == '__main__':
    app.run_server(debug=True)
2

Basically, one of my main questions is is there a way to set the width of a column to be only like 4px wide to act as a buffer between sections (my data cleaning ignores the column anyways, so it’s purely aesthetic, but the data as a whole should be in one table rather than multiple). Thanks!

3

Hi @dash-beginner

The column width problem is cause by the merge_duplicate_header

You can fix it by changing this line :

 {"id": "pad", "name": ["", ""]},

to:

{"id": "pad", "name": ["Party3", ""]},

But I don’t know what you mean by the following - can you elaborate?

4

Is there a way to not merge the padding column with an adjacent one, but still keep it around 4px wide? I’m currently centering the headers and the merged headers in my actual implementation and merging the padding column with an adjacent one would result in the centered header being slightly to one side. I know it’s nitpicking, but it’s important that I get the design as close to the desired outcome as possible. Thanks! (I’ll get back to you with a minimal example of the bounce back thing that I’m experiencing - realized that this example doesn’t seem to have the issue that I was having).