Sidebar

Sidebar is an AG Grid Enterprise feature, so you’ll need a license key to use it. See Using AG Grid Enterprise for an example of how to use your license key with Dash AG Grid components.

Set sideBar to True to display a sidebar with a default configuration: with panels for columns and filters. You can also set sideBar to columns or filters to display just one of these.

"""
How to enable ag grid sidebar feature.
"""

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

import os

app = Dash(__name__)


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

columnDefs = [
    {
        "headerName": "Athlete",
        "children": [
            {
                "field": "athlete",
                "sortable": True,
                "filter": True,
                "enableRowGroup": True,
                "enableValue": True,
                "enablePivot": True,
            },
            {
                "field": "age",
                "sortable": True,
                "filter": True,
                "enableRowGroup": True,
                "enableValue": True,
                "enablePivot": True,
            },
            {
                "field": "country",
                "sortable": True,
                "filter": True,
                "enableRowGroup": True,
                "enableValue": True,
                "enablePivot": True,
            },
        ],
    },
    {
        "headerName": "Competition",
        "children": [
            {
                "field": "year",
                "sortable": True,
                "filter": True,
                "enableRowGroup": True,
                "enableValue": True,
                "enablePivot": True,
            },
            {
                "field": "date",
                "sortable": True,
                "filter": True,
                "enableRowGroup": True,
                "enableValue": True,
                "enablePivot": True,
            },
        ],
    },
    {"field": "sport"},
    {
        "headerName": "Medals",
        "children": [
            {
                "field": "gold",
                "sortable": True,
                "filter": True,
                "enableRowGroup": True,
                "enableValue": True,
                "enablePivot": True,
            },
            {
                "field": "silver",
                "sortable": True,
                "filter": True,
                "enableRowGroup": True,
                "enableValue": True,
                "enablePivot": True,
            },
            {
                "field": "bronze",
                "sortable": True,
                "filter": True,
                "enableRowGroup": True,
                "enableValue": True,
                "enablePivot": True,
            },
            {
                "field": "total",
                "sortable": True,
                "filter": True,
                "enableRowGroup": True,
                "enableValue": True,
                "enablePivot": True,
            },
        ],
    },
]

sideBar={
    "toolPanels": [
        {
            "id": "columns",
            "labelDefault": "Columns",
            "labelKey": "columns",
            "iconKey": "columns",
            "toolPanel": "agColumnsToolPanel",
        },
        {
            "id": "filters",
            "labelDefault": "Filters",
            "labelKey": "filters",
            "iconKey": "filter",
            "toolPanel": "agFiltersToolPanel",
        },
        {
            "id": "filters 2",
            "labelKey": "filters",
            "labelDefault": "More Filters",
            "iconKey": "menu",
            "toolPanel": "agFiltersToolPanel",
        },
    ],
    "position": "left",
    "defaultToolPanel": "filters",
}

app.layout = html.Div(
    [
        dcc.Markdown(
            "Demonstration of how to enable sidebar feature in a Dash AG Grid."
        ),
        dcc.Markdown(
            """
        If the user sets `sideBar=True`, then the side bar is displayed with default configuration.
        The user can also set `sideBar` to `columns` or `filters` to display side bar with just one of Columns or Filters tool panels.
        """
        ),
        dag.AgGrid(
            id="sidebar-basic",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={"rowSelection": "multiple", "sideBar": True},
            defaultColDef=dict(
                resizable=True,
            ),
            # Sidebar is an ag-grid Enterprise feature.
            # A license key should be provided if it is used.
            # License keys can be passed to the `licenseKey` argument of dag.AgGrid
            enableEnterpriseModules=True,
            licenseKey=os.environ['AGGRID_ENTERPRISE'],
        ),
        dcc.Markdown(
            """
            A dictionary can be passed to allow detailed configuration of the side bar. Use this to configure the provided tool panels (e.g. pass parameters to the columns or filters panel) or to include custom tool panels.
            """
        ),
        dcc.Markdown(
            """
            See the complete AG Grid documentation of Side Bar [here](https://www.ag-grid.com/archive/{{ag-grid-version}}/react-data-grid/side-bar/).
            """
        ),
        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={"rowSelection": "multiple", "sideBar": sideBar},
            defaultColDef=dict(
                resizable=True,
            ),
            # Sidebar is an ag-grid Enterprise feature.
            # A license key should be provided if it is used.
            # License keys can be passed to the `licenseKey` argument of dag.AgGrid
            enableEnterpriseModules=True,
            licenseKey=os.environ['AGGRID_ENTERPRISE'],
        ),
    ]
)


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

Demonstration of how to enable sidebar feature in a Dash AG Grid.

If the user sets sideBar=True, then the side bar is displayed with default configuration.
The user can also set sideBar to columns or filters to display side bar with just one of Columns or Filters tool panels.

A dictionary can be passed to allow detailed configuration of the side bar. Use this to configure the provided tool panels (e.g. pass parameters to the columns or filters panel) or to include custom tool panels.

See the complete AG Grid documentation of Side Bar here.