📣 Dash AG Grid -- Update 2.0.0rc1 Pre Release is Now Available **

[jinnyzor]

Yes, this should be working.

You can create your own javascript sorting in the namespace dashGridFunctions and then use it like this: "comparator": {"function": "myCustomComparator"}.

I havent tested it yet.

[jcuypers]

Ok i’ll give it a try tomorrow and let you know

[AnnMarieW]

@jcuypers

Did you see the example of parsing the date in this example?

Dash AG Grid Filtering

This valueGetter parses the date string into a date object, making is so you won’t need a custom date sorting function (in most cases)

columnDefs = [
    {
        "headerName": "Date",
        "filter": "agDateColumnFilter",
        "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"},
        "valueFormatter": {"function": "params.data.date"},
    },
]

You can see all the specifiers you can use depending on the format of the datestring in the last example on this page:

Dash AG Grid Rendering - Number and Date Formatting with d3.format

[jcuypers]

You were right. Being so hyped up about all the built-in conversion/formatting directly into the grid, I forgot that I actually needed mimic the part from my code where I convert the dates. thanks

[hoatran]

Hi @AnnMarieW and @jinnyzor. Thank for all of your work.
I have a question that is there any way to fit all row in Div like sizeToFit of columns? As you see it has White Space under dash ag grid.

import dash_ag_grid as dag
from dash import Dash, html, dcc
import requests
import pandas as pd
import json
data = pd.DataFrame({'Category': ['A', 'B', 'C'], 'Value': [1, 2, 3], 'Type': ['Circle','Square','Triangle']})

columnDefs = [{"field": x} for x in data.columns]

app = Dash(__name__)
app.layout = html.Div(
    [
        dcc.Markdown("This grid has resizeable columns with sort and filter enabled"),
        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=data.to_dict('records'),
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
        ),
    ],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run_server(debug=False, port=8052)

[jinnyzor]

Sure thing.

A lot of things come native to Dash AG grid from AG grid itself. And all of the props from the grid are available, if not on the first level, then inside dashGridOptions.

Check out here:

React Data Grid: Grid Size

They do have a warning that using this can affect the performance, so use it sparingly.

[AnnMarieW]

Dash AG Grid Docs – The Latest Updates

We are continuing to work on the dash-ag-grid component to add new features and improve performance. We don’t expect any more breaking changes, so please feel free to take 2.0.0a4 for a spin!

There are still lots of features that have not yet been documented. Helping translate examples from the official AG Grid docs is a great way to contribute to this project

Here are the latest updates to the docs:

Getting Started section

• added a simple Quick Start app
• add a Reference page to describe the dash-ag-grid props, including which ones trigger callbacks and which take JavaScript functions as props
• added a Beyond the Basics page to give an overview of using JavaScript functions and custom components safely in dash-ag-grid.
• Added some debugging tips when using JavaScript functions in your Dash app. Find this on the Beyond the Basics page.

Rows section

• added a new Row Pinning page with examples of pinning rows to the top or bottom of the grid.

Layout & Style section

• added a Grid Size page with examples of:
  - changing the default size either when you define the grid or update it in a callback
  - auto size the grid height when there are only a few rows. This eliminates any blank spaces on the bottom of the grid.

Rendering section

• added an example to the Value Formatter with D3 page to show how to make the AG Grid Date filter and sort work “out-of-the-box” without having to write your own custom sort and date functions.

Components section

• updated the cellRenderer page to include more detailed examples of how to write custom components and use them in Dash callbacks.

---

Row Pinning Example
Here is a little more on the Row Pinning. One use case is for adding a total row (when you are using AG Grid community and don’t have the Enterprise aggregation feature) In this example, the average is calculated in a Dash callback and it updates the Averages in the pinned bottom row. Note that the number formatting works automatically, and the totals stay with the columns as you move or resize them:

---

[Sylvos]

Datepicker Cell Editing

@AnnMarieW @jinnyzor Can a cell be edited with datepicker？

[jinnyzor]

Hello @Sylvos,

That is a good question.

Yes, you should be able to do this via a custom component:

Dash AG Grid Components - cell renderers

[jinnyzor]

@Sylvos,

I haven’t been able to figure out a way just yet for you to be able to do this, it very well could be some additional support that we need to add.

---

I have this working, their exact example. Problem is that it did take some additional support.

[clevercolt]

This is great, thank you! I have a quick question… What component should I use to output data to an AG-Grid? I’m currently using “children”, but when using something similar to the code below the table does not render. Thanks in advance!

table = dag.AgGrid(id=“test_table”)

Output(“test_table”, “children”),
[Input(“submit_button”, “n_clicks”)]

[jinnyzor]

Hello @clevercolt,

There is no children attribute of AG grid, please checkout here:

Dash AG Grid

[AnnMarieW]

@clevercolt

There are a couple ways to update the data in AG Grid in a Dash callback:

