St.popover inside st.data_editor

[snigdha.goel]

I have an app where I am currently doing the following:

Basically what this is doing is there are st.expanders for each window. Inside the expander, I enter window dimensions in text boxes. Based on those dimensions, I have the user enter Product Breakdowns that can help decide what length of product is needed to complete the window.

Now, I want to switch from an expander style and input this information in a st.data_editor. Each row in the table will have window dimensions.

The challenge is that, once I submit/save the table, I want the last column in each row to have its own button that opens a popover. Inside this popover, I will have the user enter window specific product breakdown.

My research so far tells me I can also not use popovers inside a dataframe. I tried achieving this with st.tabs but it did not turn out to be user-friendly because it would keep coming back to the first tab after every click.

Can I get more ideas on how something like this can be achieved? I want to stick to a table structure to enter window dimensions, however, I am open to how I can have the user input product breakdown details and save them in the backend.

Would appreciate any leads here and happy to provide more clarifications if needed.

[ferdy]

What is this product specific breakdown?

You may try the SelectboxColumn of the column configuration.

[snigdha.goel]

So for example, there is a window of length 5000mm. We need total product of 5000mm to complete the window.

If you see in the given screenshot, there is first a dropdown where you can select an available product length. This part can be achieved with the SelectBox column.

However, one of the options in the dropdown is an Add Custom button. If the user wants to add custom lengths, they will click here.

Once they click on this, based on how many pieces are entered in the number field, the length fields below will change dynamically.

In this case, the user has entered 2 pieces so there are 2 length fields showing below. Basically here we are using 2 pieces of 2500mm to complete the 5000mm window. (ignore the results table)

I need my app to support this dynamic functionality which is not possible with select box.

I think this is most closely achievable with a popover. Open to any other ideas too.

[ferdy]

@snigdha.goel

However, one of the options in the dropdown is an Add Custom button. If the user wants to add custom lengths, they will click here.

Once they click on this, based on how many pieces are entered in the number field, the length fields below will change dynamically.

I think you can achieve that if you have the formula. The value in the length box can be modified.

[snigdha.goel]

Can you elaborate?

Just to be doubly clear, I want to have dynamic dropdown options and text fields based on length and what the user selects in the dropdown.

[edsaac]

@snigdha.goel

Can I get more ideas on how something like this can be achieved? I want to stick to a table structure to enter window dimensions

I don’t think data_editor is flexible enough for the use case you described. Just with columns and containers you could get a table-like look, something like:

Also, keep an eye on the flex layout coming soon, that should make those grid-like applications easier to build:

[Coming soon] Flex layout