Compactness & Row Height

Add more white space or pack more data into the UI.

The spacing parameter controls how tightly data and UI elements are packed together. All padding in the grid is defined as a multiple of this value, so increasing it will make most components larger by increasing their internal white space while leaving the size of text and icons unchanged.

The following example demonstrates different spacing values:

```python
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, callback
import pandas as pd

app = Dash()

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

columnDefs = [{"field": i} for i in ["athlete", "age", "country", "year", "sport", "total"]]

app.layout = html.Div([
    html.Div([
        html.Label("Spacing: ", style={"fontWeight": "bold", "marginRight": "10px"}),
        dcc.Dropdown(
            id="spacing-dropdown",
            options=[
                {"label": "2px", "value": 2},
                {"label": "4px", "value": 4},
                {"label": "8px", "value": 8},
                {"label": "12px", "value": 12},
            ],
            value=4,
            clearable=False,
            style={"width": "100px"},
        ),
    ], style={"display": "flex", "alignItems": "center", "marginBottom": "10px"}),
    html.Div([
        html.Div([
            html.Label("Code:", style={"fontWeight": "bold"}),
            dcc.Clipboard(id="copy-code", target_id="code-text", style={"cursor": "pointer"}),
        ], style={"display": "flex", "justifyContent": "space-between", "alignItems": "center", "marginBottom": "5px"}),
        html.Div(
            id="code-text",
            children='''dashGridOptions={
    "theme": {
        "function": "themeQuartz.withParams({ spacing: 4 })"
    }
}''',
            style={"backgroundColor": "#f5f5f5", "padding": "10px", "borderRadius": "5px", "fontFamily": "monospace", "whiteSpace": "pre"}
        ),
    ], style={"marginBottom": "10px"}),
    dag.AgGrid(
        id="compactness-grid",
        rowData=df.to_dict("records"),
        columnDefs=columnDefs,
        defaultColDef={"sortable": True, "filter": True},
        columnSize="sizeToFit",
        dashGridOptions={
            "theme": {
                "function": "themeQuartz.withParams({ spacing: 4 })"
            }
        },
    ),
])


@callback(
    Output("compactness-grid", "dashGridOptions"),
    Output("code-text", "children"),
    Input("spacing-dropdown", "value"),
    State("compactness-grid", "dashGridOptions"),
)
def update_spacing(spacing, dash_grid_options):
    dash_grid_options["theme"] = {
        "function": f"themeQuartz.withParams({{ spacing: {spacing} }})"
    }
    code = f'''dashGridOptions={{
    "theme": {{
        "function": "themeQuartz.withParams({{ spacing: {spacing} }})"
    }}
}}'''
    return dash_grid_options, code


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

Row and Header Height

Use rowVerticalPaddingScale and headerVerticalPaddingScale to adjust padding proportionally. These take a number that multiplies the default padding:

dashGridOptions={
    "theme": {
        "function": "themeQuartz.withParams({ rowVerticalPaddingScale: 0.75, headerVerticalPaddingScale: 0.75 })"
    }
}

Alternatively, use rowHeight and headerHeight to set fixed heights:

dashGridOptions={
    "theme": {
        "function": "themeQuartz.withParams({ rowHeight: 30, headerHeight: 40 })"
    }
}

Use listItemHeight to control the height of items in dropdowns and set filters:

dashGridOptions={
    "theme": {
        "function": "themeQuartz.withParams({ listItemHeight: 40 })"
    }
}

For more compactness parameters, see Theming Compactness in the AG Grid docs or explore the AG Grid Theme Builder.

Using Legacy Theming

When using legacy theming, use --ag-row-height, --ag-header-height, and --ag-grid-size CSS variables. See Customising Compactness in the AG Grid docs for additional details.