DashTable VERY Broken

Dash Python
1

Hey everyone,

Sorry for the vague title but I am having multiple problems styling my DashTable DataTable. Very sorry for the list format as well, just trying to get to the point. Here is the code summary:

columns = an array of dicts containing {id, name, and type}

table_values = a pandas data frame, very straight forward, no frills

table = dash_table.DataTable(
            data=table_values.to_dict('records'),
            columns=columns,
            fixed_rows={'headers': True, 'data': 0},
            editable=False,
            # filter_action="native",
            sort_action="native",
            sort_mode="multi",
            page_action="none",
            fill_width=False,
            style_table={
                'maxHeight': '400px',
                'overflowY': 'scroll',
                #'overflowX': 'scroll',
                # 'width': '90%',
            },
            style_header={
                'font-family': 'Sans-Serif',
                'font-size': '12px',
                'fontWeight': 'bold'
            },
            style_cell={
                'font-family': 'Sans-Serif',
                'font-size': '11px',
                'height': 'auto',
                'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
                'whiteSpace': 'normal',
            },
            style_cell_conditional=[
                {'if': {'column_type': 'numeric'},
                 'width': '100px'},
            ],
        )

Issue list:

  1. My Y-Scroll doesnt have a scroll bar… just the frame of the scroller
    image

  2. The X-Scroll is already there? Uncommenting “‘overflowX’: ‘scroll’,” just adds a second scroll bar

    image
    image1836×50 880 Bytes

  3. Enabling the filter_action adds the filter row but it is about 2 pixels in height. It is that thin middle strip in the image below

    image
    image994×60 878 Bytes

  4. If I change ‘fixed_rows’ to ‘fixed_columns={‘headers’: True, ‘data’: 1}’, then the only columns that show in the table are the ones selected to be fixed

  5. Minor, but kind of annoying and no matter what I change I cant fix this, none of my tables have the left hand boarder? Not a clue as to why.

    image
    image994×69 4.12 KB

Help on any of these would be greatly appreciated.

The page structure is essentially dbc.Container->dbc.Row->html.Center->html.Div->Table

I also saw on this forum to add this css?

.dash-spreadsheet.dash-freeze-left {
    max-width: none !important;
}

I have been playing with positioning, css, table options for the past 6 hours. I am lost as to where these issues are coming from.

Thank you!

2

Bumping for visibility. Still cannot fix any of these issues :thinking:

3

I have discovered most of these issues occur from the fixed_columns and fixed_rows features. Still cant figure out why the left boarder of my table is hidden