Add new row in agr grid on click of a button

[dssingh17]

I want to append a row in existing ag grid with some default value (coming as list of list from DB) in Javascript. Can someone pl help me.

[dataprofessor]

Hi @dssingh17

I came up with the following app that adds a new row to Aggrid upon click of a button. Here, we’re using Session State to allow the app to have memory of rows added to the DataFrame:

Code

# Solution to https://discuss.streamlit.io/t/add-new-row-in-agr-grid-on-click-of-a-button/42432

import streamlit as st
import numpy as np
import pandas as pd
from st_aggrid import AgGrid

# Set page width
st.set_page_config(layout='wide')

# Load a CSV file
@st.cache_data
def gen_data():
    return pd.DataFrame(
        np.random.randn(4, 5),
        columns=('col %d' % i for i in range(5)))
df = gen_data()

# Initiate session state
if "data" not in st.session_state:
    st.session_state.data = gen_data()

# Get input text values
st.header('Input')
new_row = st.text_input("Enter new row values separated by commas")
st.code('1, 2, 3, 4, 5')

# Convert input values to a list
new_row_list = new_row.split(',')

# Add a new row to the DataFrame after clicking a button
if st.button("Add row"):
    st.session_state.data.loc[len(st.session_state.data)] = new_row_list
    #df3 = pd.concat([df, df2], axis=1)
    # Display the DataFrame using AgGrid
    AgGrid(st.session_state.data)
else:
    st.header('DataFrame')
    # Display the DataFrame using AgGrid
    AgGrid(st.session_state.data)

Demo of App

Hope this helps!

Best regards,
Chanin