Ag-Grid component with input support

Hi @leb_dev , you can refer this example that saves the data to a dataframe & a CSV file. You can modify it suitably to save values into a database.

Cheers

2 Likes

thank you for your answer this was what i am looking for. :+1: :+1:

Hey there!
Is it possible to add pre-saved filter views and place a button/toggle on the ag-grid to make those views active?
Perhaps, a feature looking like the one attached below would be really neat!
ag-grid does have an api to do this but not quite sure on how to implement it using st ag-grid


Thanks for the help! @PablocFonseca

1 Like

Hi there!

I’m wondering is there any way to show tree data in streamlit-aggrid component?

Here’s an example in AgGrid website Implementing server-side Tree Data in ag-Grid with the MEVN Stack

Hi there!
Is there a way to change the date format from dd/mm/yyyy to mm/dd/yyyy? I was thinking to inject js code but was wondering if there is any other method or am I on the right track?
Thank you!

Hello

thank you for this great tool and essential in my opinion with streamlit
Dataframe and table are not enough for professional needs

A simple question how to adjust the height of header columns & make line breaks?
I understood that we can modify some option with javascript and in this case it seems to work [link](AG-Grid - How to insert a line break into my cell data - Stack Overflow into-my-cell-data)

.ag-header-cell-label .ag-header-cell-text {
   white-space: pre-wrap !important;
}

but how to implement it in case of streamlit version

Is there a tutorial to use all the options of aggrid with js ?

thank you

1 Like

Hi everyone,

i’m new on this forum and new in python & streamlit. Therefore, thanks in advance for your patience and help.
I’m trying to do a conditional formatting of an entire row, based on some calculations:
i.e. color entire row in red if columnA != ColumnB + ColumnC

Kindly ask you to help me. Thanks!!!

Ovi

Thank you for your work, it helps a lot. However, for those who have a large amount of data to manipulate, is it possible to use sources other than dataframes?
thank You

Thank you for your work, it helps a lot. However, for those who have a large amount of data to manipulate, is it possible to use sources other than dataframes?
thank You

If you have so much data that it’s too big for dataframes then you most certainly need to filter it somehow anyway.
There is probably not much use in displaying a million rows.

For any reasonable amount of data, dataframes should be fine. You can also optimize the datatypes of the columns to save on RAM if that is an issue.

Hi,
not sure if it’s still relevant for you but maybe it will be useful to a sb. else.
I managed to customize the hover-color when highlighting a row by adding a custom CSS rule to the constructor of AgGrid for it.

As explained at the bottom of AgGrid Documentation: Highlighting Rows and Columns

Row Highlighting works by the grid adding the CSS class ag-row-hover to the row’s getting hovered. The grid cannot depend on using CSS :hover selector as this will not highlight the entire row if Columns are pinned.

Here is a snippet:

AgGrid(..., custom_css={
    ".ag-row-hover": {
        "background-color": "red !important"
    }
}}

_Note: the !important was necessary to override the CSS rule precedence

Hope this helps!

1 Like

Thanks, that helps a lot!

Hi everyone. I’m using ag-grid and I’m letting the user edit the cells. Is there anyway to track which cells have been edited, besides comparing each one to the original state?
After the user edits some cells, I’m looking to save only those rows back to a database.
Thanks.

@Igor Have you figured this out yet?
I’m running into an issue because of this. When I save the data back to a table it’s turning into ‘None’, which is very different than Null.
Also columns with a numeric data type have ‘’ for nulls.

Unfortunately not :frowning: I believe that is a bug

@PablocFonseca Would you mind taking a look at this behavior and seeing if it’s something the should be changed? It’s preventing me from pushing this data back into a DB.
The behavior that is causing the issue is not having ‘None’ be displayed, it’s when any value in the grid is updated, all the null values (‘None’) change to be the literal None in the underlying dataframe, instead of the null representation. So before the update the display shows ‘None’ but the actual value in the df is null. After the update the df’s value is ‘None’.

Thanks!

Hello. After the user clicks a Delete button, I’m trying to delete the rows that have been selected but I’m unable to get the indices of those rows. How do I get the indices?
Thanks!

Hi all,

is there a way to replicate the “add_rows” functionality with AgGrid?
In a single script iteration I am loading data, which takes quite a while. I’d like to update the grid as soon as a new row becomes available. I am doing this using a generator, which yields new rows.

I tried the following:

  • placing the grid in a st.empty and basically re-rendering it in the loop over the generator → grid is not shown at all until the end
  • played around with the reload_data option → grid does not react to changes on the original dataframe

Thanks!

Hi @PablocFonseca is there any possibility that I can use a date picker inside the component with a date column?

Hi folks,

Ag grid has very convenient ways to implement the basic CRUD functions like add a new row, delete a row by transactions. Does anyone know how to use those functions like transactions within the streamlit-aggrid widget? So far I just manipulated the data frame out of box, which is not very efficient. Hope more interfaces could be exposed to use the native ag grid capabilities, e.g. add buttons around to call the gridApi. Thanks!