Aligned Grids

Aligning two or more grids means columns will be kept aligned in all grids. This means column changes in one grid (for example, changes to column width, column order, and column visibility) are reflected in the other grid. This is useful if you have two grids, one above the other and you want to keep the columns aligned.

Configuration

To have one (the first) grid react to column changes in another grid (the second), provide the second grid with a reference to the first grid.

grid_two = dag.AgGrid(
    id="grid-two",
    # other props
)

grid_one = dag.AgGrid(
    id="grid-one",
    dashGridOptions={'alignedGrids': ['grid-2'],
    # other props
)

Aligned Grids Basic Example

Below shows two grids, both aligned with the other (so any column change to one will be reflected in the other). The following should be noted:

# Aligned grids - simple example

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


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

app = Dash(__name__)

defaultColDef = {
    "editable": True,
    "sortable": True,
    "resizable": True,
    "filter": True,
    "flex": 1,
    "minWidth": 100,
}

columnDefs = [
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
    {
        "headerName": "Medals",
        "children": [
            {
                "columnGroupShow": "closed",
                "field": "total",
                "valueGetter": "data.gold + data.silver + data.bronze",
                "width": 200,
            },
            {"columnGroupShow": "open", "field": "gold", "width": 100},
            {"columnGroupShow": "open", "field": "silver", "width": 100},
            {"columnGroupShow": "open", "field": "bronze", "width": 100},
        ],
    },
]


top_grid = dag.AgGrid(
    id="top-grid",
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),
    defaultColDef=defaultColDef,
    columnSize="responsiveSizeToFit",
    dashGridOptions={"alignedGrids": ["bottom-grid"]},
    suppressDragLeaveHidesColumns=False,
)
bottom_grid = dag.AgGrid(
    id="bottom-grid",
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),
    defaultColDef=defaultColDef,
    columnSize="responsiveSizeToFit",
    suppressDragLeaveHidesColumns=False,
)

app.layout = html.Div(
    [
        dcc.Markdown(
            "Simple Example of aligned grids.  To hide a column, drag it off the grid"
        ),
        top_grid,
        bottom_grid,
    ],
    style={"margin": 20},
)


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

Simple Example of aligned grids. To hide a column, drag it off the grid

Events

The events which are fired as part of the grid alignment relationship are as follows:

Pivots

The pivot functionality does not work with aligned grids. This is because pivoting data changes the columns, which would make the aligned grids incompatible, as they are no longer sharing the same set of columns.

So why would you want to align grids like this? It’s great for aligning grids that have different data but similar columns. Maybe you want to include a footer grid with ‘summary’ data. Maybe you have two sets of data, but one is aggregated differently to the other.

This example is a bit more useful. In the bottom grid, we show a summary row. Also note the following:

# Aligned grids - grid as a footer

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


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

app = Dash(__name__)

defaultColDef = {
    "editable": True,
    "sortable": True,
    "resizable": True,
    "filter": True,
    "flex": 1,
    "minWidth": 100,
}
columnDefs = [
    {"field": "athlete", "width": 200},
    {"field": "age", "width": 150},
    {"field": "country", "width": 150},
    {"field": "year", "width": 120},
    {"field": "date", "width": 150},
    {"field": "sport", "width": 150},
    # in the total col, we have a value getter, which usually means we don't need to provide a field
    # however the master/slave depends on the column id (which is derived from the field if provided) in
    #  order ot match up the columns
    {
        "headerName": "Total",
        "field": "total",
        "valueGetter": {
            "function": "params.data.gold + params.data.silver + params.data.bronze"
        },
        "width": 200,
    },
    {"field": "gold", "width": 100},
    {"field": "silver", "width": 100},
    {"field": "bronze", "width": 100},
]

bottomData = [
    {
        "athlete": "Total",
        "age": "15 - 61",
        "country": "Ireland",
        "year": "2020",
        "date": "26/11/1970",
        "sport": "Synchronised Riding",
        "gold": 55,
        "silver": 65,
        "bronze": 12,
    },
]


top_grid = dag.AgGrid(
    id="top-grid-footer",
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),
    defaultColDef=defaultColDef,
    dashGridOptions={
        "alignedGrids": ["bottom-grid-footer"],
        "suppressHorizontalScroll": True,
    },
    suppressDragLeaveHidesColumns=False,
)
bottom_grid = dag.AgGrid(
    id="bottom-grid-footer",
    columnDefs=columnDefs,
    rowData=bottomData,
    defaultColDef=defaultColDef,
    suppressDragLeaveHidesColumns=False,
    dashGridOptions={"headerHeight": 0, "rowStyle": {"fontWeight": "bold"}},
    style={"height": 50},
)

app.layout = html.Div(
    [
        dcc.Markdown(
            "Example of an aligned grid as a footer.  To hide a column, drag it off the grid"
        ),
        top_grid,
        bottom_grid,
    ],
    style={"margin": 20},
)


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

#

Example of an aligned grid as a footer. To hide a column, drag it off the grid