Scrollable table

📊 Plotly Python
1

hi,

Using figure_factory I created a data table. I need to make it scrollable when I input large amount of data.

How can I make the table scrollable ?

regards

3 Likes
2

Would like to know this as well, for tables with columns over 20, the columns tend to get smushed together.

Any recommendations?

Thanks!

3

Hi @doga and @xesuna,

This isn’t possible with the table produced by figure_factory.create_table, but it is possible with the (relatively) new table trace type (See https://plot.ly/python/table/).

For example:

from plotly.offline import iplot, init_notebook_mode
import plotly.graph_objs as go
init_notebook_mode()

import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv')

trace = go.Table(
    header=dict(values=df.columns,
                fill = dict(color='#C2D4FF'),
                align = ['left'] * 5),
    cells=dict(values=[df.Rank, df.State, df.Postal, df.Population],
               fill = dict(color='#F5F8FF'),
               align = ['left'] * 5))

data = [trace] 
iplot(data, filename = 'pandas_table')

newplot-2
newplot-2.png700×450 23.6 KB

You can scroll the table by clicking and dragging (as long as you don’t click on the cell text itself, or by dragging the scroll bar that appears when you hover on the right edge.

4

Hi @jmmease, running the codeblock that you posted still doesn’t address the problem mentioned by @xesuna. There is no horizontal scrollbar, just a vertical one. When the columns are more than ~10, everything gets smushed together. Is there a workaround?

Warm regards,
Karan

5

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}

1 Like
6

Excuse me @Om1234Nayak where can I use style_header,style_cell, style_data_conditional, fixed_rows? I can’t find this attribute. Here is a more readable way

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}
1 Like