Ag-Grid component with input support

🧩 Streamlit Components streamlit-aggrid
#58

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)

image
image1567×887 72.2 KB

#59

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

1 Like
#60

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

#61

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

1 Like
#62

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.

#63

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

gb.configure_column("group", cellStyle={'color': 'red'})
1 Like
Display images in AgGrid table
Display images in AgGrid table
Display images in AgGrid table
#64

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

image
image1145×839 47.1 KB

6 Likes
Align Columns Height
#65

How did you manage to work with images?

1 Like
#66

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)
3 Likes
#67

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

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

image
image769×266 7.58 KB

Setting were as follows:

image
image277×926 21.2 KB

Thanks,
Charly

#68

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

2 Likes
#69

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
#70
1 Like
#71

Wonderful Job man!

1 Like
#72

Ace! Thanks Pablo!

#73

Great job, Pablo!! Btw is there any documentation to follow when using this awesome component?

#74

Wonderful! Good job Pablo! :+1:
Now I’m trying to use Grid Events on the table…for example click on a cell and open a popup…but this does not seem possible for now. Do you have a solution? Here the docs for events https://www.ag-grid.com/documentation/angular/grid-events/
Thanks in advance

#75

I know that some grid features,such as csv downloading for instance, doesn’t work bc the grid is within an iframe and browsers have security policies in place. Maybe this is the case? Try using console.log first to see if your event is fired… if u want to share your code, send me the link and I can take a look later this week.

1 Like
#76

Updated streamlit share link:

https://share.streamlit.io/pablocfonseca/streamlit-aggrid/main/examples/example.py

1 Like
#77

Your app is having trouble loading the st_aggrid.agGrid component.

(The app is attempting to load the component from * , and hasn’t received its “streamlit:componentReady”* message.)

  • If this is a development build, have you started the dev server?
  • If this is a release build, have you compiled the frontend?

My version is the updated v0.16 and streamlit 0.73
this happen when i dump the dataframe to the aggrid like this:

ag_grid(df)

ag_grid(df)

ag_grid(df)

formating one single have no problem so far, but consecutive transform will raise the “warning” message

1 Like