How to add st.popover in dataframe corresponding column row

[pk367]

I have a panda dataframe as code output, I want to add a popover in “Symbol” column row, can i do it if yes then how? If not then, is there any idea to do similar thing. Thank you.

sorted_table_data = sorted(table_data, key=lambda x: x[7], reverse=False)
       df = pd.DataFrame(sorted_table_data, columns=["Symbol", "Close", "Pattern", "Leg-in Date", "Base Count", "Leg-out Date", "Legout Count", "Close Diff", "Proximal Line", "Distal Line", "Time Frame"])

[ferdy]

That is not supported, but you can use selectbox.

[pk367]

Hii @ferdy
I have done this will st.column()

Now i have issues, my pop over button visible large in height i want to make it small so it don’t affect the column structure.

In the given screenshot of my code output you can see chart column popover element going to output of the row bound , how to fix it

here is code part of chart column

 # Display the DataFrame table with popover buttons aligned with symbol names
            # Add header names
            col1 = st.empty()
            col2 = st.empty()
            col3 = st.empty()
            col4 = st.empty()
            col5 = st.empty()
            col6 = st.empty()
            col7 = st.empty()
            col8 = st.empty()
            col9 = st.empty()
            col10 = st.empty()
            col11 = st.empty()

            col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11 = st.columns([14,14,11,21,14,21,21,21,21,7,21])
            # Display column names in bold
            col1.markdown("**Symbol**")
            col2.markdown("**Close**")
            col3.markdown("**Zone**")
            col4.markdown("**Leg-in Date**")
            col5.markdown("""<span title="BC Stand for Base Count , This is number between legin candle and legout candle"> **BC** </span>""", unsafe_allow_html=True)
            col6.markdown("**Leg-out Date**")
            col7.markdown("**Legout Count**")
            col8.markdown("**Proximal Line**")
            col9.markdown("**Distal Line**")
            col10.markdown("""<span title="TF Stand for Time Frame , This is Chart time for analysing stock to find zone">  **TF** </span>""", unsafe_allow_html=True)
            col11.markdown("**Chart**")
            
            for index, row in df.iterrows():
                try:
                    legin_date = pd.to_datetime(row['Leg-in Date'])
                    legout_date = pd.to_datetime(row['Leg-out Date'])

                    start_date = (legin_date - pd.Timedelta(days=10)).strftime('%Y-%m-%d')
                    end_date = datetime.datetime.now().strftime("%Y-%m-%d")
                    with col1:
                        st.write(row['Symbol'])
                            
                    with col2:
                        st.write(row['Close'])
                        
                    with col3:
                        st.write(row['Pattern'])
                        
                    with col4:
                        st.write(row['Leg-in Date'])
                        
                    with col5:
                        st.write(row['Base Count'])
                        
                    with col6:
                        st.write(row['Leg-out Date'])
                        
                    with col7:
                        st.write(row['Legout Count'])

                    with col8:
                        st.write(row['Proximal Line'])

                    with col9:
                        st.write(row['Distal Line'])

                    with col10:
                        st.write(row['Time Frame'])
                    with col11:
                        with st.popover(f"📊"):
                              plot_candlestick(stock_data.loc[start_date:end_date], row['Symbol'], start_date, end_date, legin_date, legout_date)
                        
                        
                except Exception as e:
                    st.error(f"Error occurred while processing {row['Symbol']}: {e}")

if __name__ == "__main__":
    main()

[pk367]

Dear mentor , I have issue related code output layout and structure

