Horizontal slider for go.Table

📊 Plotly Python
1

As default Table saved as html is compressed to fit to the width of the screen.
Is it possible to fix column width of a table and add x slider?

Here is a sample code:

import plotly.graph_objects as go
import pandas as pd
import plotly.io as pio

data = {}
for c in range(100):
    name = 'col_'+str(c)
    data[name] = [x for x in range(99)]

df = pd.DataFrame(data)

col_count = len(df.columns)

fig = go.Figure(data=[go.Table(
    columnorder = [x for x in range(col_count)],
    columnwidth = [20]*col_count,
    header=dict(values=list(df.columns),
                fill_color='paleturquoise',
                align='left'),
    cells=dict(values=[df[x] for x in df.columns.tolist()],
               fill_color='lavender',
               align='left'))
])

fig.show() # for JupyterLab

pio.write_html(fig, 'TABLE', auto_open=True) # for browser
2

Hi @Marcas,

You can associate a slider to a go.Table, such that at each step to get displayed only n columns from N, n<N.

import plotly.graph_objects as go
import pandas as pd
import plotly.io as pio

data = {}
for c in range(100):
    name = 'col_'+str(c)
    data[name] = [val+c for val in range(99)]

df = pd.DataFrame(data)

col_count = len(df.columns)

fig = go.Figure(data=[go.Table(
    columnorder = [j for j in range(col_count)],
    header=dict(values=df.columns,
                fill_color='paleturquoise',
                align='left'),
    cells=dict(values=[df[c] for c in df.columns],
               fill_color='lavender',
               align='left'))
])


n=15   #number of columns to be displayed at a time
steps= [{'args': [{'columnorder': [[k+j  for j in range(n) ]],
                   'header.values': [df.columns[k:k+n]],
                   'cells.values': [[df[col] for col in df.columns[k:k+n]]]
                  }], 
         'method': 'restyle'} for k in range((col_count-n+1))] 
                               
                               
fig.update_layout(sliders=[dict(active = 0,
                                minorticklen = 0,
                                steps = steps)]);

To understand the slider step definition, see this notebook on the restyle method.

3

Thank you empet. This is quite clever idea.
I’m familiar with sliders and am bit ashamed I didn’t figure it out on my own. Maybe it’s because I didn’t deal with tables so far.
Meantime, I started learning Dash ( :slight_smile: ) to get more flexibility and more precision regarding outputs.
Thanks again for help. I’ll keep this trick of using sliders with tables in my repertoire.