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

AnnMarieW · March 13, 2023, 3:45pm

Original Post announcing Dash AG Grid Open Source:

For an overview of Dash AG Grid Features, please see:

New in Dash AG Grid V2.0.0a3

We are pleased to announce the third pre-release of Dash AG Grid. This one is packed with new features!

pip install dash-ag-grid==2.0.0a3

JavaScript Functions

See the Beyond The Basics section of the docs for an introduction to using JavaScript functions with dash-ag-grid props.

While it’s not necessary to use JavaScript functions with most of AG Grid features, using functions allows you to add custom components to the grid and to take customization to the next level. There are now more than 80 Dash props where you can pass JavaScript functions from Dash to AG Grid.

We’ll be adding lots of examples to the docs, but here are a few to get you started:

Selectable Rows

Here’s a simple JavaScript function that determines whether a row is selectable. (Only rows having a year earlier than 2007 are selectable.)

dag.AgGrid(   
    dashGridOptions = {'isRowSelectable': {"function": "params.data ? params.data.year < 2007 : false" }},
    # other props
)

See the full example in the Selection Checkbox section of Dash AG Grid docs.

Column Spanning

By using a function to set the column width of certain rows, you can make reports that look like this:

See complete example in the docs in the Column Spanning section. This works with Row Spanning too!

Aggregation with Custom Functions (AG Grid Enterprise)

See complete example in the Enterprise Examples

Cell Class Rules and Row Class Rules

You can now use class names with condition formatting. In this example, we use Bootstrap class names – so the background colors of the highlighted cells will match your selected Bootstrap theme.

See this example in the Cell Styling section. You can learn how to use class names with conditional formatting to set Row Styles too.

Date and Number Formatting

Dash AG Grid includes the d3-format and d3-time-format libraries - making it easy to format numbers and dates.

See more examples in the Value Formatters with d3-format section of the docs.

Date Filters

We have Included examples in the docs of how to make the date filters to work “out-of-the-box” using d3.time-format to convert string dates into date objects.

aggrid_date_filter

See more examples in the Filtering section of the docs.

Custom Components

You can now add custom components to the grid using the cellRenderer.

This example shows how to create links, display values as a badge, display boolean values as a checkbox, add custom buttons and dropdowns to cells. Use these examples to learn how to create your own custom components.

See the example in the Custom Components using the Cell Renderer docs.

You can also add a custom tooltip to the grid. See this example in Custom Tooltips.

Breaking Changes

in 2.0.0a3
- Prop name changed from clickData to cellRendererData This is used in the RowMenu Component.
in 2.0.0a2
- Prop name changed from selectionChanged to selectedRows
- Prop name change from dangerously_allow html to dangerously_allow_code. This prop now only needs to be on the grid level, rather than on both the grid level and on the columnDefs.
in 2.0.0a1
- Added dangerously_allow_html prop. Must be set to True to render html or execute cell expressions.

Migration from 2.0.0a1

For an example of migrating from 2.0.0a1 to 2.0.0a3 see two versions of the same app in GitHub

In the latest version you will notice that there is no need to set the grid to dangerously_allow_code=True This is because we are not using raw html in any components, and we are using functions instead of string expressions.

The new way to safely pass known JavaScript functions to the Grid:

{"function": string} where string is the body of the function as a string, or the variable name of a function defined in the dashAgGridFunctions namespace.

For example, in demo_stock_portfolio app:

# New way to use functions as props
columnDefs = [
    "valueFormatter": {"function": "Number(props.value).toFixed(2)"},   
]


# The old way used in 2.0.0a1 -- Don't do it this way
columnDefs = [
    "valueFormatter": "Number(value).toFixed(2)",
    "dangerously_allow_html": True,
]

Prop name change:

selectionChanged is now called selectedRows



# New prop name  in V2.0.0a3
@app.callback(
    Output("candlestick", "figure"),
    Input("portfolio-grid", "selectedRows"),
)

# Old prop name in V2.0.0a1 
@app.callback(
    Output("candlestick", "figure"),
    Input("portfolio-grid", "selectionChanged"),
)

New Prop: dashGridOptions

