Ag-Grid component with input support

I didn’t get your question…
Do you mean selected rows by default when grid loads?

1 Like

yes, that’s what I meant. I’ve found node.setSelected() after replied to you, but haven’t figured out how to use it.

Same situation for me.
This is a big problem :disappointed_relieved: :disappointed_relieved: :disappointed_relieved:

1 Like

@PablocFonseca A hamburger button is hidden by default. I mean the hamburger button next to each column name. Is there any way to make it visible by default? Thank you in advance for the info!

I have seen this happen with components that are run in dev mode. As the error message implies it’s better to run a release (compiled) build. It’s unfortunate there isn’t a way to get the browser to reload the iframe.

1 Like

You can also wrap text by using the following:

"resizable": True,
"autoHeight": True,
"wrapText": True

This can be used in the default column defs or in a specific column definition.

Hi Pablo,

I’m wondering may I use the api mentioned in the pic with streamlit-aggrid?

How to run a release (compiled) build? What needs to be done for that? Thank you in advance for the info!

@Andrei_Volkau
Hi, can we define the table height and width percentage or height and width when we use AgGrid(df)?
Besides, if the table header’s font, color and background can be set, this compoment will be more wonderful.

2 Likes

Simply build and then start the component, instead of running it in dev mode. Check your packages.json for for the commands. Not sure how this is handled in Streamlit sharing, but in Heroku it’s done for you. Also in Heroku I’m running the Streamlit app and frontend in separate (free) dynos (i.e. as two separate apps).

Thank @PablocFonseca so much for your component it is really amazing.

One question I would like to ask, when you enable the grid side bar, you have the possibility to remove columns from your columns from your table, but I see that the data of the aggrid object doesn’t change. There is any possibility in which I am able to retrieve those columns in order to filter the data frame afterwards?

Again thank you so much for the component

Is it possible grouping columns?

I see this example:
image

I try something

gb.configure_column(‘Athlete Details’, children=[{‘field’: ‘athlete’, ‘field’: ‘age’, ‘field’: ‘country’}])

but it doesn’t work. It shows the group Athlete Details but then only the last children column
image

This is not implemented… I’ll put some work on it later this week

Is it possible to be able to paste in a number of updates to a column at once? I’m making an app where users can update a small number of values, and this would be a nice thing for them to be able to do

Hi @PablocFonseca. Wow such a nice library! Thanks

Wondering if we can easily color whole rows depending on values in a single columen:

cellsytle_jscode = JsCode(“”"
function(params) {
if (params.value == ‘True’) {
return {
‘color’: ‘white’,
‘backgroundColor’: ‘green’
}
}
if (params.value >= 50) {
return {
‘color’: ‘white’,
‘backgroundColor’: ‘green’
}
}
else {
return {
‘color’: ‘black’,
‘backgroundColor’: ‘white’
}
}
};
“”")

gb.configure_column(“prediction”, cellStyle=cellsytle_jscode)
gb.configure_column(“confidence_score”, cellStyle=cellsytle_jscode)

I see how to color columns based on values, but how can I color the whole row?

Thanks!

2 Likes

Hi @PablocFonseca , this is so great! I’ve been implementing the aggrid as an input form on the app. I have a question. How to persist the aggrid state when the user enters the text in the ag-grid cell? As soon as I move to the next cell, the app will re-run, and the text that was entered before has been deleted.

Check this example streamlit-aggrid/fixed_key_example.py at main · PablocFonseca/streamlit-aggrid · GitHub

1 Like

Thank you! I will look through other examples.py that you had. Thanks for the response!

Greetings!
I’m having trouble getting selection to work. Considering the main example file has it working, and me replacing the dataframe in it with the one I’ve made makes selection stop working, are there any undocumented formatting expectations for the dataframe, for row selection to work properly?
Am I missing any options, maybe?..
Here’s what I’m doing, just was trying to see if it’d even display selection:

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_default_column(editable=False, resizable=True,
sorteable=True)
gb.configure_selection(“single”, use_checkbox=False)
grid_options = gb.build()
grid_response = AgGrid(
df,
gridOptions=grid_options,
width=‘100%’,
fit_columns_on_grid_load=True
)
df = grid_response[‘data’]
selected = grid_response[‘selected_rows’]
selected_df = pd.DataFrame(selected)
st.dataframe(selected_df)
st.write(grid_options)

The result is that I get the effect of selection being on (i.e. I can click on rows), but it doesn’t actually seem to do anything. I’m puzzled.
If it helps, most of the columns in my DF carry string data. I checked the gb options dict, this results in all of the string columns having empty type in coldefs, but I’m not sure how to fix that, or if that’s even a problem, since some columns in example also have empty type.

Hey @PablocFonseca, I’m very grateful for this project. I have been working on a project that we would simply not have been able to get to a usable stage so quickly without this. Thank you so much. I have a question about grouping - your grid_options_builder.py has various references to row grouping and group selection, but I am unsure how to structure my dataframe so that this actually works and properly groups things together that have the same id etc.

Could you please advise? Thanks again.