Dash datatable right to left

Dash Python
1

Hi Dash community,

Do you know how we can make datatable in such a way that the first colum start from right hand side?

It’s equivalent at Microsoft Excel is : Page Layout Ribbon → sheet Right to left
or in css probably is td {text-align: right; direction: rtl;}.

2

Welcome to Dash community :slightly_smiling_face:

If you are passing the column names as a list you can use list indexing to reverse the order.

Like this:

dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns[::-1]],
    data=df.to_dict('records'),
)
1 Like
3

Thank you, Dash is great but I am quite new to that and I need to search alot in the documentations.

That works nice and easy but still the whole table is aligned to the left side of the page.
In want it be at the right.

I have used :

fill_width=False,

Do you have any idea for that?

4

If you could provide some code of your app layout where you are placing the data table maybe I could help you with the alignment.

5

Sorry it’s a bit long.
I have defined dash_table.DataTable inside Div

app.layout = html.Div(
     children=[
            dash_table.DataTable( 
            id="datatable-Rates",
            columns=[
                dict(id=i, name=j, editable=m, type=l, format=k)
                for i, j, k, l, m in zip(
                    Rat_columns[::-1], Rat_names[::-1], Rat_formats[::-1], Rat_types[::-1], Rat_editable[::-1]
                )
            ],
            data=Rates.to_dict("records"),  
            sort_action="native", 
            selected_rows=[],
            sort_mode="single",  
            style_cell={  
                "minWidth": 35,
                "width": 370,
            },
            fill_width=False,
            style_cell_conditional=[  # align text columns to left. By default they are aligned to right
                {"if": {"column_id": c}, "textAlign": "center"} for c in Rates.columns
            ],
            style_data_conditional=[  # 125, 181, 178
                {"if": {"column_editable": False}, "backgroundColor": "rgb(125, 180, 200)", "color": "white"}
            ],
            style_data={
                "whiteSpace": "normal",
                "height": "auto",
                "border": "none",
                "border-bottom": "1px solid #ccc",
            },  # overflow cells' content into multiple lines
            style_header={"backgroundColor": "rgb(30, 30, 30)", "color": "white"},
        ),
],

I tried to put the DataTable in a html.Tbody and used dir='rtl' but it messed up every thing.

Selection_001
Selection_0011852×392 36.9 KB

6

A simple solution would be to set ‘float’ : ‘right’

Like this:

html.Div([
  dash_table.DataTable()
], style={'float':'right'})
7

Also I would suggest you to use the dbc.Row and dbc.Col components from the dash-bootstrap-components library in your app layout.

This offers much more flexibility in the alignment of components like data table or graphs on your webpage.

Check out this tutorial video by @adamschroeder on styling and layout of your app using Dash Bootstrap.

8

Thank you @atharvakatre. It probably take me for a while to digest it.

1 Like