Dataframe/Data_editor styling

🎈 Using Streamlit
,
1

I wonder if is there a way to style dataframe or data_editor based on the selected cell.
I want to highlight the row which the cell is selected to make it easier for the user to follow the row on many columns dataframes/data_editors

Any help is appreciated.

2

Hello @hexemeister,

One popular solution is to use the streamlit-aggrid library, which is an advanced wrapper around the AG-Grid. It offers more interactive capabilities, including cell selection and styling.

  1. First, you need to install this package if you haven’t already:
pip install streamlit-aggrid
  1. Here’s a simple example:
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder
import pandas as pd

df = pd.DataFrame({'A': range(1, 6), 'B': range(10, 15)})

# AG Grid Options
gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection('single', use_checkbox=True, rowMultiSelectWithClick=True)
grid_options = gb.build()

grid_response = AgGrid(df, grid_options=grid_options, fit_columns_on_grid_load=True)

selected = grid_response['selected_rows']

if selected:
    selected_row = selected[0]
    st.write("Selected Row:", selected_row)

If the streamlit-aggrid library doesn’t meet your needs, another approach is to create a custom Streamlit component.

Let me know if you might require any further assistance!

Kind Regards,
Sahir

P.S. Lets connect on LinkedIn!

2 Likes
3

Hello @sahirmaharaj,

Definitely AgGrid is awesome and it would solve all issues, but I had some trouble in putting it into action when I fed it a 4k row dataframe. It simply stopped rendering. If I give it a df.head(20) there’s no problem, so I think the dataframe is too big for it deal with.

Is there a workaround to improve its performance?

Thank you for your assistance!
Regards,
Renato Moraes

4

@hexemeister I would suggest adding this as a feature request in the Streamlit repo. Thereby, it makes it more likely that we add this to st.dataframe or st.data_editor.

5

I’ve already did. Thank you for pointing that out.

1 Like