Text wrapping on words not characters in Dash AG Grid

Dash Python
1

If you’re looking to go from this :face_vomiting:
wordbreak_bad

to this :star_struck:
wordbreak2

You can have your text wrapping break on words in AG Grid by adding a few properties to column definitions.

In the example below, the wrapping is in defaultColDef={} and is applied to all three columns. However, you can also have the properties in columnDefs=[] and choose which columns have the property.

Here is the code for the example above:

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {"field": "athlete"},
    {"field": "sport"},
    {"field": "country"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="wrap text",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef={
                "resizable": True,
                "cellStyle": {"wordBreak": "normal"},
                "wrapText": True,
                "autoHeight": True,
            },
        ),
    ],
)

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

The properties you need are the following:

            "resizable": True,
            "cellStyle": {"wordBreak": "normal"},
            "wrapText": True,
            "autoHeight": True,

Happy plotting!

7 Likes
2

Thanks @eliza,

Another thing of note, especially when wrapping text. You should adjust the line height to be something easier to digest the info. :slight_smile:

1 Like
3

To adjust the line height, you can add it to the cellStyle prop. This example removes the added spacing in the default grid theme:

"cellStyle": {"wordBreak": "normal", "lineHeight": "unset"},
3 Likes