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

[denisz]

@jinnyzor

Plus serverSide is only available for enterprise.

You mean aggrid enterprise? Yes, that’s ok.

I tried the “infinite” mode, it works! Awesome.
How can I add other parameters into “getRowsRequest” callback to make “serverSide” to work as well?

[jinnyzor]

@denisz

You mean aggrid enterprise? Yes, that’s ok.

Correct.

What other parameters are you wanting? filterModel and sortModel are both available.

Check out here with how to use them:

Filtering and Sorting with Client Side table interaction

[denisz]

For example, rowGroupCols and groupKeys to make this: React Data Grid: SSRM Row Grouping
And also similar things for pivoting.

[jinnyzor]

At this time, it will take some effort to get a “serverSide” working.

We will let you know when it is actually available. Plus, if you are trying to do things like connect to a SQL from the clientside directly, that would take some custom coding.

[jcuypers]

Looks like It’s time to kick out some datatables and replace them with some ag grids instead
(Feels like one of those programs: how to spend only a few 1000s to make your home look and feel like its worth 100K more)
Good job

[AnnMarieW]

New in Dash AG Grid V2.0.0a4

There is not a lot new in alpha release #4 - just a few bug fixes and a big prop cleanup. This might be our last pre-release prior to the full 2.0.0 release

If you haven’t tried dash-ag-grid, now’s the time!

It will only take a sec.
Do it!
Do it!
Do it now!
I know you want to

pip install dash-ag-grid==2.0.0a4

Here’s a simple app to try out some basic AG Grid features:

• Sort by clicking on the heading
• Re-order the columns by dragging them to a different position
• Resized the columns by dragging the top right portion of the column
• Pin columns by dragging them to the edge until the pin icon appears
• Click on a cell to demo triggering a Dash callback
  

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

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

app = Dash(__name__)

grid = dag.AgGrid(
    id="quickstart-grid",
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i, "id": i} for i in df.columns],
    defaultColDef={"resizable": True, "sortable": True, "filter": True},
    columnSize="sizeToFit",
    getRowId="params.data.State"
)

app.layout = html.Div([grid, html.Div(id="quickstart-output")])


@app.callback(
    Output("quickstart-output", "children"), Input("quickstart-grid", "cellClicked")
)
def display_cell_clicked_on(cell):    
    if cell is None:
        return "Click on a cell"
    return f"clicked on cell value:  {cell['value']}, column:   {cell['colId']}, row index:   {cell['rowIndex']}"


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

Calling all superusers!

Thanks to everyone who tried the alpha versions of dash-ag-grid, with your help we have found and fixed (or more accurately, @jinnyzor fixed) all the reported issues. Now is the time to really put dash-ag-grid through the wringer - we would like to shake out any bugs prior to the full release.

Migrating to a4

For those of you who are on a3, when you upgrade to a4, it will likely break your app. But no worries, it’s easy to fix. We deleted a lot of props, but they are still available, they just need to be included in dashGridOptions or in the case of cellStyle moved to the column definitions.

For example, most errors can be fixed like this:

# old way
dag.AgGrid(
     rowSelection="multiple",
    # other props
)
# new way
dag.AgGrid(
     dashGridOptions={"rowSelection": "multiple"},
    # other props
)

Update for the cellStyle prop only:

# old way
dag.AgGrid(
     cellStyle=cellStyle,
    # other props
)
# new way
dag.AgGrid(
     defaultColDef={"cellStyle": cellStyle},
    # other props
)

[adamschroeder]

Keeps getting better . Thank you @AnnMarieW Thank you @jinnyzor

[jcuypers]

@AnnMarieW @jinnyzor

Hi, is a custom comparator supported for date sorting? I have checked the source code and there is such an option but mainly for filtering and formatting. The sorting seems not to work as expected for my DateColum. Was looking at a custom sorting operator as with the original ag agrid: JavaScript Data Grid: Row Sorting

[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