How to make streamlit-aggrid dataframe editable and exportable as csv?


I need to load a csv as a dataframe into streamlit-aggrid. I have some code that changes the cell colors based on some condition and then I want to edit the cells in the dataframe and export it as a csv or excel file.

Steps to reproduce

Code snippet:

import os

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

CSV_DIR_PATH = "../prace_files/"

file_list = []
for filename in tqdm.tqdm(os.listdir(CSV_DIR_PATH)):
    if filename.endswith('.csv'):

df = pd.read_csv(CSV_DIR_PATH + file_list[0])
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection('multiple', use_checkbox=True, groupSelectsChildren="Group checkbox select children")

cellstyle_jscode = JsCode("""
 function(params) {
     if ( == 2011) {
         return {
             'color': 'red',
             'backgroundColor': 'green'
     } else {
         return {
             'color': 'black',
             'backgroundColor': 'red'
gb.configure_column("year", cellStyle=cellstyle_jscode)
gridOptions =

grid_response = AgGrid(
    theme='blue',  # Add theme color to the table
new_df = grid_response['data']
selected = grid_response['selected_rows']
df = pd.DataFrame(selected)

Expected behavior:

I want to be able to edit the cells. But I cannot, can’t click into them, write or do anything with them with the current code. The colors don’t stay changed when I export the data to csv or excel.

Actual behavior:

Colors are being changed correctly based on the condition inside the browser view, but if i export it, the colors won’t stay changed.

1 Like

Thanks, @pe-hy!

Could you try inserting this code snippet before your cellstyle_jscode line?

It should make the cells editable in the Streamlit AgGrid table.

gb.configure_default_column(groupable=True, value=True, enableRowGroup=True, aggFunc='sum', editable=True)

Please let me know if that works,


Thank you, that solves the problem of editable cells, although I’m unsure what groupable, value, enableRowGroup or aggFunc do?

1 Like

These are not compulsory for what you are after, yet they may come in handy! :slight_smile:

Here’s the ag-grid doc reference to check what these elements do:

I hope that helps! :blush:


Appreciate it. :slight_smile: If you have any clue on how to work with exporting the dataframe to excel with changed colors based on that javascript code, i’d appreciate it as well!

Thank you.

I’m not sure how to do that one.

You could do it with HTML, but I don’t think it’s possible to export color values directly to Excel.

You may want to create a separate ticket for that question and/or reach out to @PablocFonseca, the creator of the component, as he may know a workaround for this.

Good luck and happy Streamlit’in! :balloon:


No worries, Charly. Was happy to talk to you.

Take care!

1 Like

You’re welcome! :slight_smile:

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.