### Pagination

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

Example of how to enable pagination in the grid by setting `pagination` to `True` in `dashGridOptions`.

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

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv")

app = Dash()

columnDefs = [
    { 'field': 'country' },
    { 'field': 'pop', 'headerName': 'Population'},
    { 'field': 'lifeExp', 'headerName': 'Life Expectancy'},
]

grid = dag.AgGrid(
    id="getting-started-pagination",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
    dashGridOptions={'pagination':True},
)

app.layout = html.Div([grid])

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

```

--------------------------------

### Migrating from 31.3.0 to 32.3.0 - Grid API Example

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example demonstrating the change from using the deprecated Column API to the Grid API for getting all displayed columns.

```javascript
dagfuncs.isFirstColumn = function(params) {
var displayedColumns = params.columnApi.getAllDisplayedColumns();
var thisIsFirstColumn = displayedColumns[0] === params.column;
return thisIsFirstColumn;
}
```

```javascript
dagfuncs.isFirstColumn = function(params) {
    var displayedColumns = params.api.getAllDisplayedColumns();
    var thisIsFirstColumn = displayedColumns[0] === params.column;
    return thisIsFirstColumn;
}
```

--------------------------------

### 1.x cellStyle example

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of cellStyle in version 1.x.

```python
"cellStyle": {
    "styleConditions": [
        {
            "condition": "colDef.headerName == 'State'",
            "style": {"backgroundColor": "LightPink", "color": "DarkBlue"}
        },
    ]
},
```

--------------------------------

### Themes

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

Example of how to apply a theme to the grid by setting the `theme` property in `dashGridOptions`. This example uses the `themeMaterial`.

```python
from dash import Dash, html
import dash_ag_grid as dag
import plotly.express as px

app = Dash()

df = px.data.gapminder()
df = df[['country', 'continent', 'year', 'pop']]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="getting-started-themes-example",
            columnDefs=[{"field": x} for x in df.columns],
            rowData=df.to_dict('records'),
            dashGridOptions={"theme": "themeMaterial"},
            columnSize="sizeToFit",
        ),
    ]
)

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

```

--------------------------------

### AG Grid Enterprise Integration

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

Example of how to integrate an AG Grid Enterprise license key and enable enterprise modules in Dash AG Grid.

```python
dag.AgGrid(
    enableEnterpriseModules=True,
    licenseKey='< your_license_key >',
    columnDefs=ColumnDefs,
    rowData=rowData
)

```

--------------------------------

### 1.x clickData callback example

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Callback example using 'clickData' in version 1.x.

```python
@callback(
Output(“span-click-data”, “children”),
Input(“ag-grid-menu”, “clickData”),
)
def show_click_data(clickData):
    if clickData:
        return “You selected option {} from the row with make {}, model {}, and price {}.”.format(
            clickData[“value”],
            clickData[“data”][“make”],
            clickData[“data”][“model”],
            clickData[“data”][“price”],
        )
    return “No menu item selected.”
```

--------------------------------

### 2.0 cellStyle example

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of cellStyle in version 2.0, with 'params.' prefix.

```python
"cellStyle": {
    "styleConditions": [
        {
            "condition": "params.colDef.headerName == 'State'",
            "style": {"backgroundColor": "LightPink", "color": "DarkBlue"}
        },
    ]
},
```

--------------------------------

### With Callbacks

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

Example demonstrating how to use callbacks to update the grid's `columnDefs` based on user input. This example toggles between two sets of columns when a button is clicked.

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

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv")

app = Dash()

all_columns = [
    { 'field': 'country' },
    { 'field': 'pop'},
    { 'field': 'continent' },
    { 'field': 'lifeExp'},
    { 'field': 'gdpPercap'},
]

two_columns = [
    { 'field': 'country' },
    { 'field': 'pop'},
]

grid = dag.AgGrid(
    id="grid-callback-example",
    rowData=df.to_dict("records"),
)

app.layout = html.Div(
    [
        html.Button(id='update-columns', children='Update columns'),
        grid,
    ]
)

@callback(
    Output("grid-callback-example", "columnDefs"),
    Input("update-columns", "n_clicks")
)
def update_columns(n_clicks):
    if n_clicks and n_clicks % 2 != 0:
        return two_columns
    return all_columns

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

```

--------------------------------

### 1.x headerHeight example

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of setting headerHeight directly on AgGrid component in version 1.x.

