Ag-Grid component with input support

Hi @PablocFonseca
Why is the access to the new examples location forbidden?
I’m new to this and used to check some things but now i can’t :frowning:

Hi, when trying to use df with multi-index I get this error:

MarshallComponentException: (“Could not convert component args to JSON. If you’re using custom JsCode objects on gridOptions, ensure that allow_unsafe_jscode is True.”, TypeError(‘keys must be str, int, float, bool or None, not tuple’))

Is there a way to translate from pandas multi-index to aggrid Column Groups, with only 2 hierarchies?

It’s on my list… but not implemented yet.

The nested view will be very helpful to the users to see sub-total, filter, view logically if the rows share some in common. So huge +1 to this feature!

Do you mean this link?

https://staggrid-examples.streamlit.app/

1 Like

What happened to clickable links in the latest Version? They are not working anymore

Update to React. See Version 0.3.4 seems to have broken the clickable hyperlinks hack. · Issue #198 · PablocFonseca/streamlit-aggrid · GitHub

Thanks! It works for static links, but how can i use links from the dataframe?

Hi @PablocFonseca,

Are you aware of any issues when using st_aggrid in a Docker environment? My code works fine locally and st_aggrid displays all tables as expected, but when I bundle it in a Docker image the app does not display any of the grids. Instead the area where the grids would normally be displayed is just blank. No errors in any of the logs either. Thanks!

Hi @PablocFonseca and everyone,

Has anyone had issues or success exporting rendered images when exporting to excel? I have managed to renderer images in their own column multiple ways (URL, base64, etc.) but when doing the right-click excel export, the image doesn’t go with it. I tried adding addImageToCell code (though perhaps incorrectly) and that didn’t fix the issue. Not sure if my code is wrong or if it is just not currently supported but would love to hear from others in the community. Thanks!

1 Like

@sis and @PablocFonseca .

Please how can I inject a java code so that I can either select a row or multiple rows (with a select_all option), click on a delete button and get the select rows(s) deleted.

@Shawn_Pereira , @PablocFonseca, @sis
I have a similar situation and wondering how to make the grid interactive and have all columns (including those created on the grid) be returned in the data grid? How will you go about implementing this interactive responses in pandas?

@KojoBaiden,

I’m not sure I completely understood your query. However,there seem to be 2 ways to take care of grid changes (listed in order of their ease of use):

  1. By modifying the dataframe. Since the dataframe is pushed into aggrid, modifying the dataframe will cause aggrid to display that change in the next refresh cycle, which you can facilitate with a streamlit rerun.
  2. By using javascript (and not java) functions. The JS code will depend / need to be created basis what you want to achieve. You can attach these functions to columns. Please search the forum for numerous examples.

Cheers

PS: sometime code posted on the forum may not work simply because you may be using a different version of the library that the code author.

I have problem with table height, and it seems that autoheight is broken.
I render aggrid table with autoHeight and wrapText parameters set, in result i have a cropped table.
It seems to me, that aggrid component first calculate result height and then resize rows for text wrapping, tried different parameters, and have no more ideas how to get it work normal.

Any help would be appreciated

UPDATE: Noticed, that component can work as expected and render all the table, problems arise after couple of browser pages refresh, and after streamlit application restart renders normal again

Thanks for this, it helped me to implement a conditional dropdown, using the agSelectCellEditor

But when I want to deploy in cloud, I cannot modify index.html?

Hi, liking this alot. Thanks for putting this together. Any idea what causes this to show up? Tried removing it a lot of ways. No luck. It messes up my horizontal scroll bar.

I’m trying to put a column in italics if another column is equal to 1. It works if I use params.data.column without row grouping, but since I’m using row grouping and column grouping I’m struggling to get the cellStyle to work using params. I’ve looked at the Ag-grid documentation but can’t figure it out. Any ideas? Below is my generalized code. Thanks in advance for any help!

cellstyle_jscode = st_aggrid.JsCode("""
function(params) {
if (params.data.B == 1) {
return {
'font-style': 'italic'
}
}
else {
return {
'font-style': 'normal'
}
}
};
""")    


gb = gb.build()
gb['columnDefs'] = [
                    { 'field': 'A', 'pinned':'left', 'rowGroup': True, 'hide':True, 'menuTabs':['filterMenuTab'] },
                    { 'field': 'B', 'hide':True, 'menuTabs':['filterMenuTab'] },
                    { 'headerName': 'Aggregates’, 'marryChildren':True, 'children': [{ 'field': 'SumA', 'aggFunc':'sum'}, { 'field': 'SumB', 'aggFunc':'sum','cellStyle':cellstyle_jscode} ] },
                    ]

UPDATE:

I’m not sure I fully understand it, but with row grouping, params.data is sometimes undefined. I was able to solve the issue by adding code that returns nothing if !params.data. so my JsCode became:

function(params) {
if (!params.data){
return {
}
}
else if (params.data.B == 1) {
return {
'font-style': 'italic'
}
}
else {
return {
'font-style': 'normal'
}
}
};

Hi, thank you for the excellent component.

I have been struggling how to get cell showing several data in a styled format.

> "usageHistory": [ 
>                 { "dateOn": "2023-06-04", "used": "True" }, 
>                 { "dateOn": "2023-06-03", "used": "False" },
>                 { "dateOn": "2023-06-02", "used": "False" },

Data can be formatted in whatever format, I created a key:value format like this
“19.06.:F,18.06.:T,17.06.:T,16.06.:F,15.06.:T,14.06.:F,13.06.:T,12.06.:T,11.06.:T,”

I would like to show this usage information in a one cell, each date as a button/chip etc and color either green (True) or red (False), something like this
image

I managed to have one button in a cell but I am hitting my head to the wall figuring out how you could loop through all value and create several buttons?
Any hints which direction I should go?

I also tried to use mui.Button / mui.Chip in a cell but with no luck. Has anyone used it successfully?

I am trying to format either the row groups based on some condition, or format as percent individual rows based on the value of column data_type == ‘ratio’;

I tried this example but without success

data = df

builder = GridOptionsBuilder.from_dataframe(data)

# makes columns resizable, sortable and filterable by default
builder.configure_default_column(
    resizable=True,
    filterable=False,
    sortable=True,
    editable=False,
)

builder.configure_column(
    field="report_type",
    hide=True,
    header_name="Report Type",
    width=150,  # set width as per your requirement
    rowGroup=True,  # enables row grouping for this column
)

builder.configure_column(
    field="data_type",
    header_name="Data Type",
    # hide=True,
    rowGroup=True,  # enables row grouping for this column
)

builder.configure_column(
    field="standardized_descricao_da_conta",
    header_name="Descrição",
    pinned="left",
    width=150,  # set width as per your requirement
)


builder.configure_grid_options(
    groupDefaultExpanded=-1,
    suppressColumnVirtualisation=True,
    groupDisplayType="groupRows",
    autoGroupColumnDef=dict(
        minWidth=150,
        pinned="left",
        cellRendererParams=dict(suppressCount=True),
    ),
)


gridOptions = builder.build()


AgGrid(
    data,
    gridOptions=gridOptions,
    height=1000,
    theme="alpine",
    columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
    allow_unsafe_jscode=True,
)