CODEWITHSUNDEEP
pandasplotly-dash
Rishim Mittal
Rishim Mittal

Reputation: 115

Adjust plotly-Dash table column width

I want to adjust the width of columns in Dash table (created from Pandas Dataframe). There are 3 columns in table : Path Scenario Step

I want to set the column width of first column (Path) to 10% and the second column (Scenario) to 40% and the last column (Step) to 50%.

I am running below code, but the column width changes are not working as expected. "Path" column is taking more than 50% of width and "Steps" column around 20%. Dataframe name is dfSteps

                columns=[{"name": i, "id": i} for i in dfSteps.columns],
                data=dfSteps.to_dict('records'),

                style_header={
                    'backgroundColor': 'rgb(230, 230, 230)',
                    'fontWeight': 'bold'
                },
               style_table={
                    'maxWidth': '2000px',
                    'overflowX': 'scroll',
                    'border': 'thin lightgrey solid'
                },

                 style_cell={
                    'font_family': 'cursive',
                    'font_size': '16px',
                    'border': '1px solid grey',
                    'minWidth': '1px', 'width': 'fixed', 'maxWidth': '1000px',
                    'textAlign': 'left', 'whiteSpace': 'normal'

                 },
            
                style_cell_conditional=[
                    {'if': {'column_id': 'Path'},
                     'width': '10%'},
                    {'if': {'column_id': 'Scenario'},
                     'width': '40%'},
                    {'if': {'column_id': 'Path'},
                     'width': '50%'},
                ],
        ),

Upvotes: 4

Views: 12388

Answers (1)

Devin Burke
Devin Burke

Reputation: 538

Just redefine your table as they suggest in the documentation https://plotly.com/python/table/

fig = go.Figure(data=[go.Table(
  columnorder = [1,2],
  columnwidth = [80,400],
  header = dict(
    values = [['<b>EXPENSES</b><br>as of July 2017'],
                  ['<b>DESCRIPTION</b>']],
    line_color='darkslategray',
    fill_color='royalblue',
    align=['left','center'],
    font=dict(color='white', size=12),
    height=40
  ),
  cells=dict(
    values=values,
    line_color='darkslategray',
    fill=dict(color=['paleturquoise', 'white']),
    align=['left', 'center'],
    font_size=12,
    height=30)
    )
])
fig.show()

Upvotes: 2

Related Questions