Dash table in right-to-left html page not working properly

Dash Python
1

Hello, i use dash table in ltr page direction without problem but when I set direction to rtl, table is not working properly (headers not showing, scrolling too laggy, column width too wide).

table in ltr:
image

table in rtl:
image

here is my sample code:

from dash import Dash, dash_table, html
from plotly.express import data

df = data.stocks()
table_default_params = {
“row_selectable”: “single”,
“page_size”: 50,
“style_table”: {
“maxHeight”: “313px”,
“zIndex”: 0,
“maxWidth”: “500px”,
},
“fixed_rows”: {“headers”: True},
“style_cell”: {
“minWidth”: “120px”,
“width”: “120px”,
“maxWidth”: “120px”,
“overflow”: “hidden”,
“textOverflow”: “ellipsis”,
“whiteSpase”: “nowrap”,
},
“tooltip_duration”: None,
}
app = Dash(name)

app.layout = html.Div(
id=“table-container”,
children=dash_table.DataTable(
data=df.to_dict(‘records’),
columns=[{‘id’: c, ‘name’: c} for c in df.columns],
**table_default_params,
),
style={“direction”: “rtl”},
)

if name == ‘main’:
app.run(debug=True

2

Hi @AmirK75

the DataTable doesn’t support RTL, but you could try dash-ag-grid:

image
image2768×900 234 KB


from dash import Dash, html
import dash_ag_grid as dag
from plotly.express import data

app = Dash()


df = data.stocks()

app.layout = html.Div([

    dag.AgGrid(
        rowData = df.to_dict("records"),
        columnDefs = [{"field": "date", "checkboxSelection": True}] +
            [{"field": i} for i in df.columns if i != "date"],
        defaultColDef={"filter":True},
        dashGridOptions={"enableRtl": True, "rowSelection": "multiple", "suppressRowClickSelection": True, "animateRows": False},
    )
])

if __name__== "__main__":
    app.run(debug=True)
3

thanks for the quick response, that will be hard for me because I need to rewrite my apps based on AG-Grid but I will look into dash AG-Grid.