Ag-Grid component with input support

Thanks. That’s amazing.

@PablocFonseca
When I updated the package today, I realized that Streamlit-Aggrid needs “simplejson”, and it was not being installed using “pip --upgrade” automatically. Please check if you have put this package in the requirement file.

1 Like

Hi @PablocFonseca

I’m still enjoying your Streamlit port of Ag-grid so much :slight_smile:

However I’m now looking for a few more advanced options, and I’m not sure if it would be possible to add these, namely:

  • Clickable URL links (most important to me)*
  • Coloured labels
  • Larger row sizes by default
  • Image thumbnails insertion in row

Not sure whether I’d need to tinker with the JS code to achieve the above, or if there are an easier (as in Pythonic :)) way to achive this.

Thanks in advance,
Charly

1 Like

@PablocFonseca I think you could add simplejson inside the install_requires part of the package’s setup.py so any user upgrading get the package installed automatically (check out mine)

Fanilo

1 Like

I put my program on Amazon server, but now when try to run I have this error:

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?

On local machine the program works perfectly and the program without aggrid works on server.
I try to reinstall aggrid and streamlit but I have always the same error.

Aggrid version 0.1.8
Streamlit version 0.75

All these features are already possible using JSCode:

  • Clickable URL put the URL in one of the fields:

      link_jscode = JsCode("""
      function(params) {
      	var element = document.createElement("span");
      	var linkElement = document.createElement("a");
      	var linkText = document.createTextNode(params.value);
      	link_url = params.value;
      	linkElement.appendChild(linkText);
      	linkText.title = params.value;
      	linkElement.href = link_url;
      	linkElement.target = "_blank";
      	element.appendChild(linkElement);
      	return element;
      };
      """)
    
      gb.configure_column("url", cellRenderer=link_jscode)
    
  • Larger row size:

gb.configure_grid_options(rowHeight=90)

  • Image thumbnail: Put the image URL in one field:

    image_jscode = JsCode("""
    function(params) {
    image_url = “https://<IMGAE_URL>/” + params.value;
    return {
    ‘background-image’:‘url("’ + image_url + ‘")’,
    ‘background-repeat’: ‘no-repeat’,
    ‘background-position’: ‘center’,
    ‘color’: ‘transparent’
    }
    };
    “”")
    gb.configure_column(“image”, cellStyle=image_jscode)

1 Like

Hi,
When displaying the grid, why is the ‘width’ parameter not working ?
I’m unable to adjust the grid width …

grid_response = AgGrid(
df,
gridOptions=gridOptions,
height=grid_height,
width= ‘500%’,
data_return_mode=return_mode_value,
update_mode=update_mode_value,
fit_columns_on_grid_load=False,
allow_unsafe_jscode=True,
enable_enterprise_modules=False,
)

grid will always use 100% of streamlit width. Try setting it to wide mode.

I’m having trouble to reproduce this here. Maybe it is some timeout on the streamlit side? Depending on the size of your data, grid can take a while to load. What’s your use case?

v 0.1.9 is out. Fixes some bugs.

Thanks a lot.
But ideally I try to get my grid’s size adjusted perfectly to my dataframe’s size …
Is it possible though ?

I believe a combination of column width and streamlit beta_columns may do the layout job.

Thanks Pablo.

Sorry Pablo to bother again: even though Ag-Grid is working ok on my personal computer, I’m facing issues with my corporate laptop:

ModuleNotFoundError: No module named ‘st_aggrid’

Even after installing ‘streamlit-aggrid’ with pip, I can not run st_aggrid at all …
Any thoughts about this ?

whats the output of your pip list? Are you sure package is installed? Are you using virtual environments?

=> ‘Requirement already satisfied: streamlit-aggrid’

No I’m not using virtual environments.

I’m experiencing a similar issue. Actually even stranger because:

  1. it works all fine on my local machine
  2. it works all fine for me running the app on a docker container on a server
  3. my colleague experiences this issue while accessing the app from 2.

I suspect this issue is related to streamlit component framework… the grid serializes all data as json… maybe if it is too heavy, it triggers some kind of timeout? Whats the size of the data you’re rendering? A little help from the devs would be nice!

I don’t think it’s a size issue in my case because it’s rendering 3-4 rows. And unfortunately I can’t reproduce the error because it’s been working fine for me. But not for other people. Very strange.

I’m having trouble reproducing it as well. It never happened to me