Is there a way to apply text wrap for tabulator headers via the tabulator widget?

Panel
1

This is a long standing problem for tabular data, i.e., how to create useful column headings without making the column display much wider than is needed for the data. The best way to accommodate meaningful headings is to allow text wrap on the headings, but there does not appear to be a way to do that with widget parameters.

A similar question was posed here: Text wrap for tabulator widget - #4 by Marc, but it was buried in a slightly different topic and has not been addressed to my knowledge.

2

The first step is to know if it is possible and how to do this with tabulator.
The css code snippet you get by googling “text wrap column names tabulator” looks exactly what we need.

Second (optional) step is to check that this still works with latest version of Tabulator ; here a codepen I made by adapting (change “Date Of Birth” to “Date Of Birth day month year”) the basic example of the frontpage of Tabulatorjs.

The third step is to use this css snippet with pn.widgets.Tabulator with raw_css.

import pandas as pd
import panel as pn

css = '''
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title
{
white-space: normal;
text-overflow: clip;
}
'''

pn.extension('tabulator',raw_css=[css])

colName = 'pretty long\nname with, spaces and other\tseparators'
df = pd.DataFrame({colName:[1,2,3]})
slider = pn.widgets.IntSlider(start = 50,end=370)
def width2table(s):
    return pn.widgets.Tabulator(df,widths={colName:s})

pn.interact(width2table,s = slider)

2 Likes
3

Works as advertised ^^^^. Thanks. I also found a quick and dirty way using the
html tag. So simple it’s embarrassing. Note, this works because I’m actually collapsing a columnar multi-index.

df.columns = ['<br>'.join(col_tup) for col_tup in df.columns]

For a regular, non-multi column index, use something like this.

df.columns = ['<br>'.join(col.split()) for col in df.columns]