##Overview
I am trying to retrofit a dashboard away from tableau and towards plotly dash. I am able to recreate most of the graphs, pie charts, and scatter plots and lay them out on the dashboard appropriately. I will admit that I am new to plotly and dash, therefore my approach to the layout of the datatables in the dashboard may not be the best. I am open to suggestions. My end goal is two have two tables side by side each containing a width of 6, totaling the max of 12 columns. However, what I am getting is the table is stretching the full length of 12 columns, as opposed to staying at 6.
Dependencies
My Dependencies for the entire dashboard are as follows:(some dependencies are used in other parts of the dashboard):
from dash import Dash, dash_table
from dash import html
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd
from turtle import bgcolor
from matplotlib.pyplot import title
Code
app.layout = html.Div([
html.Div([dbc.Row([dbc.Col(dash_table.DataTable(
data=df_bu_convert.to_dict("records"),
columns=[
{'name': "Business Unit", 'id': 'Business Unit','type': 'text', 'editable':False},
{'name': "Ticket Count", 'id': 'Ticket Count','type': 'numeric', 'editable':False},
],
), width =6)
])])
])
if __name__ == '__main__':
app.run_server(debug=True)
Conclusion
This approach worked really well for graphs and plots. But, I can not get it to work for data tables. Any help would be appreciated.
Hi @cthompsonlbi and welcome to Dash 
There are several different ways to make the dataTable stay inside it’s container. You can see the options here: DataTable Width & Column Width | Dash for Python Documentation | Plotly
One simple way is to add this to the table definition:
style_table={'overflowX': 'auto'},
Hi AnnMarieW,
Thank You for the warm welcome and quick response. I am happy to be here and trying my best to learn something new. I appreciate you taking the time to respond. I looked through that link that you sent and didn’t find exactly what I am looking for. Or perhaps it does and I just do not understand the application due to my inexperience. What I am trying to do is arrange multiple tables and visualization on my dashboard. I have included a mockup of what I am trying to accomplish below. I have two data tables, side by side, below the header banner. Each occupying a width of 6 on the dashboard. Then I have a pie chart and line chart occupying column widths of 5 and 7 respectively. Then a bar chart at the bottom that occupies the full width of 12 columns. I am able to get the pie chart, line chart, and bar chart to adhere to the assigned with but, the data tables take the full 12 columns regardless of the width setting that I apply.
Once again, I really do appreciate your help with this.
Hi @cthompsonlbi
Here is an example with two datatables side by side:
import dash
from dash import html, dash_table
import dash_bootstrap_components as dbc
import plotly.express as px
df= px.data.tips()
table = html.Div(dash_table.DataTable(
df.to_dict('records'),
columns = [{"name": i, "id": i} for i in df.columns],
style_table={'overflowX': 'auto',},
page_size=10,
), className="m-5")
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(table, width=6),
dbc.Col(table, width=6)
],
)
], fluid=True
)
if __name__ =="__main__":
app.run_server(debug=True)
Hi @AnnMarieW ,
Thank You so much. This was the fix. I need to really investigate this further because initially I made the adjustments to my code. It still didn’t work. Then I just wanted to see what would happen if I copy and pasted the code into my file to see if it would look like yours. Still didn’t work. Then I started adjusting my dependencies and format of the code and it worked!! Then I made the modifications to my code, now it works very well. Thanks again.
