tabulator: background color of even and odd rows

[symelmu]

Hello all,

ALL software version info

MacOs with Chrome, Safari or FireFox
bokeh 3.6.1 and panel 1.5.4

Description of expected behavior and the observed behavior

Since upgrading to Panel version 1.5.4, I have noticed a display bug with Tabulator.
The bug occurs with the background color of even and odd rows when sizing_mode is set to 'stretch_both' or 'stretch_width'.
The issue becomes visible when hidden columns are displayed.
This issue is not specific to the FastList template; it also occurs with the Bootstrap and Material templates.

In addition, the row is not selected correctly with or without a template (same issue ?).

The bug is not present in version 1.5.2.

Complete, minimal, self-contained example code that reproduces the issue

import pandas as pd
import panel as pn
import random
import numpy as np

pn.extension('tabulator')

n = 100
data = {
    "ID": range(1, n + 1),  
    "Name": [f"Name_{i}" for i in range(1, n + 1)],  
    "Age": [random.randint(18, 70) for _ in range(n)],  
    "Score": [round(random.uniform(50, 100), 2) for _ in range(n)], 
    "Category": [random.choice(["A", "B", "C"]) for _ in range(n)], 
    "Active": [random.choice([True, False]) for _ in range(n)], 
    "Date": pd.date_range("2023-01-01", periods=n), 
    "Comment": [f"Comment_{i}" for i in range(1, n + 1)], 
    "Rating": [round(random.uniform(1, 5), 1) for _ in range(n)], 
    "Value": np.random.randint(100, 500, size=n)}
df = pd.DataFrame(data)

tabulator = pn.widgets.Tabulator(df, page_size=10, sizing_mode='stretch_width')

# template = pn.template.FastListTemplate(title="Tabulator test", main=[tabulator])  # bug 
# template = pn.template.BootstrapTemplate(title="Tabulator test", main=[tabulator])  # bug
template = pn.template.MaterialTemplate(title="Tabulator test", main=[tabulator])  # bug

template.servable()  
template.show() 

Screenshots or screencasts of the bug in action

Initially, the columns from 'index' to 'Date' are visible. The even and odd rows are displayed correctly.

We scroll to the right to display the hidden columns 'Comment' and 'Rating'. The even and odd rows are displayed correctly from 'Age' to 'Date', but not for 'Comment' and 'Rating'.

[broccoliboy]

I noticed this issue too. It also causes frozen columns to scroll out of view if the table is wide enough.

My fix was to add a stylesheet to the Tabulator widget that unsets max-width on tabulator-table class:

pn.widgets.Tabulator(
    ...
    stylesheets=['.tabulator-table {max-width: unset;}']
)

This allows the table to expand to the full width of its container div and seems to fix both row background and frozen column issues.

Tested on Chrome, Firefox, and Safari using Panel v1.5.4.

[philippjfr]

Seems related to https://github.com/holoviz/panel/pull/7425/files