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:
- The button in charge of moving to the next pages and back is positioned way off in relation to the table
- 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:

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'
})