Table of elements with Wikipedia row content

Table of elements. When you click a row it expands and shows the Wikipedia article. Powered by Tabulator.

Introduction

This app demonstrates the power of the row_content feature of Panels Tabulator pane. The app contains a table of the elements. When you click a specific row, it expands and you can study the corresponding Wikipedia article.

The app was developed from code and discussions in Discourse #6710.

App

This app runs entirely in the browser via Pyodide and panel convert.

Open in a new window | Open in Hugging Face Spaces

Code

Show

"""
Source: https://awesome-panel.org/resources/table_of_elements_with_wikipedia_row_content/
"""

import panel as pn
from bokeh.sampledata.periodic_table import elements

pn.extension("tabulator")

@pn.cache
def get_elements():
    return elements[
        ["atomic number", "name", "atomic mass", "metal", "year discovered"]
    ].set_index("atomic number")

periodic_df = get_elements()

# Caching is a hack to avoid flickering. It seems like row content is loaded twice otherwise
# See https://github.com/holoviz/panel/issues/6200
@pn.cache
def content_fn(row):
    return pn.pane.HTML(
        f'<iframe src="https://en.wikipedia.org/wiki/{row["name"]}" width="100%" height="500px"></iframe>',
        sizing_mode="stretch_width"
    )

periodic_table = pn.widgets.Tabulator(
    periodic_df,
    layout="fit_columns",
    sizing_mode="stretch_both",
    row_content=content_fn,
    embed_content=True,
)

pn.template.FastListTemplate(
    site="Awesome Panel",
    site_url="https://awesome-panel.org",
    title="Table of Elements with Wikipedia row content",
    main=[periodic_table],
    accent="#F08080",
    main_layout=None,
    main_max_width="1024px",
).servable()

Download (right-click, save-as)

Gif

Mp4

Png

Social

Please share on social media. Thanks.