Working example to custom-format a column title/header? - tabulator

Question

I have a formatter that works for column data, using column parameter formatter. Using the same formatter with column parameter titleformatter, I get the error noted below. Also, I don't understand why HTML in title parameter text seems not to work for <b> ... </b> but does work for other things (e.g., <i> ... </i>. A working custom formatter example would help. (I don't see this in Tabulator documentation.) See this montage combining a column header and row header screenshot with common cell text---'bold' in the row looks bolder to me.
Cell text comparison screenshot montage
I've tried emulating some posted sample code, but I get the same error as reported by #dagroj in his comment to #Oli Folkerd's answer (to the question) about titleformatter --- viz. tabulator.min.js:2 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. (Mentioning that here because I don't yet have the reputation to comment there.)
Here is a rendering of my CPT, without the titleformatter.
Corresponding table constructor:
"columnVertAlign": "bottom",
"height": "100%",
"layout": "fitColumns",
"columns": [
{
"title": "<i> absolute_T<--T (noisyAnd)</i>",
"columns": [
{
"title": "<b> NotCorrAnd_EffectiveHyp</b>",
"field": "label",
"align": "right",
"headerSort": false
}
]
},
{
"title": "NotB_EffectiveHyp",
"columns": [
{
"title": "<b>T</B>",
"field": "true",
"align": "center",
"headerSort": false
},
{
"title": "<i>F</i>",
"field": "false",
"align": "center",
"headerSort": false
}
]
},
{
"title": "<b> Belief </b>",
"columns": [
{
"title": "odds",
"field": "odds",
"align": "center",
"headerSort": false
},
{
"title": "log<sub>2</sub> odds",
"field": "log2odds",
"align": "center",
"headerSort": false
}
]
}
]
}
Formatter:
function truthFormatter(cell, formatterParams, onRendered) {
var cellValue = cell.getValue();
var cellElement = cell.getElement();
if (cellValue == "T") {
cellElement.style.backgroundColor = "#0000B3";
cellElement.style.color = "#FFFFFF";
cellElement.style.textAlign = "center";
cellElement.style.fontWeight = "bold";
}
else if (cellValue == "F") {
cellElement.style.backgroundColor = "#B30000";
cellElement.style.color = "#FFFFFF";
cellElement.style.textAlign = "center";
cellElement.style.fontWeight = "bold";
}
else cellElement.style.color = "#000000";
return cell.getValue();
}

Answer 1

Column headers are by default styled to be bold, so adding a bold or strong tag will not make them any bolder. On a side not you are using a mix of lowercase and uppercase "b" in your tags
If you are getting that error it means that your formatter is not returning a valid value, it must either be a string/number or a DOM element of type Node.