Ag-Grid component with input support

[Dominick_Crisci]

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)

[Victor_M]

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

[Dominick_Crisci]

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

[Victor_M]

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.

[Victor_M]

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

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.

here is another solution:

Blank area above the table

[AKDavidson]

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?

[Richa_Srivastava]

Worked perfectly for me… Thank you !

[Jonathan_Scharff]

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.

[Meziane_Chauvin]

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

[Doogra]

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.

[Jonathan_Scharff]

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

[lzm]

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.

[JakeB]

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

[hillstone]

@MarceTU

calendar is not working properly. Cannot assign

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

[JHod]

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?

[Benoit]

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.