Responsiveness issues with Dash/Plotly DataTable component

Viewed 646

I created a Dash application to present some data.

I've got a DataTable showing on the front page and I've set pagination configurations for it.

The DataTable is great except for 2 things:

  1. The button in charge of moving to the next pages and back is positioned way off in relation to the table
  2. The beginning and end of the table (the cells) are not showing well when I decrease the monitor size (non responsive)

I've added a picture to help understand these issues: enter image description here

This is on my wide screen, if I switch to my phone then the beginning of the ID column is not showing and the page navigator buttons are not showing as well.

This is the code I use to create this, the DataTable is wrapped inside the main container div:

import dash_html_components as html
from dash_table import DataTable
...

The code for the datatable:

active = DataTable(id='active-strategies',
                   columns=[{
                       "name": col,
                       "id": col
                   } for col in dummy_table.columns],
                   data=dummy_table.to_dict('records'),
                   page_current=0,
                   page_size=15,
                   filter_action="native",
                   style_table={
                       'width': '80%',
                       'margin': 'auto',
                       'padding': '0 5px',
                       'overflowX': 'auto',
                       'overflowY': 'auto',
                   },
                   style_cell={
                       'padding': '0 10px',
                       'fontSize': '14px',
                       'textAlign': 'center',
                       'whiteSpace': 'normal',
                   },
                   style_data={},
                   style_as_list_view=True)

And the div it's wrapped in:

layout1 = html.Div([
    ...
    active,
    ...
    ],
                   style={
                       'display': 'flex',
                       'flexDirection': 'column',
                       'justiyContent': 'center',
                       'alignItems': 'center',
                       'margin': 'auto',
                       'overflow': 'hidden',
                       'marginBottom': '200px'
                   })
1 Answers

Adding 'margin-left': '5%', 'margin-right': '5%' and 'width' : '90%' in your html.Div style should fix this issue! Play around with the values, of course.

Related