Display sample data format

Show the Community!
1

How to display a sample format of data including column headers when you ask users to upload files in an attractive manner? It will be very helpful for me if someone look into this question and give a solution.

2

maybe give an example of what you want?

print (df) does the job :slight_smile:

3

@rcsmit I think print(df) show the data into the console not in the UI. I need to display the sample format of data into the UI part & also I know that st.datframe or st.table will print the data into the UI part but it is not attractive. I need a better solution than st.datframe or st.table

4

Hi @udo,

It will be easier if you describe your use case a bit more .
However, how about trying [Streamlit - Aggrid] (GitHub - PablocFonseca/streamlit-aggrid: Implementation of Ag-Grid component for Streamlit) ?
You can use JS to make it attractive based on your use case.

Btw, you can highlight rows in st.dataframe as well (if that what you looking for) .

Best
Avra

5

@AvratanuBiswas suppose I am a developer of an application and the application needs an input to generate a specific output. And the application will take the input in a particular format (let the data have only 4 column named as “name”, “age”, “sex” & “phone no”). But the user doesn’t know the format so as a developer I want to show a sample format of data including column headers so that when the user upload the input file, he/she will have a clear idea about the structure of the data. As a developer I don’t know how to display the sample format of the data in the UI (user interface) in an attractive manner. If you have any doubt please let me know.

6

Hey @udo,

Thanks for elaborating your use case. I can understand, my workaround may not be up to the mark as you imagined, but how about , using a simple workflow,

You can use two columns ,

  • st.form - for the input
  • st.dataframe / table / Ag-grid to show case your sample (may be keep it under an expander)

You can keep an upload button at the very end.
Apologies, if this doesn’t solve your application as you expected.

Best,
Avra

7

Thanks @AvratanuBiswas . It worked for me. One more question. I am using AgGrid to display the data but it create a large box. I want a small box. Can we resize the box according to the data?

8

Glad it worked for you .

Again this would have been easier to identify with some screenshot ,

If I’m not wrong, AgGrid has parameters such as height , width , fit coloumn size. Possibly that might help you . Otherwise defining a container with st.container [edit : coloumn with st.coloumn]and populating the aggrid table within it might help also for your desired size.

Best
Avra

9

Hi @AvratanuBiswas can you give an example of the second option, create a container with st.container and populating the aggrid table according to desired size. It will be very helpful for my coursework.

10

Hi @udo ,

My apologies, I meant st.coloumn()

You need few additional lines regarding that,

st.set_page_config(layout="wide")

opt = st.sidebar.file_uploader("Upload your file")
# Spacing
c1, c2 = st.columns((5,5))

# Use the form for inputs
with c1:
    form = st.form("Information")
    form.text_input("Name")
    form.number_input("Age")
    form.form_submit_button("Submit")

# in my case, I used these additional arguments
with c2:
    grid_table = AgGrid(df, 
            gridOptions = gridOptions, 
            enable_enterprise_modules = True,
            fit_columns_on_grid_load = True,
            height=500,
            width='100%',
            theme = "fresh",
            update_mode = GridUpdateMode.SELECTION_CHANGED,
            reload_data = True,
            allow_unsafe_jscode=True,
            )

In my test case, it looks like this, for sure, you can manipulate the spacing, refer to this official blog

image
image2730Ă—1576 307 KB

11

Hi @AvratanuBiswas thanks for the code. I got the point. One last help, I want to do the AgGrid in the side bar. Can you please tell me how to do that? Also can you provide me some link or book from where I can read all the cool features that you are added into AgGrid(df,…) code.

12

Hey , glad that it worked out.

with st.sidebar : 
#populate with your Aggrid table as mentioned above 
       AgGrid(df)

You can refer to several places over internet, below are few,

Best,
Avra

13

Hi @AvratanuBiswas one little problem occurred. I can’t create col1 and col2 in the sideber. My target is to create two columns into the sideber. It will be really helpful if you solve this problem.

14

Hi @udo,

I won’t personally go for columns within a sidebar in this case, but it is possible ,

c1, c2 = st.sidebar.columns((5,5))

# Rest of the code follows as mentioned above

I would kindly suggest you for future issues, please be specific with your goals / UI structure / code snippets, so that it’s helpful for everyone to understand and help you out specifically.

And secondly, please do refer to the official doc. The doc is very well maintained and most frequent queries are well addressed out there, will definitely save your time from debugging :slight_smile:

Best
Avra

15

Thanks a lot @AvratanuBiswas . I will definitely follow the rule in future.

1 Like
16

No worries @udo :relaxed: Good luck with you project :balloon:

17

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.