How can I make the tabular's width to fit only the content

Hello All,

I am using the tabular widget and I would like to have the table only as big as the data it shows.

Current implementation can be seen in the above image. What I want, is that the table and the button below it to be up to the redline, in this case.

Here is my code:

import panel as pn
import pandas as pd
pn.extension("tabulator", css_files=[pn.io.resources.CSS_URLS['font-awesome']], notifications=True)


def check_assessment(status):
    color = 'black'
    if status == 'True':
        color = 'green'
    elif status == 'False':
        color = 'red'
    return 'color: %s' % color


def feedback_event(event):
    print(report_df)
    pn.state.notifications.info(
        'Feedback sent',
        duration=2000,
    )


img11_path = 'assets/demo_images/Image1_1.png'
img21_path = 'assets/demo_images/Image2_1.png'
img12_path = 'assets/demo_images/Image1_2.png'
img22_path = 'assets/demo_images/Image2_2.png'

feedback_button = pn.widgets.Button(name='Send feedback', button_type='primary', width=200)
feedback_button.on_click(feedback_event)

report_df = pd.DataFrame(
    data={
        'Steps': ['Step1', 'Step2'],
        'Assessment': ['True', 'False'],
        'ExpectedImage': [img11_path, img21_path],
        'ActualImage': [img21_path, img22_path],
        'True': ['True', 'True'],
        'False': ['False', 'False'],
        'Uncertain': ['False', 'False']
    },
    index=[1, 2]
)

tabulator_formatters = {
    'True': {'type': 'tickCross'},
    'False': {'type': 'tickCross'},
    'Uncertain': {'type': 'tickCross'},
    'ExpectedImage': {'type': 'image'},
    'ActualImage': {'type': 'image'}
}

tabulator_editors = {
    'Steps': None,
    'Assessment': None,
    'ExpectedImage': None,
    'ActualImage': None,
    'True': {'type': 'tickCross'},
    'False': {'type': 'tickCross'},
    'Uncertain': {'type': 'tickCross'}
}

report = pn.widgets.Tabulator(
    report_df,
    name='Report from 07.09.2022, 15:46:36',
    layout='fit_data',
    header_align='center',
    text_align='center',
    selectable=False,
    formatters=tabulator_formatters,
    editors=tabulator_editors
)

report.style.applymap(check_assessment, subset=['Assessment'])

template = pn.template.FastListTemplate(
    site="Report feedback",
    title="",
    theme_toggle=False,
    header_background="rgb(95,158,209)",
    main=[pn.Column(report, feedback_button)]
)
template.servable()

Any suggestion is highly appreciated, thank you!

Regards,
Sorin

For some reason, now it works as expected, without doing anything extra - just a restart of the panel serve command.
I will close this.

3 Likes