Row content tabulator widget

Panel
1

Hi all,

kindly please advice how to showing row content with show data selected in tabulator format, I try to follow as per documentation but there is an error.
Code

import panel as pn
from bokeh.sampledata.periodic_table import elements
pn.extension ('tabulator')

periodic_df = elements[['atomic number', 'name', 'atomic mass', 'metal', 'year discovered']].set_index('atomic number')
content_fn1 = lambda row: pn.pane.HTML(
    f'<iframe src="https://en.wikipedia.org/wiki/{row["name"]}?printable=yes" width="100%" height="200px"></iframe>',
    sizing_mode='stretch_width'
)
content_fn = lambda row: pn.widgets.Tabulator(elements,selection={row["name"]})

periodic_table = pn.widgets.Tabulator(
    periodic_df, height=350, layout='fit_columns', sizing_mode='stretch_width',
    row_content=content_fn, embed_content=True
)

periodic_table

error message:

ValueError: List parameter 'BaseTable.selection' must be a list, not an object of <class 'set'>.

thanks

2

selection={row["name"]} I think needs to be a list. Wrapping it in {} without a colon makes it a set.

3

Hi @ahuang11 thanks for your advise, however I don’t get what you mean. kindly please give any example probably?

thanks

4

ValueError: List parameter 'BaseTable.selection' must be a list, not an object of <class 'set'>.

x = {1} is a set
x = [1] is a list

5

thanks @ahuang11 for your explanation. Unfortunately tabulator still couldn’t show row content with tabulator format.

basically I want to display another dataframe or subset from dataframe inside that row content.

thanks

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

pn.extension("tabulator")

periodic_df = elements[
    ["atomic number", "name", "atomic mass", "metal", "year discovered"]
].set_index("atomic number")
content_fn1 = lambda row: pn.pane.HTML(
    f'<iframe src="https://en.wikipedia.org/wiki/{row["name"]}?printable=yes" width="100%" height="200px"></iframe>',
    sizing_mode="stretch_width",
)
content_fn = lambda row: pn.widgets.Tabulator(elements, selection=[int(row.name)])

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

periodic_table
7

Perfect , thanks @ahuang11. Will try to show only relevant data since currently all dataframe content still show up.

2 Likes
8

Hi @rh1

I’m still trying to understand what you end goal is. Would it be something like the below?

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

pn.extension("tabulator")

periodic_df = elements[
    ["atomic number", "name", "atomic mass", "metal", "year discovered"]
].set_index("atomic number")

content_fn = lambda row: pn.pane.HTML(
    f'<iframe src="https://en.wikipedia.org/wiki/{row["name"]}?printable=yes" width="100%" height="400px"></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="Panel", title="Tabulator Table with `row_content`", main=[periodic_table], accent="Purple"
).servable()

9

hi @Marc thanks for your code. actually my goal is to display more detail data from dataframe when user click the row in the tabulator, instead we get something information from external info in this example information with the key is the row (atom name) from outside website, now we display more detail from ourself dataframe or database.

So there is combining between selection([Tabulator — Panel v1.3.6]) and content (https://panel.holoviz.org/reference/widgets/Tabulator.html#row-contents but the content is from the selection dataframe one.

is it possible @Marc , kindly please advise.
my code

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

pn.extension("tabulator")

periodic_df = elements[
    ["atomic number", "name", "atomic mass", "metal", "year discovered"]
].set_index("atomic number")

content_fn2 = lambda row: pn.widgets.Tabulator(elements, selection=[int(row.name)-1])
selection_data=content_fn2.selected_dataframe
periodic_table = pn.widgets.Tabulator(
    periodic_df,
    height=350,
    layout="fit_columns",
    sizing_mode="stretch_width",
    row_content=selection_data,
    embed_content=True,
)

a=pn.Row(periodic_table)
a.show()

still have error

image
image783×294 7.18 KB

what my goal is:

image
image826×165 39.4 KB

thanks

10

I think this is what you’re looking for.
Alternatively, I think you can achieve the same with a filter.

image
image776×356 12.5 KB

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

pn.extension("tabulator")

periodic_df = elements[
    ["atomic number", "name", "atomic mass", "metal", "year discovered"]
].set_index("atomic number")

content_fn2 = lambda row: pn.widgets.Tabulator(elements.loc[[int(row.name)-1]])

periodic_table = pn.widgets.Tabulator(
    periodic_df,
    height=350,
    layout="fit_columns",
    sizing_mode="stretch_width",
    row_content=content_fn2,
    embed_content=True,
)

a=pn.Row(periodic_table)
a.show()
1 Like
11

Perfect @dleybel , that’s what I am looking for. Many thanks.