Ag-Grid component with input support

@PablocFonseca Thanks for the this great package in streamlit
Can you please guide us, how we can add custom_css to the ag-grid tables ?
Ex - I want to change ‘blue’ color to the ‘red’ in ag-grid table, I tried the following code, but it didn’t
worked

gb = GridOptionsBuilder.from_dataframe(df)
grid_options = gb.build()
grid_return = AgGrid(df,
theme=‘blue’,
custom_css= {‘background-color’: ‘#ff0000’}
)

st.markdown(‘div.ag-header{background-color: #ff0000;}’, unsafe_allow_html=True)

Can you please suggest the correct way to change the existing theme color ?
Thank in advance

sis,
thank you for great example!
I would also update aggrid dataframe directly. Do you know any way to do so?

Has anyone here been able to successfully add new rows to a grid?

Hello

Share it here as it may interest some of you
I was able to use the sparkline cell renderer to include a progress bar inside my grid
Here how to configure the column and the 2 JS code :

gb.configure_column(‘PercentageProgress’, editable=True, type=[“numericColumn”, “numberColumnFilter”, “customNumericFormat”], precision=0, aggFunc=‘avg’, valueGetter=sparkline_data, cellRenderer=‘agSparklineCellRenderer’, cellRendererParams=sparkline_params)

sparkline_params = JsCode(“”"
function(params) {
return {
sparklineOptions: {
type: ‘bar’,
valueAxisDomain: [0.0, 100.0],
highlightStyle: {
fill: ‘rgb(236, 195, 11)’,
},
label: {
enabled: true,
placement: ‘outsideEnd’,
color: ‘black’,
fontSize: 10,
fontWeight: ‘bold’,
formatter: function (params) {
return parseFloat(params.value).toLocaleString(‘en’,{minimumFractionDigits: 0, maximumFractionDigits: 0});
},
},
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
valueAxisDomain: [0, 100],
axis: {
strokeWidth: 0,
},
tooltip: {
enabled: false,
},
formatter: function (params) {
const { yValue } = params;
return {
fill: yValue <= 20 ? ‘#e45c4b’ : yValue < 60 ? ‘#fdcf3d’ : ‘#74b683’,
};
},
}
};
};
“”")

sparkline_data = JsCode(“”"
function(params) {
return [parseInt(params.data.PercentageProgress)];
}
“”")

Result

image

Enjoy

3 Likes

you have an example onto this channel
I tried and worked like a charm :
example if you want to change the background color when hovering a cell :
custom_css={“.ag-row-hover”: {“background-color”: “red !important”}})

Hey @mkleinbort - did you ever find a fix here? I’ve been looking around for a while but haven’t found anything that shows a solution that makes the detail table dynamically change.

Hi @PablocFonseca , great job with Ag-grid component! Is the current component supports save and restore column/filter state? (JavaScript Data Grid: Column State)

Not yet. Planning for the next release

1 Like

@PablocFonseca Hi, I used to be able to display images and styling inside a cell using JScode() and then passing it to the cellrender argument but it now seems broken since the new update.
Any infos on how to do it now ?
Thanks :pray:

example:

img_render = JsCode("""function(params) { return  '<image width="70" height="70" src="' + params.value + '">'}""")
gb.configure_column('Image', cellRenderer=img_render, minWidth=85, maxWidth=85)

Looks like I added too many changes in my last update… I’m checking what happened, please use the previous version meanwhile…

No worries, take your time. I immediately reverted back to version 0.3.0 and it works fine for me. I just wasn’t sure if it was a bug or if there was just a new way to do this.
Good luck and thanks for your time.

Hello,
Is there a way to clear the selected row algorithmically?

I have a form that is getting its text fields from a user clicking an AgGrid row.
However when I submit the form the aggrid selection is still present, hence the form text inputs stay as-is, but I would like them to be blank.

In Aggid I see this command:

How can I apply deselectAll in Streamlit?

Thank you.

Ohhh, seems it may be an issue

Hi @LukeF, you could experiment to see if this works:

  1. I am assuming the following:
    a. you have a activated the single select option in AG grid
    b. your dataframe contains 2 cols: CODE & NAME (for the purpose of explanation)

  2. Find out the dataframe index of the AGgrid selection, using say…

    vcode = dta[“selected_rows”][0][‘CODE’]

    (where dta is your AG grid variable, CODE is a column in your underlying dataframe that contains unique values)

  3. use the vcode variable to find out the index / vertical position of the selected Ag grid row within the underlying pandas dataframe, using the standard pandas commands

  4. replace all the columns in the selected row of the AG grid with blank values (except the code col if not needed), using:
    dta[‘data’][‘NAME’][i] = “”

(where i = index found in step 3; do the same for other fields, if you have more fields than I have assumed)

  1. After blanking fields in the AGgrid in step 4, you can change the underlying data in the dataframe, as it will refresh on rerun, giving you the old data otherwise. To do this, use: your_df_variable = dta[‘data’]

  2. rerun the page / module with st.experimental_rerun()

Hope this works for you; alternatively, you can experiment with the jscode options of AG grid.

Maybe, someone who has actually had this usecase, could provide a more definite response.

Cheers

I just found out the issue with cellRenderers. It is related to ag-grid-react update to versions higher than 6.2.0. I just opened an issue #5427 and downgrading ag-grid-react on streamlit-aggrid v.0.3.2

1 Like

Thanks Shawn!
Unfortunately it didn’t solve my issue, but did motivate me to try a few other things, and I found a solution!

I created a new function that creates a new key for me

import random
def new_table_key():
    mykey = 'key_' + str(random.randrange(100000))
    st.session_state['mykey'] = mykey

This new key is used in my Aggrid call:

mykey = st.session_state['mykey']
with container:  
    rowchoice = AgGrid(df,gridOptions=gridOptions,
                       key=mykey,
                update_mode= GridUpdateMode.SELECTION_CHANGED,
                reload_data=False,
                    height = 500,
                    allow_unsafe_jscode=True,
                    )

and when I press submit of the form I am using, on_click calls the new function

submitted = col1.form_submit_button("Submit",on_click = new_table_key)

Thanks!

1 Like

Hello,

When I edit a cell in the grid, based on some functions other cells in my data changes but these changes are not shown in grid unless i change the key of grid. But I do not want to change the key because of the refresh. Is there any solution to this?

For example:
image
I edit VAT and based on this change SCT is updated. I want to show the updated data in the grid without changing the key ( refreshing the page). My data originally have too many columns so virtual column and changing key are not very good solutions

Hi @imClumsyPanda did you manage to add a Date picker in the cells?

Not yet. Have you got any idea?

hi @C45513 did you manage to implement it?