Black Lives Matter. Please consider donating to Black Girls Code today.

Scrollable table

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

2 Likes

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

Any recommendations?

Thanks!

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')

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.

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

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}