Make a table auto scrollable

Using Streamlit
1

Hi guys, I’m having a hard mission here.

I’m trying to make this table on my dashboard auto-scrollable, and when it gets to the end of it, make the scroll start again from the beginning, like a loop of scrolling.

I’ve already tried several things, but with no success :confused:, such as injecting JS into the HTML container, but with zero results.

Maybe you have a suggestion. Thanks.

def convert_df(input_df):
    df_html = input_df.to_html(index=False, escape=False, formatters=dict(MODAL_IMG=image_formatter, CANAL=image_formatter))
    
    html_with_container = f"""
            <div id="table-container" style="height: 400px; overflow-y: auto;">
        {df_html}
    </div>
    <script>
        var container = document.getElementById("table-container");
        setInterval(function() {{container.scrollBy(0, 1)}}
        , 100);
    </script>
    """
    return html_with_container

html = convert_df(df)
st.markdown(html, unsafe_allow_html=True)
2

Hi @Alexandre_Choske

Here’s a post on StackOverflow with a solution implemented in jQuery to automatic scroll to bottom and back up once reaching the bottom as you had intended:

Hope this helps!

1 Like
3

Hi @dataprofessor, I tried your solution but also no results.

The styling works, because when I hover the mouse the table border is red.
But the animation (jQuery) is not working.

def convert_df(input_df):
    df_html = input_df.to_html(index=False, escape=False, formatters=dict(MODAL_IMG=image_formatter, CANAL=image_formatter))
    
    html_with_container = f'''
        <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <style>
                .table-container {{
                    height: 400px;
                    width: 100%;
                    overflow-y: auto;
                    border: 2px solid #444;
                }}
                .table-container:hover {{ border-color: red; }}
                table {{ width: 100%; }}
                td {{ padding: 24px; background: #eee; }}
            </style>
        </head>
        <body>
            <div class="table-container" id="table-container">
                {df_html}
            </div>
            <script>
                var $container = $("#table-container");
                function anim() {{
                    var st = $container.scrollTop();
                    var sb = $container.prop("scrollHeight") - $container.innerHeight();
                    $container.animate({{scrollTop: st < sb / 2 ? sb : 0}}, 4000, anim);
                }}
                function stop() {{
                    $container.stop();
                }}
                anim();
                $container.hover(stop, anim);
            </script>
        </body>
        </html>
        '''
    return html_with_container

html = convert_df(df)
st.markdown(html, unsafe_allow_html=True)

image
image272×658 58.3 KB

:frowning:

4

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