How to Update Streamlit AgGrid?

Question

I want to update the Streamlit AgGrid by adding an empty line when an external button is pressed. But instead of adding a row, a completely different grid is created with empty row. I would be very happy if you tell me where I am wrong or how I can fix it.

The codes are as below:

st.header("This is AG Grid Table")

df= pd.read_csv('data.csv')
gd= GridOptionsBuilder.from_dataframe(df)
gd.configure_pagination(enabled=True)
gd.configure_default_column(groupable=True)

gridOptions = gd.build()
grid_table = AgGrid(df,
                    gridOptions=gridOptions,
                    fit_columns_on_grid_load=True,
                    height=500,
                    width='100%',
                    theme="streamlit",
                    update_mode=GridUpdateMode.MODEL_CHANGED,
                    reload_data=True,
                    allow_unsafe_jscode=True,
                    )

button = st.sidebar.button("Add New Line")

if button:
    data = [['', '', 0]]
    df_empty = pd.DataFrame(data, columns=['CollaboratorName', 'Location', "HourlyRate"])
    df = pd.concat([df, df_empty], axis=0, ignore_index=True)
    gd= GridOptionsBuilder.from_dataframe(df)
    gridOptions = gd.build()

    grid_table = AgGrid(df,
                        gridOptions=gridOptions,
                        #enable_enterprise_modules=True,
                        fit_columns_on_grid_load=True,
                        height=500,
                        width='100%',
                        theme="streamlit",
                        update_mode=GridUpdateMode.MODEL_CHANGED,
                        reload_data=False,
                        allow_unsafe_jscode=True,
                        )

When I run the program, the result is as follows:
enter image description here

Asked By: Hilal

||

Source

Answer 1

This one is wrong

df_empty = pd.DataFrame(data, columns=['Column1', 'Column2', "Column3"])

Use this.

df_empty = pd.DataFrame(data, columns=['CollaboratorName', 'Location', "HourlyRate"])

Your program always execute ‘df= pd.read_csv(‘data.csv’)’ from the top. So your add new line is useless when streamlit runs the code from top to bottom.

The trick is to save your new add line to csv.

Example.

if button:
    data = [['', '', 0]]
    df_empty = pd.DataFrame(data, columns=['CollaboratorName', 'Location', "HourlyRate"])
    df = pd.concat([df, df_empty], axis=0, ignore_index=True)
    df.to_csv('data.csv', index=False)

When streamlit runs the code from top to bottom again, your new line will be shown because it is already saved in csv.

So the change is only this.

button = st.sidebar.button("Add New Line")

if button:
    data = [['', '', 0]]
    df_empty = pd.DataFrame(data, columns=['CollaboratorName', 'Location', "HourlyRate"])
    df = pd.concat([df, df_empty], axis=0, ignore_index=True)
    df.to_csv('data.csv', index=False)

Output

Answered By: ferdy

How to Update Streamlit AgGrid?

Question:

Answers:

Output