CODEWITHSUNDEEP
pythonhtmlplotlyplotly-dash
callawayh
callawayh

Reputation: 91

Dash Table that can auto scroll

I am wondering if there is a way that you can have a dash table scroll vertically up and down automatically when the scroll bar is available.

This is a simple example (I used the same dataframe 7 times to make it long enough).

import dash
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
long_data = pd.concat([df,df,df,df,df,df,df])

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in long_data.columns],
    data=long_data.to_dict('records'),
)

if __name__ == '__main__':
    app.run_server(debug=False)

Is there a way to make what's on this page go vertically up and down?

Upvotes: 5

Views: 15037

Answers (4)

mellofellow
mellofellow

Reputation: 57

You can accomplish this using callbacks and dcc.interval, but it is clunky!

Upvotes: -1

Herk
Herk

Reputation: 209

Have you attempted to use "overflow":"Scroll" or overflowY

Example:

dbc.Col(
     html.Div(id='timeline-div',),
          width=4,
          style={'width': '100%', 
                 'height': '750px', 
                 'overflow': 'scroll', 
                 'padding': '10px 10px 10px 20px'
          }
        ),

Resource: https://community.plotly.com/t/how-to-make-a-data-table-scrollable-with-using-overflowy-but-without-the-double-scroll-bars/27920

Upvotes: 1

Om Prasad Nayak
Om Prasad Nayak

Reputation: 41

Issue Fixed :-

                                style_header=
                                {
                                    'fontWeight': 'bold',
                                    'border': 'thin lightgrey solid',
                                    'backgroundColor': 'rgb(100, 100, 100)',
                                    'color': 'white'
                                },
                                style_cell={
                                    'fontFamily': 'Open Sans',
                                    'textAlign': 'left',
                                    'width': '150px',
                                    'minWidth': '180px',
                                    'maxWidth': '180px',
                                    'whiteSpace': 'no-wrap',
                                    'overflow': 'hidden',
                                    'textOverflow': 'ellipsis',
                                    'backgroundColor': 'Rgb(230,230,250)'
                                },
                                style_data_conditional=[
                                    {
                                        'if': {'row_index': 'odd'},
                                        'backgroundColor': 'rgb(248, 248, 248)'
                                    },
                                    {
                                        'if': {'column_id': 'country'},
                                        'backgroundColor': 'rgb(255, 255, 255)',
                                        'color': 'black',
                                        'fontWeight': 'bold',
                                        'textAlign': 'center'
                                    }
                                ],
                                fixed_rows={'headers': True, 'data': 0}

Upvotes: -1

Jay Mody
Jay Mody

Reputation: 4033

I'm not sure if this is what you're looking for, but you can make the table scrollable via style_table (reference):

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in long_data.columns],
    data=long_data.to_dict('records'),
    style_table={
        'overflowY': 'scroll'
    }
)

If you're looking to have the table scroll automatically at a given speed, I doubt dash/plotly has in-built functionality to do that.

Upvotes: 3

Related Questions