Tabulator style for Fast Templates

Showcase
,
1

I am working on improving the styling for Tabulator in the Fast Templates.

The goal is to get something that just works with these Fast whether you use the default or dark theme and which accent_color you use. See improve Tabulator style for Fast Templates by MarcSkovMadsen · Pull Request #2425 · holoviz/panel (github.com)

I would like to share the style sheet I have created because I believe it’s already very useful for existing applications.

You can find the stylesheets here awesome-panel-assets/styles at master · MarcSkovMadsen/awesome-panel-assets (github.com)

In your Panel app you can reference it via for example https://cdn.jsdelivr.net/gh/MarcSkovMadsen/awesome-panel-assets@446cd1d/styles/fast-tabulator.min.css where 446cd1d is the Github commit.

Please note you will also have to set the Tabulator theme to default.

You can serve the script below with panel serve app.py --autoreload.

import panel as pn
import pandas as pd
import pathlib
from scss import Scss
pn.config.css_files.append("https://cdn.jsdelivr.net/gh/MarcSkovMadsen/awesome-panel-assets@446cd1d/styles/fast-tabulator.min.css")
pn.extension(sizing_mode="stretch_width")


SCSS_FILE = (pathlib.Path(__file__).parent/"tabulator.scss")
CSS_FILE = (pathlib.Path(__file__).parent/"tabulator.css")
compiler = Scss()

css_panel = pn.pane.HTML(height=0, width=0, sizing_mode="fixed", margin=0)


# def update_css_panel():
#     # scss = SCSS_FILE.read_text()
#     # css=compiler.compile(scss)
#     css = CSS_FILE.read_text()
#     css_panel.object = "<style>" + css + "</style>"
# update_css_panel()
# pn.state.add_periodic_callback(update_css_panel, period=1000)


ACCENT_COLOR = "#FDAC53"
data = pd.DataFrame(
    {
        "x": [1,2,3,4,5,6,7,8,9,10]*10,
        "y": [2,4,6,8,10,8,6,4,2,0]*10,
        "float": [0.1, 0.3, 0.2, 0.4, 0.5, 0.9, 0.6, 0.7, 1.0, 0.8]*10,
        "bool": [True, False]*50,
    }
)
tabulator_formatters = {
    'float': {'type': 'progress', 'max': 1.0, 'color': "darkgrey"},
    'bool': {'type': 'tickCross', }
}
tabulator = pn.widgets.Tabulator(data.sample(frac=1), theme="default", formatters=tabulator_formatters, pagination='remote', page_size=20, height=547)

MAPBOX_KEY = "pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ"

json_spec = {
    "initialViewState": {
        "bearing": -27.36,
        "latitude": 52.2323,
        "longitude": -1.415,
        "maxZoom": 15,
        "minZoom": 5,
        "pitch": 40.5,
        "zoom": 6
    },
    "layers": [{
        "@@type": "HexagonLayer",
        "autoHighlight": True,
        "coverage": 1,
        "data": "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv",
        "elevationRange": [0, 3000],
        "elevationScale": 50,
        "extruded": True,
        "getPosition": "@@=[lng, lat]",
        "id": "8a553b25-ef3a-489c-bbe2-e102d18a3211",
        "pickable": True
    }],
    "mapStyle": "mapbox://styles/mapbox/dark-v9",
    "views": [
        {"@@type": "MapView", "controller": True}
    ]
}

deck_gl = pn.pane.DeckGL(json_spec, mapbox_api_key=MAPBOX_KEY, sizing_mode='stretch_width', height=400)

template=pn.template.FastListTemplate(
    site="Awesome Panel",
    title="Fast Tabulator Styling",
    main=[pn.Column("## 🎨 Tabulator with custom Microsoft FAST.DESIGN stylesheet", tabulator), pn.Column("## ❤️ Deck GL because it's nice", deck_gl)],
    sidebar=[
        tabulator.param.selection,
        pn.widgets.Button(name="Click Me", button_type="success"),
        pn.widgets.Button(name="Click Me", button_type="success", disabled=True),
        pn.widgets.Button(name="Click Me", button_type="warning"),
        pn.widgets.Button(name="Click Me", button_type="warning", disabled=True),
        css_panel],
    header_background=ACCENT_COLOR,
    header_accent_base_color="white",
    accent_base_color=ACCENT_COLOR,
)
template.servable()
1 Like