Dash Ag Grid open source

Dash Python
1

Update : Dash AG Grid v2.0.0rc1 was released since this post was written.

Hi Dash enthusiasts,

Dash AG Grid is a high-performance and highly customizable component library for working with tabular data that wraps AG Grid. It was initially written as a feature of Dash Enterprise to make this powerful data grid accessible to our customers.

:mega: Dash AG Grid is now available open source!

We have decided to make Dash AG Grid open source and available to the community.

Dash AG Grid is currently a pre-release

Weā€™re working hard to get it ready for its initial v2.0.0 open-source release on PyPI. This is an alpha release, so feel free to take Dash AG Grid for a spin and let us know what you think, but please do not use it in production apps yet.

We will announce the full release here in the Forum and on the Dash Club newsletter.

Getting Started

pip install dash-ag-grid==2.0.0a1

  1. Read the Medium article or watch the webinar introducing Dash AG Grid.
  2. See the live stock portfolio demo app from the webinar hosted by Plotly.
  3. Get the code for the demo app in GitHub

See the docs app live (also to be incorporated into the Dash docs soon).

Contributing

Thanks to @jinnyzor and @AnnMarieW for leading the development of the open source version of Dash AG Grid. Community contributions are welcome! If you would like to help with either the component development or the docs, please see the contributing guide.

19 Likes
3

Thanks
Please keep updating us

Can we have multiple out for same Id in future

4

Thatā€™s finally coming! Part of the ā€œpartial props outputā€ feature that @Philippe is working on in this PR: Add Patch callbacks by T4rk1n Ā· Pull Request #2414 Ā· plotly/dash Ā· GitHub ā€” so with any luck itā€™ll be in the next release :pray:

7 Likes
5

Thanks for the update, tried to create the ag-grid via a callback using df.to_dict(ā€˜recordsā€™) as an output to the ag-grid rowData property, the docs mention the importance of setting the row Ids but not sure how to implement that. At the moment my ag-grid is not showing any data.

6

Hello @nickmuchi,

Make sure you are also passing the columnDefs. It is slightly different than how the data tables are.

1 Like
7

Thanks, so this is what I have in my app.layout:

dag.AgGrid(
                    id="my_grid",
                    #className="ag-theme-alpine-dark",
                    columnDefs= [
                    {"headerName": "Row ID", "valueGetter": "node.id", "dangerously_allow_html": True
                    },
                    {
                        "headerName": "ISSUER",
                        "field": "ISSUER_NAME",
                        "filter": True,
                    },
                    {
                        "headerName": "TICKER",
                        "field": "TICKER",
                        "filter": True,
                    },
                    {
                        "headerName": "ANALYST",
                        "field": "PRIMARY_ANALYST",
                        "type": "rightAligned",
                    }
                ],
                    #rowData=df.to_dict("records"),
                    columnSize="sizeToFit",
                    defaultColDef=defaultColDef,
                    setRowId = 'id',
                    dangerously_allow_html=True,
                    dashGridOptions={"undoRedoCellEditing": True, "rowSelection": "single"},
                )

then in the callback:

@app.callback(Output('my_grid','rowData'),
             [,Input('data_memory','data'),
             Input('interval_component','n_intervals')])    
def update_table(data,n):
    if data is None:
        raise PreventUpdate

    df = pd.DataFrame(data)
        
    df.id = [i for i in range(len(df))]
        
    return df.to_dict('records')

it is only rendering the column headers but data is blank. Thanks in advance

8

@nickmuchi,

My guess is that the column names of the dataframe donā€™t line up with the column names that you are passing.

Each row in the rowData must have a key that matched the field in the columnDefs in order to display.

9

Ye I double checked and all the columns line up well

10

Your columns are all upper case?

11

|id|ISSUER_NAME|TICKER|PRIMARY_ANALYST|

ye all upper case except the id column

12

@nickmuchi ,

What does your df look like?

13 
> id	ISSUER_NAME	TICKER	PRIMARY_ANALYST	       LEHMAN_INDUSTRY	
0	ZANU	      ZNU	      NICK M	              Aerospace/Defense	
1	AUSTRALIA CORP ACU	     NICK M	              Aerospace/Defense	
2	NEW Z CORP	     NZC     NICK M	              Aerospace/Defense		
3	ZIMBABWE CORP	  ZCC	 NICK B	              Aerospace/Defense			
4	MASVINGO CORP	  MCC	 NICK C               Aerospace/Defense<
14

Awesome lib, thanks to all dash team!

I really hope the row grouping feature comes with the next releases. It has always been an old request from those who use dash-datatable.

15

Hi @bernarducs

Row Grouping is available, but it is part of AG Grid Enterprise. You can see an example here:

16

great addition, I love it, could you show us how to properly filter, navigate to other pages and other features of the component on the server side. Since I work with big data in the browser for the most part, it makes no sense to display the entire dataset

17

HI @Sohibjon

The Server Side Row Model is an AG Grid Enterprise feature. You can find more information here:

18

looks like AG Grid uses Virtual DOM. is there an easy way to redraw the component if itā€™s not visible when sent to the browser? Tabulator also uses Virtual DOM and requires a lot of tricksā€¦ Iā€™ll use Dash DataTable or even pure html tables where I can to avoid this situation. For instance , one use case is to render the table in a bootstrap tab that isnā€™t visible on initial load

1 Like
19

itā€™s not free we canā€™t do it?

20

Hello @Sohibjon,

You can use the infinite models, as well as pagination.