```python
dag.AgGrid(
    columnSize="sizeToFit",
    columnDefs=columnDefs,
    rowData=rowData,
    defaultColDef=dict(resizable=True),
    headerHeight=70
),
```

--------------------------------

### 2.0 cellRendererData callback example

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Callback example using 'cellRendererData' and 'rowData' state in version 2.0.

```python
@callback(
Output(“span-click-data”, “children”),
Input(“ag-grid-menu”, “cellRendererData”),
State(“ag-grid-menu”, “rowData”),
)
def show_click_data(cellRendererData, rowData):
    if cellRendererData:
        row_index = cellRendererData[‘rowIndex’]
        rowData = rowData[row_index]
        return “You selected option {} from the row with make {}, model {}, and price {}.”.format(
            cellRendererData[‘value’],
            rowData[“make”],
            rowData[“model”],
            rowData[“price”],
        )
    return “No menu item selected.”
```

--------------------------------

### Customizing Theme with `withParams` (Alpine Example)

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Configuring the `accentColor` on the Alpine theme using `withParams`.

```python
dashGridOptions={
    "theme": {"function": "themeAlpine.withParams({ accentColor: 'red' })"}
}
```

--------------------------------

### Customizing Theme with `withParams`

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of customizing a theme using `withParams()` on a built-in theme.

```python
dashGridOptions={
    "theme": {"function": "themeBalham.withParams({ accentColor: 'red' })"}
}
```

--------------------------------

### AgGrid v1.x theme property

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of setting the theme using the `theme` property in v1.x.

```python
dag.AgGrid(
columnDefs=[
{
"headerName": x,
"field": x,
}
for x in df.columns
],
rowData=df.to_dict("records"),
theme ="balham",
columnSize="sizeToFit",
style={"height": "250px"},
),

```

--------------------------------

### Example Size to Fit Using Options

Source: https://dash.plotly.com/dash-ag-grid/column-sizing.md

Demonstrates setting column sizing to 'sizeToFit' with specific options for individual columns, including suppressSizeToFit, maxWidth, and columnLimits.

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

app = Dash()

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

columnDefs = [
    {'field': 'athlete', 'width': 150, 'suppressSizeToFit': True},
    {'field': 'age', 'width': 50, 'maxWidth': 50},
    {'colId': 'country', 'field': 'country', 'maxWidth': 300},
    {'field': 'year', 'width': 90},
    {'field': 'date', 'width': 110},
    {'field': 'sport', 'width': 110},
    {'field': 'gold', 'width': 100},
    {'field': 'silver', 'width': 100},
    {'field': 'bronze', 'width': 100},
    {'field': 'total', 'width': 100},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="column-sizing-size-to-fit",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"filter": True},
            columnSize="sizeToFit",
            columnSizeOptions={
                'defaultMinWidth': 100,
                'columnLimits': [{'key': 'country', 'minWidth': 900}],
            },
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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

```

--------------------------------

### Full Example with Custom Theme Parameters

Source: https://dash.plotly.com/dash-ag-grid/styling-color-font.md

A complete Dash application demonstrating customization of the Quartz theme with various color and font parameters.

```python
import dash_ag_grid as dag
from dash import Dash, html

app = Dash()

columnDefs = [{"field": "make"}, {"field": "model"}, {"field": "price"}]

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

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-fonts-colors",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            dashGridOptions={
                "theme": {
                    "function": """themeQuartz.withParams({
                        foregroundColor: 'rgb(126, 46, 132)',
                        backgroundColor: 'rgb(249, 245, 227)',
                        headerTextColor: 'rgb(204, 245, 172)',
                        headerBackgroundColor: 'rgb(209, 64, 129)',
                        oddRowBackgroundColor: 'rgba(0, 0, 0, 0.03)',
                        headerColumnResizeHandleColor: 'rgb(126, 46, 132)',
                        fontSize: 17,
                        fontFamily: 'monospace'
                    })"""
                }
            },
        ),
    ],
)

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

```

--------------------------------

### Example Size to Fit Triggered by Callback

Source: https://dash.plotly.com/dash-ag-grid/column-sizing.md

Shows how to trigger column resizing to fit the available space using a button and a Dash callback.

```python
import dash_ag_grid as dag
from dash import Dash, html, Input, Output, callback

app = Dash()

rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
]

