Tabulator with FastGridTemplate

Panel
1

Hi !

I am trying v0.11rc3 with the tabulator widget and the fast grid template.I have two problems, the tabulator does not change of light to dark when the theme of the template is changed. The other problem is the _configuration is not applied to the tabulator table. For example. I am trying to make a responsible layout collapsable list as explained here.

When the theme is changed with the toogle element, the plot changes theme, but the table not. As you can see in the code, the configuration is not applied to the table list either.

image
image1896×539 34.7 KB

I thing it is possible to add a attached callback to change the tabulator theme, but for the configuracition issue I do not know how to solve it

The code is below.

import numpy as np
import holoviews as hv
import pandas as pd, datetime as dt

from bokeh.models.widgets.tables import NumberFormatter, BooleanFormatter

import panel as pn 
pn.extension()

template = pn.template.FastGridTemplate(title='FastGridTemplate')
template.compact = 'both' 
pn.config.sizing_mode = 'stretch_both'

xs = np.linspace(0, np.pi)
freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

@pn.depends(freq=freq, phase=phase)
def sine(freq, phase):
    return hv.Curve((xs, np.sin(xs*freq+phase))).opts(
        responsive=True, min_height=400, title="Sine")

@pn.depends(freq=freq, phase=phase)
def cosine(freq, phase):
    return hv.Curve((xs, np.cos(xs*freq+phase))).opts(
        responsive=True, min_height=400, title="Cosine")

col = pn.Column (pn.pane.Markdown("## Settings"), 
                           freq, 
                          phase)

template.sidebar.append(col)

df = pd.DataFrame({
    'int': [1, 2, 3],
    'float': [3.14, 6.28, 9.42],
    'str': ['A', 'B', 'C'],
    'bool': [True, False, True],
    'date': [dt.date(2019, 1, 1), dt.date(2020, 1, 1), dt.date(2020, 1, 10)]
}, index=[1, 2, 3])

bokeh_formatters = {
    'float': NumberFormatter(format='0.00'),
    'bool': BooleanFormatter(),
}

df_widget = pn.widgets.Tabulator(df, formatters=bokeh_formatters)
# layout:"fitDataFill",
df_widget._configuration['layout'] = 'fitDataFill'
df_widget._configuration['responsiveLayout'] = 'collapse'
df_widget._configuration['columns'] = [
   {'int':'Name', 'field':'name', 'responsive':0},
   {'float':'Name', 'field':'name', 'responsive':1},
   {'str':'Name', 'field':'name', 'responsive':2},
   {'bool':'Name', 'field':'name', 'responsive':3},
   {'date':'Name', 'field':'name', 'responsive':0},
]

print (df_widget._get_configuration(''))
template.main[:3, :6] = hv.DynamicMap(sine) 
template.main[:3, 6:] = pn.Column(df_widget, width= 510, 
                    sizing_mode='stretch_height')

template.servable();

Best regards,
N.

2

Hi @nghenzi

Regarding the Tabulator Theme you can specify it manually as below. It’s the same problem for all other panes and widgets. For example Plotly, Altair, JSON etc. Only the Bokeh models are styled according to Fast right now.

fast_tabulator

import numpy as np
import holoviews as hv
import pandas as pd, datetime as dt

from bokeh.models.widgets.tables import NumberFormatter, BooleanFormatter

import panel as pn
pn.extension()

TABULATOR_THEME = {
    pn.template.theme.DefaultTheme: "site",
    pn.template.theme.DarkTheme: "midnight",
}
ACCENT_COLOR = "#E1477E"

template = pn.template.FastGridTemplate(title='FastGridTemplate')
template.compact = 'both'
pn.config.sizing_mode = 'stretch_width'

df = pd.DataFrame({
    'int': [1, 2, 3],
    'float': [3.14, 6.28, 9.42],
    'str': ['A', 'B', 'C'],
    'bool': [True, False, True],
    'date': [dt.date(2019, 1, 1), dt.date(2020, 1, 1), dt.date(2020, 1, 10)]
}, index=[1, 2, 3])

bokeh_formatters = {
    'float': NumberFormatter(format='0.00'),
    'bool': BooleanFormatter(),
}

theme = TABULATOR_THEME.get(template.theme, "site")
df_widget = pn.widgets.Tabulator(df, formatters=bokeh_formatters, theme=theme, sizing_mode="stretch_both")
df_widget._configuration['layout'] = 'fitDataFill'
df_widget._configuration['responsiveLayout'] = 'collapse'
df_widget._configuration['columns'] = [
   {'int':'Name', 'field':'name', 'responsive':0},
   {'float':'Name', 'field':'name', 'responsive':1},
   {'str':'Name', 'field':'name', 'responsive':2},
   {'bool':'Name', 'field':'name', 'responsive':3},
   {'date':'Name', 'field':'name', 'responsive':0},
]

print (df_widget._get_configuration(''))
template.main[:3, :] = pn.Column(df_widget, sizing_mode='stretch_both')
template.sidebar.append(df_widget.param.theme)

template.servable()
3

Nice solution, the theme dict is coupled to the template theme. !!! Thank you so much !

I am still watching to see the solution for the config collapsable list, in order that the columns do not get hidden.

Again, thank you,

Best regards,
N

1 Like