Only a subset of AG Grid props are defined in Dash. Valid AG Grid props can be passed to the grid in a dict using the dashGridOptions prop. For example:

dag.AgGrid(    
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),    
    dashGridOptions={"undoRedoCellEditing": True, "rowSelection": "single"},
)

To do before V2.0.0

There will be a few more changes to prop names before the 2.0.0 release. Also, we’ll be removing many AG Grid props that are defined in Dash in the pre-release version of dash-ag-grid. These props can still be used - they just need to be passed to the grid using the dashGridOptions prop as shown above.

Thanks to @jinnyzor for doing the development work on this component, and thanks to @alexcjohnson for the mentoring and code reviews!

AIMPED · March 13, 2023, 4:17pm

This is looking awesome! Thanks for all the hard work and dedication you are putting into this! Hats off.

Larsometer · March 13, 2023, 4:49pm

@AnnMarieW : Does the AG Grid also work with Django?

AnnMarieW · March 13, 2023, 5:08pm

Hi @Larsometer
I haven’t used Django, but if other dash components work, then dash-ag-grid should as well. If you try it, let us know how it goes!

DataScientistE · March 13, 2023, 5:38pm

Great work! Thanks for the new version.

denisz · March 13, 2023, 10:09pm

Thank you for the awesome job!

Are there any plans for adding rowModelType=“serverside”?

jinnyzor · March 13, 2023, 10:44pm

Hello @denisz,

Welcome to the community!

Technically, the row model that infinite creates queries the data from the server as it is needed by the client. In this sense, it is all actually managed on the server.

I would say that the infinite model is not really a true infinite model in the sense that AG grid talks about it. An infinite model to AG grid, the rowData is housed in the client and then queried based upon scroll position.

In our infinite model, the data is housed server side and only given back in chunks.

I don’t know if we are going to change this design or not, as it obviously has some benefits to it.

The downside of the infinite model that AG grid provides is that you lose things like virtualRowData and the automatic filtering and sorting.

denisz · March 13, 2023, 10:50pm

I thought that was the general idea of AG Grid Server Side model as well.

jinnyzor · March 13, 2023, 10:52pm

It is.

The difference is really in the name in how ours executes. Plus serverSide is only available for enterprise.

Give it a test and see if it meets your needs for execution.

hoatran · March 14, 2023, 2:59am

HI @AnnMarieW and @jinnyzor , first of all I want to say thank you about your efforts.
I have a question that does AG Grid has something like wraptext option in Excel or whitespace in dash_table?

As you see in the picture, athlete with long name like Pieter van den Hoogenband was showed as Pieter van den Hoog.... Is there anyway to show full of it.

Thank you.

AnnMarieW · March 14, 2023, 3:16am

Hi @hoatran
Glad you like dash-agrid

Please see text wrapping examples here:

hoatran · March 14, 2023, 3:18am

Oh thank you. Sorry for not looking carefully but asked.

denisz · March 14, 2023, 6:19pm

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 · March 14, 2023, 6:24pm

Correct.

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

Check out here with how to use them:

github.com/plotly/dash-ag-grid

Filtering and Sorting with Client Side table interaction

opened 06:50PM - 03 Mar 23 UTC

closed 08:42PM - 25 Apr 23 UTC

BSd3v

docs

