Add Filled Row to streamlit Aggring

🧩 Custom Components streamlit-aggrid
1

Dear friends,

I found a way how to add and delete rows here in this discussion
Add and Delete rows in streamlit aggrid

It works fine for me with on little question remaining.
How can I change the code to have a pre-filled added row, meaning not a empty row should be added but a prefilled, with the message “Added Row”

My code looks like this

import streamlit as st
import pandas as pd
from st_aggrid import GridOptionsBuilder, AgGrid, JsCode

df=pd.DataFrame({"Name":["Albert","Max","John"],"Family Name":["Einstein","Miller","Rambo"]})

gb = GridOptionsBuilder.from_dataframe(df)

string_to_add_row = "\n\n function(e) { \n \
let api = e.api; \n \
let rowIndex = e.rowIndex + 1; \n \
api.applyTransaction({addIndex: rowIndex, add: [{}]}); \n \
    }; \n \n"




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_add = JsCode('''
    class BtnAddCellRenderer {
        init(params) {
            this.params = params;
            this.eGui = document.createElement('div');
            this.eGui.innerHTML = `
             <span>
                <style>
                .btn_add {
                  background-color: limegreen;
                  border: none;
                  color: white;
                  text-align: center;
                  text-decoration: none;
                  display: inline-block;
                  font-size: 10px;
                  font-weight: bold;
                  height: 2.5em;
                  width: 8em;
                  cursor: pointer;
                }

                .btn_add :hover {
                  background-color: #05d588;
                }
                </style>
                <button id='click-button' 
                    class="btn_add" 
                    >&CirclePlus; Add</button>
             </span>
          `;
        }

        getGui() {
            return this.eGui;
        }

    };
    ''')
    

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"
                    >&#128465; Delete</button>
             </span>
          `;
        }

        getGui() {
            return this.eGui;
        }

    };
    ''')    



cellsytle_jscode_Name = JsCode("""
                            function(params){
                                if (params.value.includes('Violation of Rule')) {
                                    return {
                                        'color': 'red', 
                                        'backgroundColor': 'white',
                                    }
                                }
                            
                            
                            if (params.value.includes('Missing')) {
                                return {
                                    'color': 'red', 
                                    'backgroundColor': 'white',
                                }
                            }
                            
                                                                    
                                if (params.value.length>6) {
                                    return {
                                        'color': 'red', 
                                        'backgroundColor': 'white',
                                    }
                                }                                    
                                                                    
                            
                            
                                if (params.value.length<=6) {
                                    return {
                                        'color': 'red', 
                                        'backgroundColor': 'white',
                                    }
                                } 
                            
                            if (params.value=="") {
                                return {
                                    'color': 'black', 
                                    'backgroundColor': 'yellow',
                                }
                            }                                    
                            
                            
                            }
                            
                            """)


gb.configure_column('', headerTooltip='Click on Button to add new row', editable=False, filter=False,
                            onCellClicked=JsCode(string_to_add_row), cellRenderer=cell_button_add,
                            autoHeight=True, wrapText=True, lockPosition='left')

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")
df=grid_return["data"]

Any idea how to modify the JS code part?
I really tried many ways, but really not successfull. Any help is more than appreciated

2

@Isaak_Saba. I was able to add prefilled row with the following:

        parameters = ["AIRPORT1", "AIRPORT2", "VALUE"]
        values = ["INPUT STATION", "INPUT STATION", 0]
        string_dict = {parameters[i]: values[i] for i in range(len(parameters))}

And now add this string_dict variable to the string_to_add_row code you had above:

"\n\n function(e) { \n \
    let api = e.api; \n \
    let rowIndex = e.rowIndex + 1; \n \
    api.applyTransaction({addIndex: rowIndex, add: [" + str(string_dict) + "]}); \n \
        }; \n \n"

If this doesn’t work let me know and I will prepare an example for you.