Dash table and scatter plot side by side

Dash Python
1

Hi,

I am new to this forum and dash and trying to create app layout that I can have scatter plots and data tables.
I tried this code below but I’m having table on top (with full width) and a scatter plot below. this is not what I wanted to have. I’m trying to have something in below graph.

app.layout = html.Div([
    
    dbc.Row([ dbc.Col(
    dash_table.DataTable(
        style_data={
        'whiteSpace': 'normal',
        'height': 'auto',
        'lineHeight': '15px'
    
    },
    fill_width=True,
    
    id = 'my_accounting_table',
    

    data = accounting_dt.to_dict('records'),
    columns = [{'id': c, 'name':c} for c in accounting_dt.columns]
        
    
)
    ),
    
    dbc.Col(
    
    html.Div(dcc.Graph(id = 'my_scatter_plot', figure=scatterplot)),
    width=6, lg={'size': 6,  "offset": 0, 'order': 'last'})
    ])])

image
image734×449 1.99 KB

2

Hi @kenji wellcome to Dash.

You missed to define the width for the first column.
dbc.Row sets each row of the layout and dbc.Col define each column for each dbc.Row, then you need to set how much space its needed for each column (in your case 6 for each one):

Hope it works. :smiley:

app.layout = html.Div([
              dbc.Row([
                     dbc.Col(
                           dash_table.DataTable( style_data={'whiteSpace': 'normal',
                                                'height': 'auto', 'lineHeight': '15px'},
                                                 fill_width=True,
                                                 id = 'my_accounting_table',
                                                 data = accounting_dt.to_dict('records'),
                                                 columns = [{'id': c, 'name':c} for c in accounting_dt.columns])
                               , width=6, lg={'size': 6,  "offset": 0, 'order': 'first'}),
    
                              dbc.Col(
                                       html.Div(dcc.Graph(id = 'my_scatter_plot', figure=scatterplot)),
                                        width=6)
                             ])
                 ])
3

Hi @Eduardo ,

Thank you for the tip. OTH, I got the error when adding width … inside data_Table
TypeError: The dash_table.DataTable component (version 4.11.1) with the ID “my_accounting_table” received an unexpected keyword argument: width
Allowed arguments: active_cell, cell_selectable, column_selectable, columns, css, data, data_previous, data_timestamp, derived_filter_query_structure, derived_viewport_data, derived_viewport_indices, derived_viewport_row_ids, derived_viewport_selected_columns, derived_viewport_selected_row_ids, derived_viewport_selected_rows, derived_virtual_data, derived_virtual_indices, derived_virtual_row_ids, derived_virtual_selected_row_ids, derived_virtual_selected_rows, dropdown, dropdown_conditional, dropdown_data, editable, end_cell, export_columns, export_format, export_headers, fill_width, filter_action, filter_query, fixed_columns, fixed_rows, hidden_columns, id, include_headers_on_copy_paste, is_focused, loading_state, locale_format, markdown_options, merge_duplicate_headers, page_action, page_count, page_current, page_size, persisted_props, persistence, persistence_type, row_deletable, row_selectable, selected_cells, selected_columns, selected_row_ids, selected_rows, sort_action, sort_as_null, sort_by, sort_mode, start_cell, style_as_list_view, style_cell, style_cell_conditional, style_data, style_data_conditional, style_filter, style_filter_conditional, style_header, style_header_conditional, style_table, tooltip, tooltip_conditional, tooltip_data, tooltip_delay, tooltip_duration, tooltip_header, virtualization

4

You should add width to dbc.Col rather than dash_table.DataTable. If you do that does it fix your problem?

5

Yes, see that in my example is part of the dcc.Col.

6

Ok. Sorry. I put it now outside of dcc.col and still the data table takes entire row and scatter plot below to it. They look like this and nothing has changed!

image

app.layout = html.Div([

dbc.Row([ dbc.Col(
dash_table.DataTable(
    style_data={
    'whiteSpace': 'normal',
    'height': 'auto',
    'lineHeight': '15px'

},
fill_width=False,

id = 'my_accounting_table',


data = accounting_dt.to_dict('records'),
columns = [{'id': c, 'name':c} for c in accounting_dt.columns],

), width=6, lg={‘size’: 6, “offset”: 0, ‘order’: ‘first’}
),

dbc.Col(

html.Div(dcc.Graph(id = 'my_scatter_plot', figure=scatterplot)),
width=6, lg={'size': 6,  "offset": 0, 'order': 'last'})
])])
7

is it dbc or dcc.col ? confused!

8

dbc.Col

dcc.Col doesn’t exist.