How to center a Dash datatable that doesn't fill the width of the screen

[anarchocaps]

My goal is to center this datatable that doesn’t fill the width of the screen.

I have tried applying center-align styling to the row, col, placing the table in a div, and styling the table itself. Nothing seems to work. What am I doing wrong?

FWIW, I removed the styling to the row and col as they had no impact…

dbc.Row([
    dbc.Col([
        html.Div([
            dash_table.DataTable(
                id='suggested_kws_tbl',
                row_deletable=True,
                export_headers='display',
                page_size=200,
                fill_width=False,
                style_cell={
                    'padding-right': '30px',
                    'padding-left': '30px',
                    'text-align': 'center',
                    'marginLeft': 'auto',
                    'marginRight': 'auto'
                }
            ),
        ],style={
            'textAlign': 'center',
            "margin-left":"20px",
            "margin-right":"20px"
        }
        ),
    ]),
]),

[jgomes_eu]

If you think that dash bootstrap components divides the screen in 12 columns, you can create three columns inside your dbc.Row and put your table in the middle column, inside that row

Try something like this:

dbc.Row(
    [
    dbc.Col(
        html.Div(),
    xs=12, sm=12, md=3, lg=3, xl=3, # This sets the column width for different screen sizes
    ),
    dbc.Col(
        html.Div(YOUR TABLE GOES HERE),
    xs=12, sm=12, md=3, lg=3, xl=6, # This sets the column width for different screen sizes
    ),
    dbc.Col(
        html.Div(),
    xs=12, sm=12, md=3, lg=3, xl=3, # This sets the column width for different screen sizes
    ),

    ] ,className="g-0" #This allows to have no space between the columns. Delete if you want to have that breathing space
) 

Hope this helps.

[anarchocaps]

When I put borders around the row, col, and div, all of them are overlapping (they are all basically the exact same size). All 3 of these are full width. It is only the datatable itself that is shifted to the left within the div. Even if I get rid of the div and put the datatable directly in the col, it is still shifted all the way to the left.

Using what you provided kind of works, but it is not exactly centered as I would expect it, and its location changes slightly depending on what screen size is being used.

It seems like there should be either a className or style={} arg that I can pass with the datatable to get it to do a horizontal center

[jgomes_eu]

Maybe using dash mantine components will solve your issue?

import dash_mantine_components as dmc

dmc.Center(
    style={"height": 200, "width": "100%"},
    children=[
        dmc.Badge("Free", style={"marginRight": 5}),
        dmc.Anchor("Click now!", href="https://mantine.dev/"),
    ],
)

Reference Center

[anarchocaps]

@jgomes_eu

dash mantine components

This seems way overkill - I am trying to center a component within a div. I don’t see how it can be this complicated…

[jgomes_eu]

I’m just trying to help with a solution, @anarchocaps

[adamschroeder]

hi @anarchocaps
@jgomes_eu 's suggestion is probably your best option. I would also add to that code the prop style_table={'overflowX': 'auto'}, inside the datatable.

from dash import Dash, dash_table, dcc, html
import pandas as pd
import dash_bootstrap_components as dbc

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

my_table = html.Div([
    dash_table.DataTable(df.to_dict('records'), [{"name": i, "id": i} for i in df.columns],
                        fill_width=False, style_table={'overflowX': 'auto'},
                        style_cell={
                            'padding-right': '30px',
                            'padding-left': '10px',
                            'text-align': 'center',
                            'marginLeft': 'auto',
                            'marginRight': 'auto'
                        }
    ),
],style={
    'textAlign': 'center',
    "margin-left":"20px",
    "margin-right":"20px"
})

app.layout = dbc.Container([
    dbc.Row(
        [
        dbc.Col(
            dcc.Markdown("left div", className="bg-primary"),
        xs=12, sm=12, md=3, lg=3, xl=3, # This sets the column width for different screen sizes
        ),
        dbc.Col(
            my_table,
            xs=12, sm=12, md=6, lg=6, xl=6, # This sets the column width for different screen sizes
        ),
        dbc.Col(
            dcc.Markdown("right div", className="bg-primary"),
        xs=12, sm=12, md=3, lg=3, xl=3, # This sets the column width for different screen sizes
        ),

        ] ,className="g-0" #This allows to have no space between the columns. Delete if you want to have that breathing space
    )
])



if __name__ == '__main__':
    app.run_server(debug=True)