When `rowModelType="infinite"`, the table doesnt respond to sorting and filterin…g the same way, as denoted here: https://www.ag-grid.com/react-data-grid/infinite-scrolling/#sorting--filtering Here is an example of how to work with sorting and filtering inside the requests in an infinite model: ``` """ Working with infinite scroll against a backend database in AG-Grid. """ import traceback import dash_ag_grid as dag from dash import Dash, Input, Output, html, no_update, State, ctx import pandas as pd import requests app = Dash(__name__) raw_data = requests.get( r"https://www.ag-grid.com/example-assets/olympic-winners.json" ).json() df = pd.DataFrame(data=raw_data) pd.to_datetime(df['date'], dayfirst=True) columnDefs = [ {"field": "athlete", "filter": False}, {"field": "country", "filter": False}, { "headerName": "Date", 'field': 'date', "filter": "agDateColumnFilter", "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"}, "valueFormatter": {"function": "params.data.date"}, "filterParams": { "browserDatePicker": True, "minValidYear": 2000, "maxValidYear": 2021, }, }, ] app.layout = html.Div( [ dag.AgGrid( id="grid1", rowModelType="infinite", rowSelection="multiple", columnSize="sizeToFit", columnDefs=columnDefs, defaultColDef={"sortable": True, 'filter': True}, # The number of rows rendered outside the viewable area the grid renders. rowBuffer=0, # How many blocks to keep in the store. Default is no limit, so every requested block is kept. maxBlocksInCache=1, multiSortKey=True ), ] ) operators = { 'greaterThanOrEqual': 'ge', 'lessThanOrEqual':'le', 'lessThan': 'lt', 'greaterThan': 'gt', 'notEqual': 'ne', 'equals': 'eq' } def filterDf(df, data, col): ##To-Do fix date filtering if data['filterType'] == 'date': crit1 = data['dateFrom'] if 'dateTo' in data: crit2 = data['dateTo'] else: crit1 = data['filter'] if 'filterTo' in data: crit2 = data['filterTo'] if data['type'] == 'contains': df = df.loc[df[col].str.contains(crit1)] elif data['type'] == 'notContains': df = df.loc[~df[col].str.contains(crit1)] elif data['type'] == 'startsWith': df = df.loc[df[col].str.startswith(crit1)] elif data['type'] == 'notStartsWith': df = df.loc[~df[col].str.startswith(crit1)] elif data['type'] == 'endsWith': df = df.loc[df[col].str.endswith(crit1)] elif data['type'] == 'notEndsWith': df = df.loc[~df[col].str.endswith(crit1)] elif data['type'] == 'inRange': if data['filterType'] == 'date': df = df.loc[df[col].astype('datetime64[ns]').between_time(crit1, crit2)] else: df = df.loc[df[col].between(crit1, crit2)] elif data['type'] == 'blank': df = df.loc[df[col].isnull()] elif data['type'] == 'notBlank': df = df.loc[~df[col].isnull()] else: df = df.loc[getattr(df[col], operators[data['type']])(crit1)] return df @app.callback( Output("grid1", "getRowsResponse"), Input("grid1", "getRowsRequest") ) def infinite_scroll(request): dff = df.copy() orig_dff = dff.copy() if request['filterModel']: fils = request['filterModel'] for k in fils: try: if 'operator' in fils[k]: if fils[k]['operator'] == 'AND': dff = filterDf(dff, fils[k]['condition1'], k) dff = filterDf(dff, fils[k]['condition2'], k) else: dff1 = filterDf(dff, fils[k]['condition1'], k) dff2 = filterDf(dff, fils[k]['condition2'], k) dff = pd.concat([dff1, dff2]) else: dff = filterDf(dff, fils[k], k) except: print(traceback.format_exc()) pass dff = dff if request['sortModel']: sorting = [] asc = [] for sort in request['sortModel']: sorting.append(sort['colId']) if sort['sort'] == 'asc': asc.append(True) else: asc.append(False) dff = dff.sort_values(by=sorting, ascending=asc) partial = dff.iloc[request["startRow"]: request["endRow"]] return {"rowData": partial.to_dict("records"), "rowCount": len(orig_dff.index)} if __name__ == "__main__": app.run_server(debug=True, port=12345) ```

denisz · March 14, 2023, 6:27pm

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

jinnyzor · March 14, 2023, 7:09pm

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 · March 16, 2023, 1:29pm

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 · March 16, 2023, 5:24pm

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 · March 16, 2023, 7:14pm

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

jcuypers · March 16, 2023, 8:21pm

@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

Topic		Replies	Views
Dash Ag Grid open source Dash Python announcements	46	5546	December 15, 2023
Dash AG Grid Community Dash Python	1	821	February 7, 2023
Dash AG Grid v2.0.0 released Dash Python announcements	18	2699	September 28, 2023
Dash AG Grid 2.4.0 release Dash Python	2	1490	October 25, 2023
Dash AG Datagrid? Dash Python	1	989	May 19, 2022