when I running my code and see output in desktop steamlit cloud plateform , table column structure is ok but when I am moving to mobile and see output it is different here , In the mobile view table column are not properly expanding and limited to input Field right and left border area , I will attach screenshot of both screen , you can see what the actual issue 'also I will share my code part which is responsible for taking user input and printing table column
here is two code snippet . 1st is for user input and second is for printing table column

    user_input_option = st.selectbox("Select demand zone Scan Option", ["Enter custom stock symbols", "Select niftystocks"])

    col1, col2 = st.columns(2)

    with col1:
        if user_input_option == "Enter custom stock symbols":
            user_selected_companies = st.text_input("Symbol Names", help="Enter Indian stock symbol names separated by space. For example: 'TCS INFY HDFC'.")
            max_base_candles = st.number_input("Maximum Base Candles", min_value=1, value=2, help="Enter the maximum number of base candles to consider. Default value is 2.")

            if user_selected_companies:
                companies_list = user_selected_companies.split()
                companies_with_ns_suffix = add_ns_suffix(companies_list)

            else:
                companies_with_ns_suffix = []
        elif user_input_option == "Select niftystocks":
            selected_file = st.selectbox("Select niftystocks", ["nifty50stocks", "nifty100stocks", "nifty500stocks"])
            max_base_candles = st.number_input("Maximum Base Candles", min_value=1, value=2, help="Enter the maximum number of base candles to consider. Default value is 2.")

            if selected_file:
                user_selected_companies = read_company_names_from_file(selected_file)
                companies_with_ns_suffix = add_ns_suffix(user_selected_companies)
            else:
                companies_with_ns_suffix = []
        else:
            companies_with_ns_suffix = []

        # Add the following line to track button click status
        patterns_found_button_clicked = False

    with col2:
        if user_input_option in ["Enter custom stock symbols", "Select niftystocks"]:
            time_frames_input = st.text_input("Time Frames", "1d", help="For single time frames, enter one time frame (e.g., '1d'). For multiple time frames, enter them separated by space (e.g., '1d 1wk 1mo').")
            time_frames = [tf.strip() for tf in time_frames_input.split()]
            displayed_patterns_number = st.number_input("Max Demand Zone", min_value=1, value=1, help="Enter the maximum number of demand zones to find in each stock. The default value is 1.")
    
    find_patterns_button = None
    if user_input_option in ["Enter custom stock symbols", "Select niftystocks"]:
            find_patterns_button = st.button("Find Patterns")
            
            # Update the condition to check if the button has been clicked
            if find_patterns_button and companies_with_ns_suffix:
                patterns_found_button_clicked = True

                start_time = time.time()
                patterns_found = []
                for company in companies_with_ns_suffix:
                    patterns = find_demand_zone_legin_base_legout_pattern(company, "2020-01-01", datetime.datetime.now().strftime("%Y-%m-%d"), max_base_candles, time_frames)
                    if patterns:
                        patterns_found.extend(patterns)

2nd code snippet which print table column

                # Add header names
                col1 = st.empty()
                col2 = st.empty()
                col3 = st.empty()
                col4 = st.empty()
                col5 = st.empty()
                col6 = st.empty()
                col7 = st.empty()
                col8 = st.empty()
                col9 = st.empty()
                col10 = st.empty()
                col11 = st.empty()

                col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11 = st.columns([14,14,11,21,14,21,21,21,21,7,21])

                # Display column names in bold
                col1.markdown("**Symbol**")
                col2.markdown("**Close**")
                col3.markdown("**Zone**")
                col4.markdown("**Leg-in Date**")
                col5.markdown("""<span title="BC Stand for Base Count , This is number between legin candle and legout candle"> **BC** </span>""", unsafe_allow_html=True)
                col6.markdown("**Leg-out Date**")
                col7.markdown("**Legout Count**")
                col8.markdown("**Proximal Line**")
                col9.markdown("**Distal Line**")
                col10.markdown("""<span title="TF Stand for Time Frame , This is Chart time for analysing stock to find zone">  **TF** </span>""", unsafe_allow_html=True)
                col11.markdown("**Chart**")

                with st.container():
                    for index, row in df.iterrows():
                        try:
                            legin_date = pd.to_datetime(row['Leg-in Date'])
                            legout_date = pd.to_datetime(row['Leg-out Date'])

                            start_date = (legin_date - pd.Timedelta(days=10)).strftime('%Y-%m-%d')
                            end_date = datetime.datetime.now().strftime("%Y-%m-%d")
                            with col1:
                                st.write(row['Symbol'])

                            with col2:
                                st.write(row['Close'])

                            with col3:
                                st.write(row['Pattern'])

                            with col4:
                                st.write(row['Leg-in Date'])

                            with col5:
                                st.write(row['Base Count'])

                            with col6:
                                st.write(row['Leg-out Date'])

                            with col7:
                                st.write(row['Legout Count'])

                            with col8:
                                st.write(row['Proximal Line'])

                            with col9:
                                st.write(row['Distal Line'])

                            with col10:
                                st.write(row['Time Frame'])
                            with col11:
                                with st.popover(f"📊"):
                                    plot_candlestick(stock_data.loc[start_date:end_date], row['Symbol'], start_date, end_date, legin_date, legout_date)


                        except Exception as e:
                            st.error(f"Error occurred while processing {row['Symbol']}: {e}")

if __name__ == "__main__":
    main()

Now here is screent shot of code output in laptop which is looking correct as per my requirement

Now here is screentshot of code output in Mobile screeen desktop mode which is not looking correct as per my requirement , because table columns are not expanded correctly