Ag-Grid component with input support

🧩 Custom Components streamlit-aggrid
81

@PablocFonseca
This is a great improvement to Streamlit, I’m sure to use it, thank you.
FYI, I have noticed a small issue in your example.
If I set it to MODEL_CHANGED and the mode is FILTERED_AND_SORTED, then if the table is filtered to return 1 row, it throws an exception - AttributeError: ‘StringArray’ object has no attribute ‘size’.

1 Like
82

I could not reproduce this error here… The code below is ok for me;

import streamlit as st
import numpy as np
import pandas as pd

from st_aggrid import AgGrid, DataReturnMode, GridUpdateMode, GridOptionsBuilder

@st.cache()
def get_data():
    df = pd.DataFrame(
        np.random.randint(0, 100, 100).reshape(-1, 5), columns=list("abcde")
    )
    return df

df = get_data()
AgGrid(df, key='grid1')
AgGrid(df,  key='grid2')
84

I have a problem with a new dataframe.
The error is " SyntaxError: Unexpected token N in JSON at position 1829
But the normal st.dataframe works without problem. The first is the normal st.dataframe, the error is from aggrid with the same dataframe.

image
image833×382 14.1 KB

I found that the problem are the rows with a nan value. Is it a bug?

85

Probably… I just reproduced it here. I’ll fix it and upload a new version soon.

86

I was wondering if someone had tried to use the json inject to change the format of cells that have been modified.

I would like to be able to color whatever cell that has just been modified by the user.

Any easy way to do that?

87

Check this example

I set the cell to flash for a long time on grid change events.
It may be better to change cell style instead of flashing in your application. Let me know if it works!

88

That’s beautiful!

89

Hello Pablo, with the new version 0.18 I have this error: ModuleNotFoundError: No module named ‘simplejson’

90

I’m still struggling with dependencies and pip deployment… Thanks for reporting! I’ll update in the next version.

91

I also had this issue multiple times. When I switch to another browser or close and reopen the page/browser, it would be resolved. But that would be perfect if we can find a permanent solution to this.

92

Is there a way to set the row height?

93

Check https://www.ag-grid.com/documentation/react/row-height/

on the gridOptions set a rowHeigth key.
If you’re using the gridOptionsBuilder it’s something like:

gb = gridOptionsBuilder.from_dataframe()
gb.configure_grid_options(rowHeight=50)
gridOptions = gb.build()
1 Like
94

Thanks. That’s amazing.

95

@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
96

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
97

@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
98

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

99

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
100

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,
)

101

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