holoviz / panel

Panel: The powerful data exploration & web app framework for Python
https://panel.holoviz.org
BSD 3-Clause "New" or "Revised" License
4.64k stars 504 forks source link

tabulator widget doesn't display rows well for small row sizes with Material and Bootstrap themes #5029

Open federalSoftware opened 1 year ago

federalSoftware commented 1 year ago

ALL software version info

Panel version 1.0.4 Windows 11 Microsoft Edge Version 114.0.1823.37 (Official build) (64-bit) Google Chrome Version 114.0.5735.45 (Official Build) beta (64-bit) Google Chrome Version 114.0.5735.91 (Official Build) (64-bit)

Description of expected behavior and the observed behavior

I am using bootstrap or material theme and want the tabulator widgets to display the rows with a small size. In both themes, the rows are displayed with a size that is greater than the defined size, however the size of the content of the rows is shown cut off. With the Native themes, Fast and Design are displayed correctly.

to change the size of the row I use the following statement.

 pn.widgets.Tabulator(df, configuration={
     'clipboard': True,
     'rowHeight': 25,
     'columnDefaults': {
         'headerSort': False,
     }}, sizing_mode='stretch_width',height=500,design=design)

Where I define the size of 25 in rowHeight

Example Code

# code goes here between backticks
import numpy as np
import panel as pn
import pandas as pd
import datetime as dt
from panel.theme import Bootstrap, Material, Native, Design,Fast

pn.extension('tabulator')
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)],
    'datetime': [dt.datetime(2019, 1, 1, 10), dt.datetime(2020, 1, 1, 12), dt.datetime(2020, 1, 10, 13)]
}, index=[1, 2, 3])

def create_components(design):
    return pn.Row(
    pn.widgets.Tabulator(df, configuration={
        'clipboard': True,
        'rowHeight': 25,
        'columnDefaults': {
            'headerSort': False,
        }}, sizing_mode='stretch_width',height=500,design=design)

    )

layout=pn.Tabs(
    ('Native', create_components(Native)),
    ('Fast', create_components(Fast)),
    ('Design', create_components(Design)),
    ('Bootstrap', create_components(Bootstrap)),
    ('Material', create_components(Material)),
)
layout.servable()

Screenshots or screencasts of the bug in action

With Native theme. Works fine

ok format

With Material theme. doesn't work well

wrong format

philippjfr commented 1 year ago

This seems primarily an issue with the theme itself, since it defines a min_height: 40px and padding: 12px for each row. Thinking about ways to address this but it probably will involve of providing custom CSS to override the theme values.