Ag-Grid component with input support

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?

2 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

I rewrote the conversion part. I’m uploading a patch to pypi

1 Like

Wow this is a fantastic job! Now streamlit with this grid has enormous potential!

Maybe there is a small “bug”. If you pass simple CSS in cellStyle it doesn’t work. You have to pass CSS through JsCode function.

If you are not using JsCode, make sure to send CSS as a dictionary, e.g.

gb.configure_column("group", cellStyle={'color': 'red'})

Oh you are right, my fault.
I found that images work too!!!
This an example of the incredible potential of streamlit+aggrid

5 Likes

How did you manage to work with images?

You have to use the parameter cellRenderer in gb.configure_column. Then you create a javascript funcion to pass your image.
This is my code for the table. In my case I have a hide column name NATION_PATH where there is the path of the image that I use in LEAGUE column.

    image_nation = JsCode("""function (params) {
            var element = document.createElement("span");
            var imageElement = document.createElement("img");
        
            if (params.data.NATION_PATH) {
                imageElement.src = params.data.NATION_PATH;
                imageElement.width="20";
            } else {
                imageElement.src = "";
            }
            element.appendChild(imageElement);
            element.appendChild(document.createTextNode(params.value));
            return element;
            }""")
    gb.configure_column('LEAGUE', cellRenderer=image_nation)
1 Like

Blown away by that ag-grid integration @PablocFonseca, well done! :raised_hands:

JFYI, I stumbled upon this issue, not sure if that’s expected?

Setting were as follows:

Thanks,
Charly

I think this component (or component based on material UI)should be inbuilt into streamlit . The current method of displaying dataframe , when we have to display all data is not UI friendly

1 Like

Fixed! It was a bug on the demo.
Also, I just learned about React Components state on v 0.1.5. Check this another demo

2 Likes