Ag-Grid component with input support

Custom Components streamlit-aggrid
435

Hello! How do I ensure the horizontal scroll bar is appearing when I set the Ag-Grid height shorter than the length of the table?

When I remove the ‘height=400’ → the table becomes way too long but it does show the horizontal scroll bar at the bottom.

gb1 = GridOptionsBuilder.from_dataframe(df)

gb1.configure_default_column(groupable=True, enableRowGroup=True, aggFunc='sum', filterable=True)
	
gb1.configure_selection(selection_mode='multiple', pre_selected_rows=[0])

# Add checkbox to header to select/deslect all the columns
gb1.configure_side_bar()
gridOptions1 = gb1.build()

# Always show in case columns are expanded and then go past width
gridOptions1['alwaysShowHorizontalScroll'] = True
gridOptions1['scrollbarWidth'] = 8

grid_response1 = AgGrid(df,
					gridOptions=gridOptions1,
					allow_unsafe_jscode=True,
					update_mode=GridUpdateMode.SELECTION_CHANGED,
					enable_enterprise_modules=True,
					#custom_css=custom_css,
					columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
					height=400)
437

Not really a solution… But just to gather on the same issue.

See my post from earlier. There is a padding set to 30px, when set to 0 or display=none, grid fixes itself.

Victor_M

438

Have you found a way of removing the padding or making it so the scroll bar always appears?

439

Unfortunately, no. Might be some sort of style somewhere in the module. I haven’t look that far. But i tried different ways to adjust with css.

440

Here it is:
Dont think there is a way to adjust this once you install the module.

image
image1194×843 54.4 KB

Update:
i found build generated json from React. You can set the padding to 0 here and scroll bar will show. But this will break quick search bar. Since that is how @PablocFonseca created the layout. I tried to change the settings and inject custom CSS. Best approach solution was to use overflow: auto in gridContainer.

image
image1027×395 55 KB

here is another solution:

2 Likes
441

I’m using Ag-Grid to create a table which displays data from a database. The user can edit cells which will update the database. I’m using Ag-Grid’s session state to find the “new data” entered by the user. There are certain cases where a user’s input will be blocked from updating the database, in which case their edit will be removed from the table and only what’s in the database will be shown.

This is working fine, but my problem is that Ag-Grid’s session state is preserving that attempted edit, so the next time they attempt an edit elsewhere, the session state holds not only this new edit, but the previous ones too. I’m deleting the session state if new data is found once the database has been updated, but as soon as the new Ag-Grid is drawn, its session state includes everything that was in there before it was deleted.

Does anyone know how to permanently remove Ag-Grid session state data?

443

Worked perfectly for me… Thank you !

1 Like
444

Hi @Doogra did you find a fix to this problem. I have the exact same problem when trying to use the streamlit aggrid component on replit (which is using on docker). Really love the streamlit aggrid component so would be a shame not being able to use it, when deploying on replit.

445

Hi @Greoge_13, were you able to use the server side row model through the streamlit aggrid component?

446

I got it to work by removing some of the AgGrid configuration options. You might try using only a bare minimum and then add options one by one until you find what’s breaking yours. Ideally no options should break the grid. Unfortunately, that was not the case for me.

2 Likes
448

Ahh, ok. Will do that :blush:. Thanks for so much for the quick answer!

449

Hi all,

I am trying to add buttons beside each row that trigger an API call from the Streamlit app when clicked, using some of the fields in the selected row as parameter.

So far I see most of the examples are using JSCode like below:

gb.configure_column('Delete', headerTooltip='Click on Button to remove row',
                    editable=False, filter=False, onCellClicked=JsCode(string_to_delete),
                    cellRenderer=cell_button_delete,
                    autoHeight=True, suppressMovable='true')

Anyone have idea on how I can do so using Python function instead of JsCode? I want to make the API call from my Streamlit Application and adding the API call in JSCode will seem to make the API call from the browser. Please correct me if I am wrong.

Appreciate the help.

451

Hi,

is there any possibility to define order of columns and also unselect (visibility) columns not showing initially? I want to show only few columns that has the most important data and let other columns be invisible.

