Why can't I make a interactive table?

My coding is below.
with form, table could be interactive, and the table is deleted.
Why?
How to solve?

import streamlit as st
import pandas as pd

with st.form(key = “file_form”):
upload_file = st.file_uploader(“ファイルアップロード”, type=‘html’)
submit_btn = st.form_submit_button(“OK”)
cancel_btn = st.form_submit_button(“キャンセル”)

if submit_btn:
df = pd.read_html(upload_file, header = 0, index_col = 0)
df = df[0]

insert_cols = ["DAR",
               "Chain",
               "calculate"
]

for column_name in insert_cols:
    df.insert(loc = 0, column = column_name , value= None)

st.data_editor(df,
             column_config={"Chain": st.column_config.SelectboxColumn("Chain", options=["H","L"]),
                            "DAR": st.column_config.SelectboxColumn("DAR", options=["1","2","3","4"]),
                            "calculate": st.column_config.CheckboxColumn("calculate", default=False),                                          
                            }, 
            )

Hello @doifu ,

Here’s how you might approach creating an interactive table with file upload functionality:

  1. First, ensure you have streamlit-aggrid installed in your environment.
pip install streamlit-aggrid
  1. Since st.data_editor does not exist, you will need to adjust your approach.
import streamlit as st
import pandas as pd
from st_aggrid import AgGrid, GridOptionsBuilder

with st.form(key="file_form"):
    upload_file = st.file_uploader("ファイルアップロード", type='html')
    submit_btn = st.form_submit_button("OK")
    cancel_btn = st.form_submit_button("キャンセル")

if submit_btn and upload_file is not None:
    df = pd.read_html(upload_file, header=0, index_col=0)[0]

    # Insert columns with default values as an example
    df["DAR"] = None
    df["Chain"] = None
    df["calculate"] = False

    # Create a grid options builder
    gb = GridOptionsBuilder.from_dataframe(df)
    gb.configure_default_column(editable=True, groupable=True)

    # Customize the AgGrid display
    gridOptions = gb.build()

    # Display the dataframe with AgGrid
    AgGrid(df, gridOptions=gridOptions, enable_enterprise_modules=True)

# Note: Direct editing with specific widgets like Selectbox or Checkbox inside the grid requires custom cell renderers.

Hope this helps!

Kind Regards,
Sahir Maharaj
Data Scientist | AI Engineer

P.S. Lets connect on LinkedIn!

➤ Want me to build your solution? Lets chat about how I can assist!
➤ Join my Medium community of 30k readers! Sharing my knowledge about data science and AI
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ 100+ FREE Power BI Themes: Download Now

1 Like

Hey @sahirmaharaj,

Just wanted to clarify that st.data_editor does exist.

If you’re using ChatGPT to generate forum answers, please double-check that your answers are correct before posting them – our docs are a great place to start.