• rowData - this will replace all the data in the table (like the data prop in the Dash DataTable.)
• rowTransaction - this will update only specified data and is a more efficient way to make small updates to larger datasets. See an example in Clientside data section of the docs.

Below is a minimal example of switching between two data sets where both the rows and the columns are different, so both rowData and columnDefs need to be updated.

from dash import Dash, html, Output, Input, dcc
import plotly.express as px
import dash_ag_grid as dag


app = Dash(__name__)

df_tips = px.data.tips()
df_gapminder = px.data.gapminder()

dropdown = dcc.Dropdown(
    id="dataset",
    options=["tips", "gapminder"],
    value="tips",
    clearable=False,
    style={"marginBottom": 20, "maxWidth": 200},
)

app.layout = html.Div([html.Div("Select Dataset"), dropdown, dag.AgGrid(id="grid")])


@app.callback(
    Output("grid", "rowData"),
    Output("grid", "columnDefs"),
    Input("dataset", "value"),
)
def set_dataset(v):
    dff = df_tips if v == "tips" else df_gapminder
    rowData = dff.to_dict("records")
    columnDefs = [{"field": i, "id": i} for i in dff.columns]
    return rowData, columnDefs


if __name__ == "__main__":
    app.run_server(debug=True, port=1234)

[clevercolt]

@jinnyzor @AnnMarieW You guys are great, thanks so much!

[AnnMarieW]

dash-ag-grid 2.0.0a5

Progress is continuing on Open Source Dash AG Grid. 2.0.0a5 was released - no breaking changes in a5 - just lots of new features. We plan to do (at least?) one more release before the full 2.0.0 is ready. The next release will likely have only one small breaking change with one prop, so it shouldn’t be hard to upgrade if you start from the current 2.0.0a5. If you are starting from earlier versions, see the new Migration Guide in the docs.

There are new examples in nearly every section of the docs - here are just some of the highlights:

Cell Renderer Components Examples

See these examples --and more! – in the Cell Renderer Componets docs.

Dash Mantine Components Button with icons from DashIconify

---

Dash Bootstrap Component Buttons with Font Awesome and Bootstrap Icons

---

Render figures in a dcc.Graph component

---

Image Component with a callback to display the full sized image in a dbc.Modal

---

Stock Portfolio Demo App with Dash Mantine Component Buttons, DashIconify Icons, dcc.Graph component in the grid

---

Dash Bootstrap Components dbc.Progress component gallery

---

Custom Loading and No Rows Overlay

---

Custom Tooltip

Custom Tooltiop

---

Custom datepicker component
Editing/cell editing Docs

---

Conditional dropdowns
See this example in the Editing/cell editing Docs
Note the different city dropdown options based on the country

---

Tree Data Example (Enterprise only)

Tree Data Docs

[entropy_l]

thanks @AnnMarieW . This is super useful.
Also want to mention that, the “manual grouping” feature of JavaScript Data Grid: Row Grouping is also available from the latest release.

• Do you know we can input value in table header and trigger calculation in the main table?
• If the pivot table is on your pipeline?

Thanks!

[AnnMarieW]

Hi @entropy_l

I don’t know what you mean about input values in the header and triggering a calculation - can you post that as a new topic and elaborate?

I’ve been focusing on documenting the free AG Grid Community features first. Pivot is available, but it’s in AG Grid Enterprise.

Here’s the first Pivot example from the AG Grid docs to get you started. If you translate any of the other examples from the AG Grid docs please post them, and I’ll include them in the docs.

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


app = dash.Dash(__name__)


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


columnDefs = [
    {"field": "country", "rowGroup": True, "enableRowGroup": True},
    {"field": "sport", "pivot": True},
    {"field": "year"},
    {"field": "date"},
    {"field": "gold", "aggFunc": "sum"},
    {"field": "silver", "aggFunc": "sum"},
    {"field": "bronze", "aggFunc": "sum"},
]

defaultColDef = {
    "flex": 1,
    "minWidth": 150,
    "sortable": True,
    "resizable": True,
}


app.layout = html.Div(
    [
        dcc.Markdown("Demonstration of pivot in a Dash AG Grid."),
        dcc.Markdown(
            "The example below shows a simple pivot on the Sport column using the Gold, Silver and Bronze columns for values."
        ),
        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={
                "autoGroupColumnDef": {"minWidth": 250},
                "pivotMode": True,
            },
            defaultColDef=defaultColDef,
            # Pivot groupings 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="LICENSE_KEY_HERE",
        ),
    ]
)


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

[entropy_l]

Thank you!

[DaveG]

@AnnMarieW
a. You’re developing some serious marketing chops
b. The question is rapidly becoming not “What can I do w Dash Ag-Grid?” but “What **CAN’**T I do w Dash Ag-Grid?”

[SCooper]

Genuinely excited to see how Dash AG Grid is developing!

@AnnMarieW I may have some ideas that might help with automatically converting examples into the Dash format directly from the AG Grid typescript examples. Let me know if your interested!