📣 Dash AG Grid 2.0.0a3 pre-release #3 ** Update 2.0.0a4 Now Available **

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. :smiley:

1 Like

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

1 Like


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

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:

1 Like

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

1 Like

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"),
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
    style={"margin": 20},

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

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:

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


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 :slight_smile:

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:



Datepicker Cell Editing

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

1 Like

Hello @Sylvos,

That is a good question.

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


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. :slight_smile: