✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How to resize Dash datatable

I am working with the Dash datatable. I am trying to resize my table so it does not take the whole browser width like it is shown currently below: I would like some padding around it.

Here is my current working code:

output = dash_table.DataTable(id='table_overview', 

                                      

                                      columns=[{'name': col, 

                                                'id': col} 

                                               for col in df.columns],

                                      

                                      style_table= {'overflowX': 'auto', 'height': '300px', 'overflowY': 'auto'},

                                      

                                      style_data = {"text-align": "center"},

                                      

                                      style_header={

                                          'backgroundColor': 'rgb(6, 67, 122)',

                                          'color': 'white',

                                          "text-align": "center",

                                          'fontWeight': 'bold'},

                                      

                                      style_cell={

                                          # all three widths are needed

                                          'minWidth': '180px', 

                                          'width': '180px', 

                                          'maxWidth': '180px',

                                          'overflow': 'hidden',

                                          'textOverflow': 'ellipsis',

                                        },

                                      

                                      data=df.to_dict('records'),

                                      

                                      page_size=20,

                                                                  

                                      )

Additionally, in the sample on Dash datatable, the controls at the bottom seem to be working without a callback. Is a callback necessary for this as well? Your help is greatly appreciated

Hi!
I don’t know if I understand what you want to do, but I think you should just put your table in some sort of container, like a html.Div or a dbc.Container, and then define margins for that container (if you use dbc.Container, you probably want to define fluid=True, so that it’ responsive, https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/).

As for your second question, those buttons should work without a callback.

Thank you very much for your input! Unfortunately the buttons are not working. What can I do?

That’s weird, they are working for me… What is the current layout of your app? And what version of dash_table are you using?

Dash - ‘1.12.0’
Dash Table - ‘4.7.0’

I’m using dash_table 4.9, but I don’t think the problem comes from there…
What about the layout?

What layout? The app layout you mean?

Yes, maybe there is something in your layout that causes some problem (but let’s be honest, I’m really not sure)

Maybe I should upgrade the datatble?

You can try, it might help.