đź“Ł Dash AG Grid -- Update 2.0.0rc1 Pre Release is Now Available **

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.

  1. 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,
]
  1. 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"),
)
  1. 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!

14 Likes

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

6 Likes

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

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!

1 Like

Great work! Thanks for the new version.

2 Likes

Thank you for the awesome job!

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

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.

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

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.

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.

Hi @hoatran
Glad you like dash-agrid

Please see text wrapping examples here:

1 Like

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

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?

Correct.

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

Check out here with how to use them:

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

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.

1 Like

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 :+1:

3 Likes

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

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

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
    ag_grid_quickstart
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
)
5 Likes

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

1 Like

@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