Ag-Grid component with input support

I’m wondering if it is possible to formatter a cell with a javascript function as in the picture Cattura|439x106

I just added customCurrencyFormat column type on version 0.1.2.
Should be used like:

gb.configure_column("chocolate", type=[... , "customCurrencyFormat"], custom_currency_symbol="R$")

Check the example on streamlit share and code on gitHub (links above)

1 Like

Hi @PalocFonseca

Would it be possible to only make the component return the selected rows and not the entire dataframe? I imagine this could make it more performant for large dataframes.

Thanks again for the awesome work!

Btw: version 0.1.2 is not installable for me via pipenv, but 0.1.1 is.

Best,
Peter

Wow, thanks! Unfortunately I only see version 0.1.1.
I know I’m boring but I have another request: Cell Styles. It would be very useful style cells with customized function! Here the example https://www.ag-grid.com/javascript-grid-cell-styles/. But I guess it’s very complicated…

I’ll check pip. To return only filtered rows, you should ser the return mode. Check the examples. This is already implemented.

The main problem is to translate python parameters, passed to the component call, to javascript functions on client side. I don’t know how to do this…

I thought about sending js code as a string and then using eval on the other side, but this is not a good solution, at the end the user would need to know js and there are security concerns.

I’d like to hear if someone come up with a solution for this.

This is amazing, thank you so much for this. It fills a hole in Streamlit that I have had for a while, I commend your work. If you put a GitHub Sponsor button or other means to donate to encourage your work I would pay.

1 Like

Yes, this is the problem. But I think that pass javascript function as string and then evaluate on js side is the simplest solution… it is not elegant and there are security concerns true, but it opens up endless possibilities for customization. On the other hand also streamlit has the parameter “allow_unsafe_html”, so we can create “allow_unsafe_javascript” for ag-grid component.

Wow! Thanks! Take a look at the gitHub repo! =)

same here unable to work in python 3.6 env

Donation made. Thanks again for your contribution to the community.

1 Like

I just did a fresh install, and it seems to be working on python 3.6.12.

I played with 0.1.2 and used the example.py file you gave. When I try to modify an entry in the grid, it gets correctly picked up but the value doesn’t show in the grid anymore… is that intended?

3 Likes

No its not. Probably a bug on the js side I introduced when removing some expensive try catch blocks from value formatters. I’ll fix it

1 Like

I had this problem on streamlit-echarts and I found a workaround inside the pyecharts codebase that I found OK for my needs. Which is actually what @Shinigami86 says :

I basically enclose any JS code with some placeholder values on the Python side,

class JsCode:
    def __init__(self, js_code: str):
        js_placeholder = "--x_x--0_0--"
        self.js_code = f"{js_placeholder}{js_code}{js_placeholder}"

then I map over every (nested) value of the JSON, regex each one of them for those placeholders and rebuild the functions with new Function syntax which should not eval immediately so aggrid should be the sole runner of the function (you can check in https://github.com/andfanilo/streamlit-echarts/tree/master/streamlit_echarts/frontend/src how I did this)

There’s been a lot of debate over the security concern within the Streamlit team and component creators (like this similar one Disqus integration). But ultimately from my experience on streamlit-echarts:

  • at least for Streamlit sharing apps, every of those are open-source on Github, so anyone can check if an app is running some malicious JS code
  • as long as you don’t enable live-editing of JS code to configure the grid (like “insert your own JS snippet in this text box” to then inject in your JSON config) then the Streamlit user of st_aggrid should be the only one accountable for running JS, not millions of users using the deployed app and running malicious JS for everyone in place of some text color config
  • echarts and aggrid may actually have safeguards on JS code, I have not checked.

So for me, given those constraints the benefits outweighs the risks, but ultimately this stays your decision as the library maintainer :slight_smile:

Oh that’s a good idea! If really you feel at odd with the “inject JS” idea (which really is understandable), one can have a st_aggrid then a st_aggrid_unsafe which enables JS code in configuration but also writes a st.info("This code uses the unsafe version of st_aggrid") or something for the user of the app.

3 Likes

The same problem exists on the demo streamlit share:

Streamlit share demo

1 Like

Released v0.1.3

  • Fixed bug where cell was blank after edition.
  • Added enable_enterprise_modules argument to AgGrid call for enabling/disabling enterprise features
  • It is now possible to inject js functions on gridOptions. Enabling advanced customizations such as conditional formating (check 4th column on the example)
3 Likes

Thanks it’s awesome !
when you delete the content of a cell it brings a

ValueError: could not convert string to float:
Traceback:
File “/usr/local/lib/python3.7/site-packages/streamlit/script_runner.py”, line 332, in _run_script
exec(code, module.dict)
File “/app/streamlit-aggrid/example.py”, line 142, in
enable_enterprise_modules=enable_enterprise_modules
File “/app/streamlit-aggrid/st_aggrid/init.py”, line 138, in AgGrid
frame = frame.astype(non_date_cols)
File “/usr/local/lib/python3.7/site-packages/pandas/core/generic.py”, line 5533, in astype
col.astype(dtype=dtype[col_name], copy=copy, errors=errors)
File “/usr/local/lib/python3.7/site-packages/pandas/core/generic.py”, line 5548, in astype
new_data = self._mgr.astype(dtype=dtype, copy=copy, errors=errors,)
File “/usr/local/lib/python3.7/site-packages/pandas/core/internals/managers.py”, line 604, in astype
return self.apply(“astype”, dtype=dtype, copy=copy, errors=errors)
File “/usr/local/lib/python3.7/site-packages/pandas/core/internals/managers.py”, line 409, in apply
applied = getattr(b, f)(**kwargs)
File “/usr/local/lib/python3.7/site-packages/pandas/core/internals/blocks.py”, line 595, in astype
values = astype_nansafe(vals1d, dtype, copy=True)
File “/usr/local/lib/python3.7/site-packages/pandas/core/dtypes/cast.py”, line 997, in astype_nansafe
return arr.astype(dtype, copy=True)

I just tried on the example that’s hosted on streamlit share and could not reproduce this. Are you running it local?

1 Like

This was from the hosted example.
I also had the issue from the local version I have.

However, I just gave it a try in the hosted example and you are right I cannot reproduce it anymore!

I’ll try to uninstall and reinstall locally to see if it’s also fixed.

locally I was just using
gb = GridOptionsBuilder.from_dataframe(df)
and I’m not reconfiguring the columns after like in your example though

gb.configure_column(…) → for each column

I’ll keep you posted