Ag-Grid component with input support

🧩 Custom Components streamlit-aggrid
21

Thanks Pablo!

I’ll try later. Do I need to redo a pip install out of interest?

Thanks,
Charly

22

A pip upgrade should work

I changed component’s return signature. Now it returns a dictionary. It’s like this because i didn’t know where to put return data, such as selected rows, in a dataframe (which was the previously returned object).

If you know of a better approach, let me know.

I also updated examples on github to work with this new signature.

2 Likes
23

I tested the multiselect and it’s quite neat. I like it.

One thing I noticed is that, even when using the pivotable_columns=True, you know get twice a filter feature to the right of the table. I’m confused about that. Not sure if that’s intended.

Also, I was wondering, do you think it will ever be possible to have multiindex columns, like what you can get in a dataframe?

For example, how to render an manipulate something like df:

df_a = pd.DataFrame({'potato': [50, 25], 'apple': [16, np.nan], 'province': ['Normandy', 'Languedoc']})
df_b = pd.DataFrame({'potato': [60, np.nan], 'apple': [17, 14], 'province': ['Normandy', 'Languedoc']})
df = pd.concat([df_a.set_index('province'), df_b.set_index('province')], axis=1, keys=['a', 'b'])
24

Thanks Pablo.

I’ve pip upgraded your component yet still have the same issue:

image
image935×371 27.3 KB

Does it work on your machine?

Thanks,
Charly

25

Hey Charly,

Just chipping in to say that it works on my machine with a fresh environment (pipenv) with streamlit 0.71.0 and streamlit-aggrid 0.0.7

@PablocFonseca Awesome work on this component!! Going to be really useful to me.

1 Like
26

thanks a lot! it is so gd and easy to use.
may i ask
for the colume size Autosize function how can i implement? thanks

>      onColumnResized: function (params) {
>         console.log(params);
>       },
>     };
> 
>     function sizeToFit() {
>       gridOptions.api.sizeColumnsToFit();
>     }
> 
>     function autoSizeAll(skipHeader) {
>       var allColumnIds = [];
>       gridOptions.columnApi.getAllColumns().forEach(function (column) {
>         allColumnIds.push(column.colId);
>       });
> 
>       gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
>     }
>     ```
[size](https://www.ag-grid.com/javascript-grid-resizing/)
27

Just uploaded version 0.1.0 and a new example app.
Included docstrings. Changed the way data is returned back to streamlit (it now uses an api call to fetch JSON data instead of csv values). However, performance is slow, but usable.

28

on version 0.1.0 there is a flag fit_columns_on_grid_load on AgGrid function. Check the example.py I uploaded on gitHub

29

maybe a pip uninstall and reinstall? I Just tested version 0.1.0

30

There was a bug on gridOptionsBuilder.configure_side_bar(). Version 0.1.0 fixes it.

31

yes it is. Just check colDefs on gridOptions. you should pass editable=False.
If you are using the gridOptionsBuilder the method is configure_column(…, editable=False)

32

thanks i solved editable

33

the news component or the lastest version one have a “FOR TRIAL USE”
may i ask which function is the trail …
and can i see only the free one and “make for trial use” disappear thanks

34

You can check the features of enterprise version and licencing here.
I’m planning to add an option to limit component’s features to community version only

35

thanks . i hope you can made it

36

the updated version have problem with
ModuleNotFoundError: No module named ‘st_aggrid’

i have already pip install
thanks

37

Thanks for the configure_side_bar fix!

What about the multiindex? Do you think it’s even feasible at all? A hack would be to concatenate the multi_index into a simple index column. I was just wondering if the grid could deal with mutli-indices natively. I didn’t find anything about it.

I was also wondering if there was a way to get to some sort of nested/tree structure that allows selecting children elements: either by selecting each child individually, or by selecting the parent:

image
image1624×1134 92.2 KB

1 Like
38

I didn’t really think about indexes or multi-indexes, what would be the expected behaviour? An imutable first column on the grid?

For multiIndexes, I think of row groups, like in your example. The grid would start with rows grouped by multiindex values. Does it makes sense?

39

Regarding the multiindex, I’m mostly wondering about the column multiindex (axis=1) and how to directly translate a dataframe into an ag-grid component. See the example below:

image

If I load that directly into gb = GridOptionsBuilder.from_dataframe(df), it’ll understandably break. I’m wondering if there would even be any way to handle that. I haven’t seen that ag-grid could handle this natively but I’m not so familiar with it.

Regarding the row group thing, I had skipped that bit. It seems to do the job! Awesome.

40

For multi-index columns,it colud be translated to column groups, but it would be limited to 2 levels maximum…

For editing purposes, I believe converting the data to long form and using grid’s filtering/group selecting features would be better way to handle n-dimensional data.

Displaying a table with many colums usually leads to poor user experience. In my opinion, it’s natural for tables to grow vertically instead of horizontally. However, every financial model spreadsheet that i receive on my job have horizontally expansion… so i can imagine the use case for a multi column grid. What is your use case?