Feedback

[ChrisDelClea]

Hi @PablocFonseca,

this component is really awesome and I'd like to thank you! 🎈

So here I have some questions, ideas and suggestion to make the component even more awesome:

1. It would be super nice, if we could reduce the code required to get the whole thing up and running with all features.
   1.1. So - i wanted to ask if it is possible to include the sidebar out of the box, if someone does this AGrid() its automatically there and instead of configrung all over again, just give the option to not show it e.g. Agrid(disable=["selection_mode"]).
   Cauz i guess most people wants to have it working out of the box.

    st.sidebar.subheader("St-AgGrid example options")
    sample_size = st.sidebar.number_input("rows", min_value=10, value=3000)
    return_mode = st.sidebar.selectbox ("Return Mode", list (DataReturnMode.__members__), index=1)
    return_mode_value = DataReturnMode.__members__[return_mode]

    update_mode = st.sidebar.selectbox("Update Mode", list (GridUpdateMode.__members__), index=6)
    update_mode_value = GridUpdateMode.__members__[update_mode]
    enable_selection = st.sidebar.checkbox ("Enable row selection", value=True)

    if enable_selection:
        st.sidebar.subheader ("Selection options")
        selection_mode = st.sidebar.radio("Selection Mode", ['single', 'multiple'])

        use_checkbox = st.sidebar.checkbox ("Use check box for selection")
        if use_checkbox:
            groupSelectsChildren = st.sidebar.checkbox ("Group checkbox select children", value=True)
            groupSelectsFiltered = st.sidebar.checkbox ("Group checkbox includes filtered", value=True)

        if ((selection_mode == 'multiple') & (not use_checkbox)):
            rowMultiSelectWithClick = st.sidebar.checkbox ("Multiselect with click (instead of holding CTRL)",
                                                           value=False)
            if not rowMultiSelectWithClick:
                suppressRowDeselection = st.sidebar.checkbox ("Suppress deselection (while holding CTRL)", value=False)
            else:
                suppressRowDeselection = False
        st.sidebar.text("___")

    enable_pagination = st.sidebar.checkbox ("Enable pagination", value=False)
    if enable_pagination:
        st.sidebar.subheader("Pagination options")
        paginationAutoSize = st.sidebar.checkbox("Auto pagination size", value=True)
        if not paginationAutoSize:
            paginationPageSize = st.sidebar.number_input("Page size", value=5, min_value=0, max_value=sample_size)
        st.sidebar.markdown("___")

1.2. also things like this are to complicated and just blow the code in my view:

cellsytle_jscode = JsCode("""
function(params) {
    if (params.value == 'A') {
        return {
            'color': 'white',
            'backgroundColor': 'darkred'
        }
    } else {
        return {
            'color': 'black',
            'backgroundColor': 'white'
        }
    }
};
""")
gb.configure_column("group", cellStyle=cellsytle_jscode)

I was not sure if i had to include it so i did, but would it still work without it? Also it's not really pythonic. maybe there is a way to include it in Agrid()?

Just reducing the needed code to this part and maybe the cols (but also could be intered from df?) would be best:

    agrid = AgGrid(
        df,
        gridOptions=gridOptions,
        width='100%',
        data_return_mode=return_mode_value,
        update_mode=update_mode_value,
        allow_unsafe_jscode=True,
    )
    df = agrid['data']
    selected = agrid['selected_rows']

2. My next question is regarding the filtering options, could I have a st.sidebar.multiselect() that shows all the filtering options choosen from the agrid?

3. The last question is regarding updating the data as it happens if I select some datapoints/rows from agrid.
   Is there a way to update the data by injecting a new dataframe at a later point in time? For example I create
   the agrid somehere at the top, at the middle i created/filtered the returned datframe and want to update the agrid
   with the df created? I tried agrid["data"] = df but didnt work. Any ideas?

Thank you so much again for this awesome component!
Hope my ideas help to make it even better.

Best regards
Chris

[PablocFonseca]

Hey Chris!

I'm glad to know that this component is helping you! =)

I do think that the boiler plate code is too much. But it is the burden of a highly customizable component. In version 0.1.9 I changed the signature of AgGrid call to capture any **kwargs and pass them as key/pair values to DefaultColDef. This way, for instance you can have a full editable grid just by calling ````AgGrid(data, editable=True)```.

1. I'm thinking on how to make the call more 'friendly', maybe not using a builder for the gridOptions, but for AgGrid itself.
   1.2 I'm not the creator of the Ag-Grid javascript component, for some featrues, like conditional cell formatting, it is necessary to do that using Javascript, there is no easy way of converting python code to javascript, so the approach was to allow JsCode injection in the component.

2. I don't think i understood this one. Do you want a multiselect and the grid filter to be in synch? Why don't you filter the data before sending to the grid and disable it on the grid? This way your filtering is centered in one location only.

3. the grid returns a dicitionary. "data" key contains the data from the grid, "selected_rows" keys contains a dictionary with selected data. So, if you want a dataframe with selected data only, you could use

selected = grid_response['selected_rows']
selected_df = pd.DataFrame(selected)