Interactive filtering data table in Plotly by using a dropdown

Question

I am trying to make an interactive table where the values of the table change by selecting a value from a dropdown. This should be done only in Plotly (not Dash) as i need to share the file with other users. (thanks in advance)

For example:

If i chose Channel_1 then the tabel should be

Date	A_item	B_item	C_item
2020-01-27	2	1	9
2020-02-27	8	7	2

If i chose Channel_2 then the tabel should be

Date	A_item	B_item	C_item
2020-03-27	0	10	9

import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({"Date":["2020-01-27","2020-02-27","2020-03-27"],
                   "A_item":[2, 8, 0],
                   "B_item":[1, 7, 10],
                   "C_item":[9, 2, 9],
                   "Channel_type":["Channel_1", "Channel_1", "Channel_2"]
                   })

fig = go.Figure()
fig.add_trace(go.Table(
    header=dict(
        values=items,
        font=dict(size=10),
        align="left"
    ),
    cells=dict(
        values=..... ,
        align = "left")
    ))



updatemenu= []
buttons=[]
for channel in df['Channel_type'].unique():
    buttons.append(dict(method='update',
                        label=channel,
                        args=[{.....}])
                  )




updatemenu=[]
your_menu=dict()

updatemenu.append(your_menu)

updatemenu[0]['buttons']=buttons
updatemenu[0]['direction']='down'
updatemenu[0]['showactive']=True
fig.update_layout(updatemenus=updatemenu)

fig.show()

Answer 1

• you can modify contents of figures. For the use case you note it's modify cells contents
• updatemenus is static, so it's multiple static views onto the dataframe
• code below

import plotly.graph_objects as go

df = pd.DataFrame(
    {
        "Date": ["2020-01-27", "2020-02-27", "2020-03-27"],
        "A_item": [2, 8, 0],
        "B_item": [1, 7, 10],
        "C_item": [9, 2, 9],
        "Channel_type": ["Channel_1", "Channel_1", "Channel_2"],
    }
)

fig = go.Figure(go.Table(header={"values": df.columns}, cells={"values": df.T.values}))
fig.update_layout(
    updatemenus=[
        {
            "buttons": [
                {
                    "label": c,
                    "method": "update",
                    "args": [
                        {
                            "cells": {
                                "values": df.T.values
                                if c == "All"
                                else df.loc[df["Channel_type"].eq(c)].T.values
                            }
                        }
                    ],
                }
                for c in ["All"] + df["Channel_type"].unique().tolist()
            ]
        }
    ]
)

multiple menus

Make updatemenus list a list comprehension

import plotly.graph_objects as go

df = pd.DataFrame(
    {
        "Date": ["2020-01-27", "2020-02-27", "2020-03-27"],
        "A_item": [2, 8, 0],
        "B_item": [1, 7, 10],
        "C_item": [9, 2, 9],
        "Channel_type": ["Channel_1", "Channel_1", "Channel_2"],
    }
)

fig = go.Figure(go.Table(header={"values": df.columns}, cells={"values": df.T.values}))
fig.update_layout(
    updatemenus=[
        {
            "y": 1 - (i / 5),
            "buttons": [
                {
                    "label": c,
                    "method": "restyle",
                    "args": [
                        {
                            "cells": {
                                "values": df.T.values
                                if c == "All"
                                else df.loc[df[menu].eq(c)].T.values
                            }
                        }
                    ],
                }
                for c in ["All"] + df[menu].unique().tolist()
            ],
        }
        for i, menu in enumerate(["Channel_type", "Date"])
    ]
)