Dear all.
I’me new on this forum, and sorry If I make some mistakes.
I have one question and It’s about using Python, Streamlit and Aggrid.
In the previous days, I’ve tried to make some code to enable users to delete a row in Aggrid table, and to update that new state (state without deleted row) in a Dataframe saved in local folder. But, when I check an row, click delete button, row disapear in aggrid table, but after reload of streamlit page everything back in the state as before deleting row (deleted row is in table again). Also, the new state (state without deleted row) isn’t saved in Dataframe in local folder. Can you pls check my code bellow to see what could be a problem?
Also, what is the syntax to enable user to update an row in aggrid table, and also to save it to Dataframe in local folder also?
Thx in advance,
best regards,
Adnan
Here is a code:
import js as js
import pandas as pd
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder, JsCode, GridUpdateMode
file_dir = r'C:\Users\....\'
file_name = 'Wi_Fi_DB.xlsx'
filepath = f"{file_dir}/{file_name}"
def display_table(df: pd.DataFrame) -> AgGrid:
sel_mode = st.selectbox('Choose row or rows', options=['single', 'multiple'])
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection('single', use_checkbox=True)
gb.configure_selection(selection_mode=sel_mode, use_checkbox=True)
string_to_delete = "\n\n function(e) { \n \
let api = e.api; \n \
let sel = api.getSelectedRows(); \n \
api.applyTransaction({remove: sel}); \n \
}; \n \n"
cell_button_delete = JsCode('''
class BtnCellRenderer {
init(params) {
console.log(params.api.getSelectedRows());
this.params = params;
this.eGui = document.createElement('div');
this.eGui.innerHTML = `
<span>
<style>
.btn {
background-color: #F94721;
border: none;
color: white;
font-size: 10px;
font-weight: bold;
height: 2.5em;
width: 8em;
cursor: pointer;
}
.btn:hover {
background-color: #FB6747;
}
</style>
<button id='click-button'
class="btn"
>🗑 Delete</button>
</span>
`;
}
getGui() {
return this.eGui;
}
};
''')
gb.configure_column('Delete', headerTooltip='Click on Button to remove row',
editable=False, filter=False, onCellClicked=JsCode(string_to_delete),
cellRenderer=cell_button_delete,
autoHeight=True, suppressMovable='true')
gb.configure_default_column(editable=True)
gb.configure_selection(use_checkbox=True, selection_mode="multiple")
grid_options = gb.build()
grid_return = AgGrid(df, gridOptions=grid_options, allow_unsafe_jscode=True, theme="streamlit")
with st.form(file_name):
if JsCode(string_to_delete):
df = grid_return["data"]
df = df.append(df, ignore_index=True)
df.to_excel(filepath, index=False)
df = pd.read_excel("Wi_Fi_DB.xlsx")
st.info("Select a row to remove it")
response = display_table(df)
df.to_excel("Wi_Fi_DB.xlsx", index=False)
… do you have any other proposal how to make this code to work? /thx