columnDefs = [
    {"headerName": "Make of the Car", "field": "make"},
    {"headerName": "Model", "field": "model"},
    {"headerName": "Price", "field": "price"},
]

app.layout = html.Div(
    [
        html.Button("resize", id="button-size-to-fit-callback"),
        dag.AgGrid(
            id="column-sizing-size-to-fit-callback",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            defaultColDef={"filter": True},
            dashGridOptions={"animateRows": False}
        ),
    ],
)


@callback(
    Output("column-sizing-size-to-fit-callback", "columnSize"),
    Input("button-size-to-fit-callback", "n_clicks"),
)
def update_column_size_callback(_):
    return "sizeToFit"


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

```

--------------------------------

### Disable Animation

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

Example of how to disable row animation after sorting or filtering by setting `animateRows=False` in `dashGridOptions`.

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

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv")

app = Dash()

columnDefs = [
    {'field': 'country'},
    {'field': 'pop', 'headerName': 'Population'},
    {'field': 'lifeExp', 'headerName': 'Life Expectancy'},
]

grid = dag.AgGrid(
    id="getting-started-sort-disable-animation",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
    defaultColDef={"filter": True},
    dashGridOptions={"animateRows": False}
)

app.layout = html.Div([grid])

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

```

--------------------------------

### Column Flex Example 2

Source: https://dash.plotly.com/dash-ag-grid/column-sizing.md

This example shows all columns using the flex parameter. Resizing the browser window will demonstrate how the column proportions are maintained.

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

app = Dash()

flex_widths = {"a": 750, "b": 750, "c": 750, "d": 750, "e": 1000, "f": 1000, "g": 1000, "h": 750, "i": 2500, "j": 1000,
               "k": 750, "l": 750, }

df = pd.DataFrame({i: list(range(12)) for i in flex_widths})

app.layout = html.Div(
    [
        dag.AgGrid(
            id="column-sizing-flex2",
            rowData=df.to_dict("records"),
            columnDefs=[{"headerName": i, "field": i, "flex": flex_widths[i]} for i in df.columns],
            dashGridOptions={"animateRows": False}
        )
    ],
)

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

```

--------------------------------

### AG Grid with Column Definitions Inferred from DataFrame

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

This example shows how to create an AG Grid where the column definitions are automatically generated from the DataFrame's column names.

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

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/wind_dataset.csv")

app = Dash()

grid = dag.AgGrid(
    id="get-started-example-basic-df",
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in df.columns],
)

app.layout = html.Div([grid])

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


```

--------------------------------

### Basic AG Grid with Explicit Column Definitions

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

This example demonstrates creating a basic AG Grid component by explicitly defining the column definitions (`columnDefs`) and providing the row data (`rowData`).

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

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/wind_dataset.csv")

app = Dash()

columnDefs = [
    { 'field': 'direction' },
    { 'field': 'strength' },
    { 'field': 'frequency'},
]

grid = dag.AgGrid(
    id="get-started-example-basic",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
)

app.layout = html.Div([grid])

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


```

--------------------------------

### AG Grid with Row Sorting Disabled on a Column

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

This example demonstrates how to disable row sorting for a specific column by setting `sortable=False` in its column definition. This prevents users from sorting the grid based on that column.

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

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv")

app = Dash()

columnDefs = [
    { 'field': 'country', 'sortable': False },
    { 'field': 'pop', 'headerName': 'Population'},
    { 'field': 'lifeExp', 'headerName': 'Life Expectancy'},
]

grid = dag.AgGrid(
    id="getting-started-sort",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
)

app.layout = html.Div([grid])

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


```

--------------------------------

### AG Grid with Custom Header Names

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

This example demonstrates how to specify custom header names for columns using the `headerName` property in the column definitions, overriding the default behavior of using field names.

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

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv")

app = Dash()

columnDefs = [
    { 'field': 'country' },
    { 'field': 'pop', 'headerName': 'Population'},
    { 'field': 'lifeExp', 'headerName': 'Life Expectancy'},
]

grid = dag.AgGrid(
    id="getting-started-headers",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
)

app.layout = html.Div([grid])

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


```

--------------------------------

### Using Legacy Theming

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of how to configure Dash AG Grid to use legacy theming by adding base and theme stylesheets and setting grid options.

```python
import dash_ag_grid as dag

