St.data_editor doesn't work with st.button

Using Streamlit
1

Summary

Hello.
I have a st.data_editor menu and it works fine.

The problem comes when I want to add st.button before ones can edit the data on st.data editor. Whenever I try to edit the data, it disappears as if it doesn’t stored on st.session_state.

I think there’s something I miss on the st.session_state or the key. Also when I want to add the key on st.button it says that it’s supported.

Steps to reproduce

Summary Code Difference :

  • if st.button("Edit Data"):

Work Code Snippet:


# Configuring Data Engineering Menu
if menu_selected == "Data Engineering":

    # Upload data variable
    uploaded_file = st.file_uploader("Choose a file to upload for training data",
                                     type="csv",
                                     help="The file will be used for training",
                                     )
    # Confiuring uploaded data
    if uploaded_file is not None:

        # Uploading Dataframe
        dataframe = get_data(uploaded_file)

        # Initiating data on session state
        if "data" not in st.session_state:
            st.session_state.data = dataframe

        # Callback function to delete records in data
        def callback():
            edited_rows = st.session_state["data_editor"]["edited_rows"]
            rows_to_delete = []

            for idx, value in edited_rows.items():
                if value["x"] is True:
                    rows_to_delete.append(idx)

            st.session_state["data"] = (
                st.session_state["data"].drop(
                    rows_to_delete, axis=0).reset_index(drop=True)
            )

        # Configuring column to delete
        columns = st.session_state["data"].columns
        column_config = {column: st.column_config.Column(
            disabled=True) for column in columns}
        modified_df = st.session_state["data"].copy()
        modified_df["x"] = False

        # Moving delete column to be the first
        modified_df = modified_df[["x"] +
                                  modified_df.columns[:-1].tolist()]

        # Initating Data Editor
        st.data_editor(
            modified_df,
            key="data_editor",
            on_change=callback,
            hide_index=True,
            column_config=column_config,
        )

    else:
        st.write("Please upload any data to edit.")

Doesn’t Work Code Snippets

# Configuring Data Engineering Menu
if menu_selected == "Data Engineering":

    # Upload data variable
    uploaded_file = st.file_uploader("Choose a file to upload for training data",
                                     type="csv",
                                     help="The file will be used for training",
                                     )
    # Confiuring uploaded data
    if uploaded_file is not None:

        # Uploading Dataframe
        dataframe = get_data(uploaded_file)

        if st.button('Edit Data'):

            # Initiating data on session state
            if "data" not in st.session_state:
                st.session_state.data = dataframe

            # Callback function to delete records in data
            def callback():
                edited_rows = st.session_state["data_editor"]["edited_rows"]
                rows_to_delete = []

                for idx, value in edited_rows.items():
                    if value["x"] is True:
                        rows_to_delete.append(idx)

                st.session_state["data"] = (
                    st.session_state["data"].drop(
                        rows_to_delete, axis=0).reset_index(drop=True)
                )

            # Configuring column to delete
            columns = st.session_state["data"].columns
            column_config = {column: st.column_config.Column(
                disabled=True) for column in columns}
            modified_df = st.session_state["data"].copy()
            modified_df["x"] = False

            # Moving delete column to be the first
            modified_df = modified_df[["x"] +
                                      modified_df.columns[:-1].tolist()]

            # Initating Data Editor
            st.data_editor(
                modified_df,
                key="data_editor",
                on_change=callback,
                hide_index=True,
                column_config=column_config,
            )

    else:
        st.write("Please upload any data to edit.")

Your help will be much appreciated!
Thank you!

2

I think your code is fine, except that you are depending on the button being stateful: 10 most common explanations on the Streamlit forum

A quick fix is to replace the button with a checkbox

        if st.checkbox('Edit Data'):

And then the second snippet seems to work

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.