Dash Ag Grid open source

Dash Python
21

As @jinnyzor mentioned the infinite models as well as pagination is available in the community AG Grid features. Here is more info:

Which row model you use will depend on your application. Here are some quick rules of thumb:

  • If using AG Grid Community, use Client-Side Row Model if you want to load all your data into the browser, or Infinite Row Model if you want to load it in blocks.
  • If using AG Grid Enterprise, use Client-Side Row Model if you want to load all your data into the browser, or Server-Side Row Model if you want to load it in blocks. Server-Side Row Model is Infinite Row Model plus more. So if you are an AG Grid Enterprise customer, you should prefer Server-Side Row Model over Infinite Row Model.
  • Donā€™t use Viewport Row Model unless you understand what its advantages are and when you need them. We find many of our users use Viewport Row Model when they donā€™t need to and end up with more complicated applications as a result.

Here are more detailed rules of thumb.

  • If you are not sure, use default Client-Side. The grid can handle massive amounts of data (100k+ rows). The grid will only render whatā€™s visible on the screen (40 rows approximately, depending on your screen size) even if you have thousands of rows returned from your server. You will not kill the grid with too much data - rather your browser will run out of memory before the grid gets into problems. So if you are unsure, go with Client-Side Row Model first and only change if you need to. With Client-Side, you get sorting, filtering, grouping, pivoting and aggregation all done for you by the grid. All of the examples in the documentation use the Client-Side model unless specified otherwise.
  • If you do not want to shift all the data from your server to your client, as the amount of data is too large to shift over the network or to extract from the underlying datasource, then use either Infinite, Server-Side or Viewport. Each one takes data from the server in different ways.
  • Use Infinite or Server-Side to bring back a list of data one block at a time from the server. As the user scrolls, the grid will ask for more rows. Server-Side has more features than Infinite and will allow row grouping, aggregation, lazy-loading of groups and slice and dice of data.
  • Use Viewport if you want the server to know exactly what the user is looking at. This is best when you have a large amount of changing data and want to push updates to the client when the server-side data changes. Knowing exactly what the user is looking at means you only have to push updates to the relevant users. All the row models can receive updates but only the Viewport row model provides the server with the information of the rows the users currently sees on screen without scrolling.
2 Likes
22

If anyone has any ideas on how to print a dash app page containing the ag grid table (or the table itself), please let me know. Looking forward to the official release and the community contributionsā€¦ ngl, really hoping for a good drilldown / aggregation implementation, itā€™s the one feature that would really give us the functionality to make dash viable for us long-term.

23

Hello @Neil_H,

Welcome to the community!

When you say print, you mean the whole table at one go?

24

Thank you! Yes, looking for a way to take a snapshot of the current table view (default view or with filters etc. applied).

1 Like
25

So, currently there isnt an easy way to do this. Youā€™d have to do some css magic I think in order for it to display right.

AG-Grid does have a print method that we might be able to implement in the future. :smiley:

26 
{
    "make": "**Ford** in bold",
    "model": "Mondeo",
    "link": '<a href="#" target="_blank">Link to new tab</a>',
    "image": "{0} {0} {0} {0}".format(
        "![alt text: sun](https://www.ag-grid.com/example-assets/weather/sun.png)"
    ),
},

@AnnMarieW @jinnyzor In the example, link to new tab, still open in the self tab

27

Hello @Sylvos ,

Could you please provide more than just the record that you are showing?

The raw html should be working, because it is raw html and coded as such for the browser.

28

You can try it yourself in the docs
https://dashaggrid.pythonanywhere.com/components/markdown

image
image1772Ɨ426 36.1 KB

29

I believe that has more to do with the href than the target.

Change the href to be something to an external site.

30

Thanks for reporting @Sylvos .
You can track the progress here: Markdown html links with `target="_blank` not opening in new tab Ā· Issue #44 Ā· plotly/dash-ag-grid Ā· GitHub

2 Likes
31

just wanted to say Iā€™m eagerly awaiting the release of this. I have a Dash app that is currently using a DataTable that would a PERFECT fit for AG Grid instead and it would make the app so much simpler. Maybe Iā€™m just a Dash noob but AG Grid looks sooooo much better (by default!) than how Iā€™ve set up my DataTable with all its weird workarounds and hacks.

4 Likes
32

Hey all, I have the Ag Grid V2.0.0a3 prerelease installed and I was able to use the aggFun function (similar to the example provided here: Dash) to show aggregated data in ag grid.

My question is: I thought aggFun was an enterprise only function (only enterprise version has row grouping and aggregation), is it now available in Community / Open Source versions as well? Need to make sure itā€™s something that I can continue to test and build up for eventual production usage.

Thanks in advance.

33

Hello @Neil_H,

Without seeing your code, I dont know which version of the grid you are using.

I havent tried the aggFunc with just community, so I dont really know.

34

Iā€™m using ag grid open source pre-release v2.0.0a3 and my code is almost exactly the same as the code provided in the example from AnnMarieW in her email Monday located here: Dash

1 Like
35

Then yes, you are using enterprise as turned on with enableEnterpriseModules=True.

You can evaluate it for free, (they watermark it when external).

36

Aaaah yes, it makes sense now, thank you kindly for the quick response. BTW if anyone has a good example of a row grouping/aggregation solution for ag grid open source (or even a custom dash component), please let me know. Hereā€™s a few options Iā€™ve found so far (but none for ag grid)ā€¦

( Expand/collapse rows of datatable )
( Dash_Tutorial_Series/app_table.py at master Ā· amyoshino/Dash_Tutorial_Series Ā· GitHub )
( GitHub - preftech/dash-tabulator: Tabulator component for Dash Plotly )

1 Like
37

Thanks @adamschroeder!

Is there any documentation for python?

The link above (i.e., React Data Grid: Documentation) seems to be primarily geared towards JS. And the plotly link (Dash AG Grid | Dash for Python Documentation | Plotly) doesnā€™t appear to be applicable for open-source (but rather geared towards Enterprise).

Weā€™d love to see some documentation for Python that breaks down the various argā€™s, etc. Also would be great to see documentation for applying custom CSS styling to open-source ag-grid.

Thanks!

38

hi @dani_m
Did you see @AnnMarieW 's post from above where she shared the Dash ag-grid docs?

39

How do I use dropdowns to change the data (add/remove columns and rows) in ag grid?

My data is in the form of a pandas dataframe and I want to use multiple dropdowns to show specific slices of data in the ag grid table. I imagine this is a pretty common requirementā€¦ (Iā€™m functional with callbacks and have seen seen the example in the dash ag grid docs that uses ag grid props to update figures but not the other way round - updating ag grid table based on a dcc such as a dropdown).

40

@Neil_Hm,

Yes, this is actually relatively easy.

In fact, AG Grid can handle all your data and then you decide whether or not you want to display the columns via the columnDefs. You can either hide them or not pass them at all with your columns.

If you have an example code, I could take a look at it and see if I can get it working for you.

1 Like