app = Dash(external_stylesheets=[dag.themes.BASE, dag.themes.ALPINE])
```

```python
dag.AgGrid(

columnDefs=[

{

"field": x,

}

for x in df.columns

],

rowData=df.to_dict("records"),

# Sets theme to use legacy themes

dashGridOptions={"theme": "legacy"},

# Defines the theme to use

className="ag-theme-alpine-dark",

)
```

--------------------------------

### AG Grid with Column Filtering Enabled

Source: https://dash.plotly.com/dash-ag-grid/getting-started.md

This example shows how to enable filtering for specific columns in AG Grid by setting the `filter` property to `True` in the column definitions. Users can then interact with column headers to filter data.

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

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv")

app = Dash()

columnDefs = [
    { 'field': 'country', 'filter': True },
    { 'field': 'pop', 'headerName': 'Population'},
    { 'field': 'lifeExp', 'headerName': 'Life Expectancy', 'filter': True },
]

grid = dag.AgGrid(
    id="getting-started-filter",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
)

app.layout = html.Div([grid])

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


```

--------------------------------

### Enable Pagination

Source: https://dash.plotly.com/dash-ag-grid/pagination.md

This example demonstrates how to enable basic pagination by setting the `pagination` property to `True` in `dashGridOptions`. It also includes an example of auto page size.

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

app = Dash()


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv"
)

columnDefs = [
    {"field": "country"},
    {"field": "pop"},
    {"field": "continent"},
    {"field": "gdpPercap"},
]

app.layout = html.Div(
    [
        dcc.Markdown("To enable pagination set the grid property `pagination=True`"),
        dag.AgGrid(
            id="enable-pagination",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"filter": True},
            dashGridOptions={"pagination": True, "animateRows": False},
        ),
        dcc.Markdown(
            "Auto Page Size example.  Enter grid height in px", style={"marginTop": 100}
        ),
        dcc.Input(id="input-height", type="number", min=150, max=1000, value=400),
        dag.AgGrid(
            id="grid-height",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
            dashGridOptions={"pagination": True, "paginationAutoPageSize": True},
        ),
    ],
    style={"margin": 20},
)


@callback(Output("grid-height", "style"), Input("input-height", "value"))
def update_height(h):
    h = "400px" if h is None else h
    return {"height": h, "width": "100%"}


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

```

--------------------------------

### Migrating from `className` to `theme` parameter

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example showing the transition from using `className` for themes to the new `theme` parameter.

```python
dag.AgGrid(
columnDefs=columnDefs,
rowData=rowData,
className="ag-theme-alpine", # Can be removed
dashGridOptions={"theme": "themeAlpine"},
)
```

--------------------------------

### 2.0 dashGridOptions headerHeight example

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of setting headerHeight within dashGridOptions in version 2.0.

```python
dag.AgGrid(
    columnSize="sizeToFit",
    columnDefs=columnDefs,
    rowData=rowData,
    defaultColDef=dict(resizable=True),
    dashGridOptions={
        "headerHeight": 70,
    },
),
```

--------------------------------

### Basic AG Grid Enterprise Setup

Source: https://dash.plotly.com/dash-ag-grid/enterprise-ag-grid.md

This snippet shows the basic configuration to enable AG Grid Enterprise modules and set the license key.

```python
dag.AgGrid(
    enableEnterpriseModules=True,
    licenseKey=<your_license_key>,
    columnDefs=ColumnDefs,
    rowData=rowData
)
```

--------------------------------

### Column Flex Example 1

Source: https://dash.plotly.com/dash-ag-grid/column-sizing.md

This example demonstrates how to use the `flex` parameter with `minWidth` and `maxWidth` to control column sizing. Column A is fixed, Column B has flex with constraints, and Column C has flex relative to Column B.

```python
from dash import Dash, html
import dash_ag_grid as dag

app = Dash()

rowData = [
    {"a": "width 300px", "b": "flex 2 minWidth 200px maxWidth 350px", "c": "flex 1"}
]

