1

I am using Dash actually but havent found any way to properly set column width adapted to the content. Because when I set fill_width to False, the width fits to the datas but not to the header and on some of my columns the header is wider than the datas.

Any proper way to fix this ? Thank you in advance

NB : my code, even if I think it is not that helpful:

# Dashboard
html.Div(id="table", children=[
    dash_table.DataTable(
        style_header={
                'backgroundColor': colors['bg_board'],
                'color': colors['text_category'],
                'fontWeight': 'bold'
        },
        style_cell={
            'textAlign': 'center'
        },
        style_cell_conditional=[
            {
                'if': {'column_id': 'Maturity'},
                'backgroundColor': colors['bg_board'],
                'color': colors['text_category'],
            }
        ],
        style_table={
            'overflowY': 'auto',
            'overflowX': 'auto'
        },
        fixed_rows={'headers': True},
        fixed_columns={'headers': True},
        id='tbl'
    )
]),

'data' is set in a callback but it is just a simple dataframe.

Ces
  • 76
  • 1
  • 7

1 Answers1

0

I'm using below code to style my dashtable. Hope this help:

dash_table.DataTable(
    id='table_data',
    columns=[{"name":i,"id":i} for i in df.columns],
    data=[],
    style_table={'overflow':'scroll','height':550},
    style_header={'backgroundColor':'#305D91','padding':'10px','color':'#FFFFFF'},
    style_cell={'textAlign':'center','minWidth': 95, 'maxWidth': 95, 'width': 95,'font_size': '12px','whiteSpace':'normal','height':'auto'},
    editable=True,              # allow editing of data inside all cells
    filter_action="native",     # allow filtering of data by user ('native') or not ('none')
    sort_action="native",       # enables data to be sorted per-column by user or not ('none')
    sort_mode="single",         # sort across 'multi' or 'single' columns
    column_selectable="multi",  # allow users to select 'multi' or 'single' columns
    row_selectable="multi",     # allow users to select 'multi' or 'single' rows
    row_deletable=True,         # choose if user can delete a row (True) or not (False)
    selected_columns=[],        # ids of columns that user selects
    selected_rows=[],           # indices of rows that user selects
    page_action="native")
hoa tran
  • 1,391
  • 1
  • 5
  • 14
  • Hi thank you for your reply ! I've tried to use your advices before answering you and it helped me so much so thank you ! I just have one last question : do you know if there is a way to fix properly the column row to see it when we scroll ? Because the parameter fix_rows seems broken when combined to overflow (double scroll bar, column name is truncated etc.) ? Thank you ! – Ces Jun 02 '22 at 12:11