Fast Template + Tabulator w. fast theme styling issues

[MarcSkovMadsen]

I'm on the current master branch of Panel (+0.14.2).

While working on contributing #4350 I've discovered some styling issues:

• Links (<a>) are not styled
• If using list formatter the dropdown list is displayed in the lower, left corner

import panel as pn
import pandas as pd
from io import StringIO
pn.extension("tabulator", template="fast")

csv = """\
ticker,info,action
AAPL,<a href='https://finance.yahoo.com/quote/AAPL' target='_blank'>LINK</a>,buy
MSFT,<a href='https://finance.yahoo.com/quote/MSFT' target='_blank'>LINK</a>,sell
AMZN,<a href='https://finance.yahoo.com/quote/AMZN' target='_blank'>LINK</a>,hold"""

df = pd.read_csv(StringIO(csv))

editors = {
    "ticker": None,
    "action": {"type": "list", "values": {"buy": "buy", "sell": "sell", "hold": "hold"}},
    "info": None,
}

formatters = {
    "info": {"type": "html", "field": "html"},
}

component= pn.widgets.Tabulator(df, editors=editors, formatters=formatters, theme="fast").servable()

You can see the issues in the video below.

fast-template-issue.mp4

[MarcSkovMadsen]

Workaround

The issues can be partially be solved by adding the below css found by inspecting the css for the midnight theme. (I will have to update colors though).

CSS = """
.pnx-tabulator a {color: var(--neutral-foreground-rest);}
.pnx-tabulator a:hover {color: var(--neutral-foreground-hover);}
.tabulator-popup-container{position:absolute;display:inline-block;box-sizing:border-box;background:#666;border:1px solid #888;box-shadow:0 0 5px 0 rgba(0,0,0,.2);font-size:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:10000}.tabulator-popup{padding:5px;border-radius:3px}.tabulator-tooltip{max-width:Min(500px,100%);padding:3px 5px;border-radius:2px;box-shadow:none;font-size:12px;pointer-events:none}.tabulator-menu .tabulator-menu-item{position:relative;box-sizing:border-box;padding:5px 10px;user-select:none}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled{opacity:.5}
.tabulator-edit-list{max-height:200px;font-size:14px;overflow-y:auto;-webkit-overflow-scrolling:touch}.tabulator-edit-list .tabulator-edit-list-item{padding:4px;color:#fff;outline:none}.tabulator-edit-list .tabulator-edit-list-item.active{color:#666;background:#999}.tabulator-edit-list .tabulator-edit-list-item.active.focused{outline:1px solid hsla(0,0%,40%,.5)}.tabulator-edit-list .tabulator-edit-list-item.focused{outline:1px solid #999}.tabulator-edit-list .tabulator-edit-list-item:hover{cursor:pointer;color:#666;background:#999}.tabulator-edit-list .tabulator-edit-list-placeholder{padding:4px;color:#fff;text-align:center}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #888;padding:6px 4px 4px;color:#fff;font-weight:700}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2{padding-left:12px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3{padding-left:20px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4{padding-left:28px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5{padding-left:36px}
"""

[MarcSkovMadsen]

I've tried searching the Panel source code for the tabulator_fast.. csv file to contribute the correction. But I seem not to be able to find it. To me it looks like its only available via the Panel CDN?

I would like to contribute the correction. Where do I find the relevant css file @philippjfr ?

[philippjfr]

Should be in panel/dist/bundled/datatabulator/... But I'd suggest you hold off until branch-1.0 is merged back into main.