Row Height

By default, the grid will display rows with a height of 25px.

You can change the row height by using:

```

```

You cannot use variable row height when using either the Viewport Row Model
or Infinite Row Model. This is because
this row model needs to work out the position of rows that are not loaded and hence needs to assume the row height is
fixed.

rowHeight Property

To change the row height for the whole grid, set the property rowHeight to a positive number. For example, to set the
height to 50px, do the following:

dashGridOptions = {"rowHeight": 50}

Changing the property will set a new row height for all rows, including pinned rows top and bottom.

getRowHeight Function

getRowHeight (function) Function version of property rowHeight to set height for each row individually. Function
should return a positive number of pixels, or return null/undefined to use the default row height.

To change the row height so that each row can have a different height, implement the getRowHeight(params) function.
For example, to set the height to 50px for all group rows and 25px for all other rows, do the following:

dashGridOptions = {"getRowHeight": {"function": "params.node.group ? 50 : 20"}}

The example below shows dynamic row height, specifying a different row height for each row. It uses the
getRowHeight(params) function to achieve this.

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

app = Dash(__name__)

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

df['rowHeight'] = pd.Series([40, 80, 120, 200] * (len(df) // 4 + 1))

columnDefs = [
    {'field': 'rowHeight'},
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
    {"field": "year"},
    {"field": "sport"},
    {"field": "total"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-height-get-row-height",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={'filter': True},
            columnSize="sizeToFit",
            dashGridOptions={"getRowHeight": {"function": "params.data.rowHeight"}, "animateRows": False}
        ),
    ],
)

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

Text Wrapping

If you want text to wrap inside cells rather than truncating, add wrapText=True to the Column Definition.

The example below has wrapText=True set on the Latin Text column. Behind the scenes, this results in the CSS
property white-space: normal being applied to the cell, which causes the text to wrap.
It also sets the row to a fixed height using rowHeight=120 on the grid level.

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {"field": "latin_text", "headerName": "Latin Text", "width": 350, "wrapText": True},
    {"field": "make"},
    {"field": "model"},
    {"field": "price"},
]

latinText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'

data = [
    {"latin_text": latinText, "make": "Toyota", "model": "Celica", "price": 35000},
    {"latin_text": latinText, "make": "Ford", "model": "Mondeo", "price": 32000},
    {"latin_text": latinText, "make": "Porsche", "model": "Boxster", "price": 72000},
    {"latin_text": latinText, "make": "BMW", "model": "M50", "price": 60000},
    {"latin_text": latinText, "make": "Aston Martin", "model": "DBX", "price": 190000},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-height-wrapping",
            rowData=data,
            columnDefs=columnDefs,
            defaultColDef={"filter": True},
            columnSize="sizeToFit",
            dashGridOptions={"rowHeight": 120, "animateRows": False},
        ),
    ],
)

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

Text Wrapping with Word Breaks

When setting wrapText=True, the text will break at the exact point where the text would overflow the container. This
example shows how to style the text wrapping to add word breaks and remove the extra space around the lines.

Try changing the width of the columns in the example below. You will see that the first column adds line breaks at a space or a hyphen.
The second column will break between letters.

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {
        "field": "latin_text",
        "headerName": "Latin Text With Word Breaks",
        "width": 200,
        "wrapText": True,
        "cellStyle": {"wordBreak": "normal", "lineHeight": "unset"},
        "wrapHeaderText": True,
        "autoHeaderHeight": True,
    },
    {
        "field": "latin_text",
        "headerName": "Latin Text Without Word Breaks",
        "width": 200,
        "wrapText": True,
        "cellStyle": {"lineHeight": "unset"},
    },
]

latinText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'

data = [{"latin_text": latinText} for i in range(5)]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-height-wrapping-wordbreak",
            rowData=data,
            columnDefs=columnDefs,
            defaultColDef={"filter": True},
            dashGridOptions={"rowHeight": 120, "animateRows": False},
        ),
    ],
)

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

If you are providing a
custom Cell Renderer Component, you can implement
text wrapping in the custom component in your own way. The property wrapText is intended to be used when you are not
using a custom Cell Renderer.

Auto Row Height

It is possible to set the row height based on the contents of the cells. To do this, set autoHeight=True on each
column where height should be calculated from. For example, if one column is showing description text over multiple
lines, then you may choose to select only that column to determine the line height.

autoHeight is typically used with wrapText. If wrapText is not set, and no
custom Cell Renderer Component is used,
then the cell will display all it’s contents on one line. This is probably not the intention if using Auto Row Height.

If multiple columns are marked with autoHeight=True then the height of the largest column is used.

The example below shows auto height. The column with the latin text has variable length sentences. It has Auto Height
enabled by setting both wrapText=True and autoHeight=True.

import dash_ag_grid as dag
from dash import Dash, html
from random import randint

app = Dash(__name__)

columnDefs = [
    {"field": "latin_text", "width": 350, "wrapText": True, "autoHeight": True},
    {"field": "make"},
    {"field": "model"},
    {"field": "price"},
]

latinText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
words = latinText.split()


def random_sentence():
    length = randint(1, len(words))
    return " ".join([words[i] for i in range(length)])


data = [
    {"latin_text": random_sentence(), "make": "Toyota", "model": "Celica", "price": 35000},
    {"latin_text": random_sentence(), "make": "Ford", "model": "Mondeo", "price": 32000},
    {"latin_text": random_sentence(), "make": "Porsche", "model": "Boxster", "price": 72000},
    {"latin_text": random_sentence(), "make": "BMW", "model": "M50", "price": 60000},
    {"latin_text": random_sentence(), "make": "Aston Martin", "model": "DBX", "price": 190000},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-height-auto-height",
            rowData=data,
            columnDefs=columnDefs,
            columnSize="sizeToFit",
            defaultColDef={"filter": True},
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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

Lazy Height Calculation

Auto height works by the grid listening for height changes for all Cells configured for Auto Height. As such it is only
looking at rows that are currently rendered into the DOM. As the grid scrolls vertically and more rows are displayed,
the height of those rows will be calculated on the fly.

This means the row heights and row positions are changing as the grid is scrolling vertically. This leads to the
following behaviors:

The above are results of Lazy Height Calculation. It is not possible to avoid these effects.

Auto Height and Column Virtualisation

Columns with Auto Height will always be rendered. The grid needs to have all Auto Height Columns rendered in order to
correctly set the height of the row.

Auto Height Performance Consideration

Because auto-height adds size listeners to cells and stops Column Virtualisation, consideration should be given for when
and how to use it. Only apply auto-height to columns where it makes sense. For example, if you have many columns that do
not require a variable height, then do not set them to auto-height.

Height for Pinned Rows

Row height for pinned rows works exactly as for normal rows with one difference: it is not possible to dynamically
change the height once set. However, this is easily solved by just setting the pinned row data again which resets the
row
heights. Setting the data again is not a problem for pinned rows as it doesn’t impact scroll position, filtering,
sorting or group open / closed positions as it would with normal rows if the data was reset.