How to resize Dash datatable

Dash Python
1

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.

image
image3240×718 110 KB

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

2

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.

3

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

4

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?

5

Dash - ‘1.12.0’
Dash Table - ‘4.7.0’

6

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

7

What layout? The app layout you mean?

8

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

9

Maybe I should upgrade the datatble?

10

You can try, it might help.