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

Using Streamlit
, ,
1

Summary

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'):
        file_list.append(filename)

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

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

grid_response = AgGrid(
    df,
    gridOptions=gridOptions,
    data_return_mode=DataReturnMode.AS_INPUT,
    update_mode=GridUpdateMode.MODEL_CHANGED,
    fit_columns_on_grid_load=False,
    theme='blue',  # Add theme color to the table
    enable_enterprise_modules=True,
    height=850,
    width='100%',
    allow_unsafe_jscode=True,
)
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
2

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,

Thanks,
Charly

3

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

1 Like
4

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:
https://streamlit-aggrid.readthedocs.io/en/docs/GridOptionsBuilder.html

I hope that helps! :blush:

Charly

5

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.

6

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:

Charly

7

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

Take care!

1 Like
8

You’re welcome! :slight_smile:

9

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