Ag-Grid checkbox selection for grouped table

Custom Components streamlit-aggrid
1

Dear all,

I am trying to implement checkbox selection in the grouped Ag-Grid table from a pre-determined dataframe which I read from a csv file (if it is connected to some other Ag-Grid that you have before in a code where you already have a checkbox option enabled it works/it is not a problem).

So when I have have a drop down ‘arrow/menu’ for each grouped item there I would like to have also a checkbox. Is that even possible?

Does maybe @PablocFonseca or anyone have a suitable solution/workaround?

Thank you for your help!

Best regards,
Jaša

1 Like
2

Hi @Jasa_Dimic, is this what you are looking for?

image

This can be done with streamlit-aggird.

Cheers

3

@Shawn_Pereira hi,

yes that is exactly what I would like to achieve but I do not know how. Can you please share some insights of piece of code that produced such a table?

Thanks,
Jaša

4

Here you go, @Jasa_Dimic.

Try this code first, and modify it thereafter, to suit your purpose.

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

def GetLastName(row):
    nsarr = row['orgHierarchy'].split('|')
    return(nsarr[len(nsarr)-1])

df=pd.DataFrame({ "orgHierarchy": ['Erica Rogers', 
                                   'Erica Rogers|Malcolm Barrett',
                                   'Erica Rogers|Malcolm Barrett|Esther Baker',
                                   'Erica Rogers|Malcolm Barrett|Esther Baker|Brittany Hanson',
                                   'Erica Rogers|Malcolm Barrett|Esther Baker|Brittany Hanson|Leah Flowers',
                                   'Erica Rogers|Malcolm Barrett|Esther Baker|Brittany Hanson|Tammy Sutton',
                                   'Erica Rogers|Malcolm Barrett|Esther Baker|Derek Paul',
                                   'Erica Rogers|Malcolm Barrett|Francis Strickland',
                                   'Erica Rogers|Malcolm Barrett|Francis Strickland|Morris Hanson',
                                   'Erica Rogers|Malcolm Barrett|Francis Strickland|Todd Tyler',
                                   'Erica Rogers|Malcolm Barrett|Francis Strickland|Bennie Wise',
                                   'Erica Rogers|Malcolm Barrett|Francis Strickland|Joel Cooper'],
                  "jobTitle": [ 'CEO', 'Exec. Vice President', 'Director of Operations', 'Fleet Coordinator', 'Parts Technician',
                                'Service Technician', 'Inventory Control', 'VP Sales', 'Sales Manager', 'Sales Executive',
                                'Sales Executive', 'Sales Executive' ], 
                  "employmentType": [ 'Permanent', 'Permanent', 'Permanent', 'Permanent', 'Contract', 'Contract', 'Permanent', 'Permanent',
                                      'Permanent', 'Contract', 'Contract', 'Permanent' ]}, 
)

df['Name'] = df.apply(lambda row: GetLastName(row), axis=1)
df.insert(0, "Name", df.pop("Name"))    # move col to 0 pstn

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection(selection_mode="single", use_checkbox=False)
gb.configure_column("orgHierarchy", hide = "True")
gb.configure_column("Name", hide = "True")
gridOptions = gb.build()

gridOptions["autoGroupColumnDef"]= {'cellRendererParams': {'checkbox': True }}
gridOptions["treeData"]=True
gridOptions["animateRows"]=True
gridOptions["groupDefaultExpanded"]= -1   # expand all
gridOptions["getDataPath"]=JsCode("function(data){ return data.orgHierarchy.split('|'); }").js_code

dta = AgGrid(df, gridOptions=gridOptions, height=350, allow_unsafe_jscode=True, enable_enterprise_modules=True, theme="blue",
             update_mode=GridUpdateMode.SELECTION_CHANGED)

st.write(dta['selected_rows'])

Cheers

2 Likes
5

Thank you very much @Shawn_Pereira !

I will try to make it work :slight_smile:

1 Like
6

@Shawn_Pereira Hi, whether AgGrid table can be wrapped under st.container?
I have a situation like 4 tabs using st.tabs (ex. Quarter 1, Quarter 2,Quarter3 and Quarter4). when i click on each tab, i want to display the dataframe filtered for each quarter.(i wanted to use AgGrid for tab datatable).

7

Hi @sridharr,

  1. Though I have not tried it, there seems to be no reason why an AgGrid table cannot be wrapped within an st.container. Give it a try.
  2. I dont think st.tabs loads all of its encased widgets on demand. This means that when st.tabs loads, all widgets in all tabs will also load (someone can correct me, if needed). So, would you want 4 instances of AGgrid (qtrs), that are deriving data from the same dataset, to be loading when you can do with 1 instance?

I would recommend using something like the option-menu component (or similar) for your quarters choices (some widget to select a desired quarter) and refreshing your dataset (with / out AGgrid).

Cheers

8

@Shawn_Pereira I’ve managed to modify my code so that now I have the structure I’ve wanted.

But still I am struggling with two features that I would like to implement and that the code that you’ve provided does not address.

I want to have an option for selecting multiple checkboxes (I’ve already done this).

The problem occurs when I’ve already selected some rows and want to edit any cell I lose all the selected rows (so the ticks on the checkboxes dissapear).

Also, it seems that on every action (click, edit, etc.) the grid updates/refreshes constantly. I’ve put the parameter ‘update_mode’ to GridUpdateMode.MODEL_CHANGED but it still does not make any difference.

Any help would be very much appreciated!

Cheers,
Jaša

9

Hi @Jasa_Dimic,

  1. For multiselect, replace:
    gb.configure_selection(selection_mode=“single”, use_checkbox=False)
    with
    gb.configure_selection(selection_mode=“multiple”, use_checkbox=False)

  2. For editable cells in certain cols, add the following line for the field you want:
    gb.configure_column(“jobTitle”, editable = True)
    replace field jobTitle with your field name

  3. It doesn’t seem that you can select multiple lines and then edit a cell (that may be from a selected line / not). You will need to make all required editable changes and select rows to do some operation thereafter.

  4. I didn’t find the grid refreshing constantly at my end. It works as expected. My version of these libraries are streamlit-aggrid==0.2.3 & streamlit==1.16.0. Additionally, do remember that aggrid is not a 100% port of its JS version, so some features may not work as intended, or may be missing altogether.

Cheers

10

@Shawn_Pereira

I tried Option 1, it is showing not a valid command. Actually all quarter data are in same dataframe, you are correct are downloaded at single instance. But along with chart, i need to show neat table related to chart for each tabs. I used AgGrid with containers, but all four tabs tables are displayed one below the other.

11

@sridharr, option menu is a component (not a command). You can refer it at this link (Streamlit-option-menu is a simple Streamlit component that allows users to select a single item from a list of options in a menu). You can use this horizontally as your tabs. Below this, you can have 2 columns side-by-side for your grid and chart respectively.

Alternatively, you could also follow your original application design.

Cheers

12

@Shawn_Pereira thanks again for all the information!

You’ve really helped me a lot :slight_smile:

Cheers,
Jaša

1 Like
13

@Shawn_Pereira sorry you missed understood. i tried option 1 from your answer. AgGrid table is not getting warpped under container. it is working good for st. but not specific custom user created container.