How to embed form within a table

[Gurusewak]

Hello,

I am trying to build an app with Streamlit for a RAG solution with Pinecone Assistant. One of the screen allows the user to view the files uploaded to Assistant and gives option to delete it.

I have a table that shows the details of the files and I’m trying to create a form in one of the table column that would have a hidden field and a button to delete the file.

I am not able to embed this form within the table column. It shows outside of the table.

Any ideas how this can be accomplished?

Below is the code that I have

 html = '''<table class="center">
        <thead>
            <tr>
                <th>File Name</th>
                <th>File Status</th>
                <th>File Size</th>
                <th>Create On</th>
                <th>Update On</th>
                <th>File Id</th>
                <th>Action</th>
            </tr>
        </thead>'''

st.title("Delete File")
## Get the list of files from Pinecone
filelist = assistant.list_files() 

st.write(f"Below is the list of files in the database:")

## Look with the filelist and build the HTML table
for file in filelist:
    html +=f'''
        <tr>
            <td>{file.name}</td>
            <td>{file.status}</td>
            <td>{file.size}</td>
            <td>{file.created_on[0:19].replace('T',' ')}</td>
            <td>{file.updated_on[0:19].replace('T',' ')}</td>
            <td>{file.id}</td>
            <td>
        '''
    form = st.form(key=f'{file.id}')
    fileid = form.text_input(label=f'File Id: ', # {file.name}',
                value=f'{file.id}',
                disabled= True,
                label_visibility= "visible")
    submit = form.form_submit_button(label='', help='Delete this file',icon=":material/delete:")
    html += f'{form}</td></tr>'
html += "</table>"
st.html(body=html)
if submit:
    st.write(f'File deleted. File Id: {fileid}')
    assistant.delete_file(file_id=fileid)

[Encrypt]

In Streamlit, you can’t combine custom HTML and Streamlit components together. Instead, you could utilize a data editor with a checkbox column to delete a file. Whenever user will press on checkbox, the file and its corresponding row from the table will be deleted.

import streamlit as st


# Mock the File class
class File:
    def __init__(self, name, status, size, created_on, updated_on, id):
        self.name = name
        self.status = status
        self.size = size
        self.created_on = created_on
        self.updated_on = updated_on
        self.id = id

# Mock the Assistant class
class Assistant:
    def __init__(self):
        self.files = []
        self.file_id = 0

    def list_files(self):
        self.files = [
            File("file1", "active", "1MB", "2021-10-01T12:00:00", "2021-10-01T12:00:00", "1"),
            File("file2", "active", "2MB", "2021-10-02T12:00:00", "2021-10-02T12:00:00", "2"),
            File("file3", "active", "3MB", "2021-10-03T12:00:00", "2021-10-03T12:00:00", "3"),
            File("file4", "active", "4MB", "2021-10-04T12:00:00", "2021-10-04T12:00:00", "4"),
        ]
        return self.files

    def delete_file(self, file_id):
        self.files = [file for file in self.files if file.id != file_id]

assistant = Assistant()

st.title("Delete File")
filelist = assistant.list_files()

st.write("Below is the list of files in the database:")

# Create a list of dictionaries to display in the table
file_data = []
for file in filelist:
    file_data.append({
        "File Name": file.name,
        "File Status": file.status,
        "File Size": file.size,
        "Created On": file.created_on.replace('T', ' '),
        "Updated On": file.updated_on.replace('T', ' '),
        "File Id": file.id,
        "Delete": False
    })

# Display the table
edited_data = st.data_editor(file_data)

# Check if the user has made any changes
if edited_data:
    for i, row in enumerate(edited_data):
        if row["Delete"]:
            st.write(f'File deleted. File Id: {row["File Id"]}')
            assistant.delete_file(file_id=row["File Id"])
            st.rerun()

[Gurusewak]

That is perfect. Appreciate your help with this!!