After initial rendering user could use Columns menu and select even invisible columns if so wanted.

Edit: found it Hiding an AgGrid column - #9 by TomJohn

452

when i test your code .it is error.because it lose two *.chunk.js files.for examples:
main.506285f1.chunk.js

where is this file?can you share two file .thanks

453

If I have multiple aggrid tables and they are all paginated, is there a way to use streamlit buttons to go to ‘next page’ and ‘previous page’ for all the aggrid tables at the same time?

454

Hello everyone,

I have a JS function which is called during the ‘onCellClicked’ event in my grid_option.
Is it possible to retrieve the filter value in Streamlit?

Here is my Js function which is called in the ‘onCellClicked’.

ON_SELECT = JsCode("""
function(value) {
    let api = value.api;
    let sel = api.getSelectedRows();
    var filter = value.data;

    //Here the filter variable that I want to return in Streamlit


    // Unselect all rows
    api.deselectAll();
};
""")

And my grid_options:

        grid_options = {
            "domLayout": "autoWidth",
            "columnDefs": [
                {
                    "field": "N° Essai",
                    "rowGroup": False,
                    "hide": False,
                    "resizable": True,
                    "wrapHeaderText": True,
                    "autoHeaderHeight": True,
                    "onCellClicked": ON_SELECT,
                },
                {
                    "field": "Date arrivée",
                    "rowGroup": False,
                    "hide": False,
                    "resizable": True,
                    "cellRenderer": format_date,
                    "cellRendererParams": {"format": "%d/%m/%Y"},
                    "wrapHeaderText": True,
                    "autoHeaderHeight": True,
                },
            ],
            "groupDisplayType": "singleColumn",
            "showOpenedGroup": True,
            "animateRows": True,
            "suppressRowClickSelection": False,
            "rowSelection": "single",
        }

        return grid_options, df

I don’t know if I’m clear, but explaining what I have in mind in writing is not always easy.

455

Hi @PablocFonseca
I used used component of yours quite a while. And i’m struggle with date picker for ag table to edit a date. I used a “agDateCellEditor” but it doesn’t work. A calendar pops up but when I choose a date it doesn’t change it in table. I also used a “agDateStringCellEditor”, it worked but then it starts show an error “this.getDataTypeService(…).getDateParserFunction(…) is not a function”.

I see your example with Rich Cell Editor https://staggrid-examples.streamlit.app/Cookbook. But i get the same issue, calendar shows up but date I picked doesn’t implement. I try switch browser and problem not in browser.

There is my code:
gb.configure_column(field=“schedule_start_date”, header_name=“дата начала работ”,
width=100,
browserDatePicker = True,
cellEditor = ‘agDateCellEditor’,
# cellEditor = ‘agDateStringCellEditor’,
cellEditorParams= {
‘min’: ‘2023-01-01’,
‘max’: ‘2025-12-31’,
},
type=[“dateColumnFilter”, “customDateTimeFormat”],
custom_format_string=“dd-MM-yyyy”,
cellEditorPopup=True,
cellStyle = editable_cells_sytle
)

gb.configure_grid_options(enableRangeSelection=True)

grid_options = gb.build()

response = AgGrid(st.session_state.filtered_gridTable,
gridOptions = grid_options,
height = 1000,
update_on = update_on,
# enable_enterprise_modules = True,
fit_columns_on_grid_load = True,
allow_unsafe_jscode = True,
reload_data = st.session_state.reload_data,
key = st.session_state.agGridKey,
theme=‘streamlit’
)

Hope you or maybe guys here can help me with that. It’s pain problen for me

456

I can’t get this component to work in py.cafe - anyone have any suggestions?

Here’s my repro: https://py.cafe/giselle.pomodor/streamlit-aggrid-example

image
image1920×979 113 KB

457

Hi there, i am pretty sure it is a version compatibility problem . Try checking your streamlit version against the example pages (Streamlit v1.33.0

  • you can see it in the about page of the web app).
458

streamlit-aggrid now works with PyCafe:

image
image1920×1336 115 KB

In fact, the author now requests people in the issue template to provide a streamlit example using PyCafe:

image
image2110×128 18.3 KB