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. 
{
"make": "**Ford** in bold",
"model": "Mondeo",
"link": '<a href="#" target="_blank">Link to new tab</a>',
"image": "{0} {0} {0} {0}".format(
""
),
},
@AnnMarieW @jinnyzor In the example, link to new tab, still open in the self tab
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.
I believe that has more to do with the href than the target.
Change the href to be something to an external site.
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
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
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.
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.
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
Then yes, you are using enterprise as turned on with enableEnterpriseModules=True.
You can evaluate it for free, (they watermark it when external).
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
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!
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).
@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
Hi @Neil_H
You can find an example of updating columns in a callback here:
If you want to update the rows based on external filters such as dropdowns, you can sort or filter the data in a callback and return it to the grid’s rowData prop
2 Likes
Thank you guys, this is helpful, will update on progress in a little while.
Just to loop back, incase anyone else is wondering the same thing (updating ag grid data rows based on one or multiple dropdowns or other inputs; for changing columns, refer to to AnnMarieW’s link above).
@app.callback(
Output('aggrid', 'rowData'),
Input(component_id = 'dropdown1', component_property = 'value'),
Input(component_id = 'dropdown2', component_property = 'value'))
def select_grid_data(dropdown1_value, dropdown2_value):
if dropdown1_value == "process 1":
if dropdown2_value == 'date 1':
return process1_date1_data
if dropdown2_value == 'date 2':
return process1_date2_data
elif dropdown1_value == "process 2":
if dropdown2_value == 'date 1':
return process2_date1_data
if dropdown2_value == 'date 2':
return process2_date2_data
Note: this is a quick / dirty way on how I’m updating the rowdata prop for ag grid for testing - I realize nested IF statements is not ideal, I plan to use the input values to filter a dataframe or another more cleaner method.
1 Like