How to make an editable table/Ag Grid be the source for a chart/figure

[maxschulz-COL]

Hello all 👋 ,

based on a recent user question I wanted to show how one can make an editable table power a graph. The original request was:

I would like to create a Table in my dashboard (in default blank) that allows the user to input values (the index are dates). Once clicking on a "Save" button, the data is used to create a line-chart on the left. How should I realize this with the AgGrid model and custimizable actions?

Here is the solution (I made the update automatic - but of course another "Save" button could be added!)

The code for this can be found here, where you can also run the dashboard live: https://py.cafe/maxi.schulz/vizro-user-question-editable-table

Notes

• this example showcases how Vizro is a framework on top of dash - and you can easily revert to using pure Dash for custom functionality
• some parts done here with @callback could be done with vm.Action, but not all

Important

When creating dashboards that allow for user input that the dashboard creator is always responsible for the security of the dashboard. Never evaluate untrusted data.

Sources

This solution was heavily inspired by https://www.youtube.com/watch?v=LNQhY8NZmCY (thanks @Coding-with-Adam )

Discussion

@petar-qb @antonymilne Maybe take note of this issue in case you have any comments, I find this especially interesting because it highlights the need for:

• specifying triggers
• ideally not returning entire figs in callbacks/actions, but rather modifying data in the DM (which we do not do in this example)