columnDefs = [
    {"field": "a", "width": 300},
    {
        "headerName": "Flexed Columns",
        "children": [
            {
                "field": "b",
                "minWidth": 200,
                "maxWidth": 350,
                "flex": 2,
                "wrapText": True,
                "autoHeight": True,
            },
            {"field": "c", "flex": 1},
        ],
    },
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="column-sizing-flex1",
            columnDefs=columnDefs,
            rowData=rowData,
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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

```

--------------------------------

### Migrating from 31.3.0 to 32.3.0 - Cell Renderer Example

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example showing the change in accessing the row index in ICellRendererParams from props.rowIndex to props.node.rowIndex.

```js
dagcomponentfuncs.EditButton = function (props) {
function onButtonClicked() {
props.api.startEditingCell({
rowIndex: props.rowIndex,
colKey: props.column.getId(),
});
}

```

```js
dagcomponentfuncs.EditButton = function (props) {
function onButtonClicked() {
    props.api.startEditingCell({
        rowIndex: props.node.rowIndex,
        colKey: props.column.getId(),
    });
}

```

--------------------------------

### Installation

Source: https://dash.plotly.com/dash-ag-grid.md

Command to install the dash-ag-grid library.

```bash
pip install dash-ag-grid

```

--------------------------------

### Is Row Selectable Update

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example demonstrating the updated syntax for 'isRowSelectable' in 'rowSelection'.

```python
dashGridOptions={
  "rowSelection": {"isRowSelectable": {"function": "params.data.age > 18"}},
}
```

--------------------------------

### Deprecations - ColDef - hideDisabledCheckboxes

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of how to set rowSelection.hideDisabledCheckboxes=True on dashGridOptions to disable checkboxes.

```python
dag.AgGrid(
rowData=df.to_dict("records"),
dashGridOptions={"rowSelection": {"hideDisabledCheckboxes": True}},
)
```

--------------------------------

### Default Browser Tooltips Example

Source: https://dash.plotly.com/dash-ag-grid/tooltips.md

This example shows how to use the browser's default tooltips by setting `enableBrowserTooltips` to `True`.

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

app = Dash()

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

columnDefs = [
    {
        'field': 'athlete',
        'headerTooltip': "The athlete's name",
        'tooltipField': 'athlete',
    },
    {
        'field': 'age',
        'headerTooltip': "The athlete's age",
        'tooltipField': 'age',
    },
    {
        'field': 'country',
        'headerTooltip': "The athlete's country",
        'tooltipField': 'country',
    },
    {
        'field': 'year',
        'headerTooltip': "The year of the competition",
        'tooltipValueGetter': {"function": "params.data.athlete + ' was ' + params.data.age + ' in ' + params.value"},
    },
    {
        'field': 'sport',
        'headerTooltip': "The sport the medal was for",
        'tooltipValueGetter': {"function": "'Sport: ' + params.value"},
    },
]


app.layout = html.Div(
    [
        dag.AgGrid(
            id="tooltips-browser-grid",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"flex": 1},
            dashGridOptions={'enableBrowserTooltips': True}
        ),
    ],
)

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


```

--------------------------------

### Enter Key Navigation Example

Source: https://dash.plotly.com/dash-ag-grid/start-stop-editing.md

Demonstrates how pressing Enter navigates vertically after editing.

```python
import dash_ag_grid as dag
from dash import Dash, html
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 ["country", "year", "athlete", "age", "sport", "total"]]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="editing-start-stop-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
            dashGridOptions={
                "enterNavigatesVertically": True,
                "enterNavigatesVerticallyAfterEdit": True,
                "animateRows": False
            },
        ),
    ]
)

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

```

--------------------------------

### Basic Grid Setup with Grouping

Source: https://dash.plotly.com/dash-ag-grid/enterprise-group-cell-renderer.md

A Python example demonstrating how to set up a Dash AG Grid with row data and column definitions, including a basic group column without a specific renderer.

```python
import dash_ag_grid as dag
from dash import Dash, html
import os

app = Dash()

data = {
    "Ireland": ["Dublin", "Galway", "Cork"],
    "UK": ["London", "Bristol", "Manchester", "Liverpool"],
    "USA": ["New York", "Boston", "L.A.", "San Fransisco", "Detroit"],
    "MiddleEarth": ["The Shire", "Rohan", "Rivendell", "Mordor"],
    "Midkemia": ["Darkmoor", "Crydee", "Elvandar", "LaMut", "Ylith"],
}

rowData = []
for country, cities in data.items():
    for city in cities:
        rowData.append(
            {
                "country": country,
                "type": "Non Fiction"
                if country in ["Ireland", "UK", "USA"]
                else "Fiction",
                "city": city,
            }
        )

columnDefs = [
    # this column shows just the country group values, but has not group renderer, so there is no expand / collapse functionality
    {
        "headerName": "Country Group - No Renderer",
        "showRowGroup": "country",
        "minWidth": 250,
    },
]
```

--------------------------------

### Column Pinning Example

Source: https://dash.plotly.com/dash-ag-grid/column-pinning.md

This example demonstrates how to pin columns using Column Definitions at initialization and how to update the 'pinned' parameter through Column State using callbacks. It also includes options to clear or keep current pinned columns when the state is updated.

```python
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, ctx, callback
from plotly import data

app = Dash()

df = data.election()

columnDefs = [
    {"field": "district"},
    {"field": "Coderre"},
    {"field": "Bergeron"},
    {"field": "Joly"},
    {"field": "total", "pinned": "right"},
    {"field": "winner", "pinned": "left"},
]

app.layout = html.Div(
    [
        "Current Pinned Columns:",
        dcc.RadioItems(
            id='radio-column-pinning-option',
            options=[
                {'label': 'Clear', 'value': True},
                {'label': 'Keep', 'value': False}
            ],
            value=True, inline=True,
        ),
        html.Button("District Left", id="btn-column-pinning-left"),
        html.Button("Winner Left + Total Right", id="btn-column-pinning-left-right"),
        html.Button("Clear All", id="btn-column-pinning-clear"),
        dag.AgGrid(
            id="column-pinning-simple-example",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"filter": True},
            dashGridOptions={"animateRows": False}
        ),
    ],
)


@callback(
    Output("column-pinning-simple-example", "columnState"),
    State("column-pinning-simple-example", "columnState"),
    State("radio-column-pinning-option", "value"),
    Input("btn-column-pinning-left", "n_clicks"),
    Input("btn-column-pinning-left-right", "n_clicks"),
    Input("btn-column-pinning-clear", "n_clicks"),
    prevent_initial_call=True,
)
def update_pinned_state(col_state, clear, *_):
    if ctx.triggered_id == "btn-column-pinning-clear":
        return [{'colId': col['colId'], 'pinned': False} for col in col_state]

    if ctx.triggered_id == "btn-column-pinning-left":
        new_pinned = {'district': 'left'}
    elif ctx.triggered_id == "btn-column-pinning-left-right":
        new_pinned = {'winner': 'left', 'total': 'right'}

    return [
        {
            'colId': col['colId'],
            'pinned': new_pinned.get(
                col['colId'], False if clear else col['pinned']
            ),
        }
        for col in col_state
    ]


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

```

--------------------------------

### AgGrid v2.0 cellStyle in defaultColDef

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of applying `cellStyle` within `defaultColDef` in v2.0.

```python
defaultColDef = {
"cellStyle": {
"styleConditions": [
{
"condition": "params.colDef.headerName == 'State'",

```

--------------------------------

### AgGrid v1.x cell valueFormatter

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of using `valueFormatter` for cell formatting in v1.x.

```python
columnDefs = [
{"headerName": "Make", "field": "make", "sortable": True},
{"headerName": "Model", "field": "model"},
{"headerName": "Price", "field": "price", "valueFormatter": "Number(value).toFixed(2)"},
]

```

--------------------------------

### AG Grid Enterprise Example with Environment Variable License Key

Source: https://dash.plotly.com/dash-ag-grid/enterprise-ag-grid.md

This example demonstrates how to use an AG Grid Enterprise license key stored as an environment variable and enables enterprise modules. It also showcases the Column Menu feature.

```python
import os
from dash import Dash, html
import dash_ag_grid as dag
import plotly.express as px

app = Dash()

df = px.data.gapminder()

app.layout = html.Div([
    dag.AgGrid(
        id="env-var-example",
        enableEnterpriseModules=True,
        licenseKey = os.environ['AGGRID_ENTERPRISE'],
        columnDefs=[{"field": x, } for x in ['country', 'continent', 'year', 'pop']],
        rowData=df.to_dict('records'),
        columnSize="sizeToFit",
        dashGridOptions={"animateRows": False}
    ),
])


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

--------------------------------

### AgGrid v2.0 with dangerously_allow_code=True

Source: https://dash.plotly.com/dash-ag-grid/migration-guide.md

Example of enabling raw HTML rendering with `dangerously_allow_code=True` in v2.0.

```python
dag.AgGrid(
columnSize="sizeToFit",
columnDefs=columnDefs,
rowData=rowData,
dangerously_allow_code=True,
),

```