How to use titleformatter --- example using CSS classes?

Question

I'd like to render a table as in the screen snippet linked below.

Mock-up of rendering desired (3 variants, all using the same formatter for columns with sub-headings 'T', 'F')

Thanks to help from Oli Folkerd, I have a version that's working, as in the screen snippet linked below.

Table as correctly rendered

This becomes a non-question, perhaps a useful example.

Header spec:

          {title:"T", field:"true", align:"center",
           headerSort:false,
           titleFormatter:title_truthFormatter,
           formatter:childTFormatter}

Formatters:

function cell_truthFormatter(cell, formatterParams, onRendered) {
    var cellValue = cell.getValue();
    var cellElement = cell.getElement();
    if (cellValue == "T") {
    cellElement.style.backgroundColor = "#0000B3"; // Excel: 48, 84, 150 --> #305496
    cellElement.style.color = "#FFFFFF";
    cellElement.style.textAlign = "center";
    cellElement.style.fontWeight = "bold";
    }
    else if (cellValue == "F") {
    cellElement.style.backgroundColor ="#B30000"; // Excel: 192, 0, 0 --> #c00000
    cellElement.style.color = "#FFFFFF";
    cellElement.style.textAlign = "center";
    cellElement.style.fontWeight = 700; // "bold"; // Same...
    }
    else cellElement.style.color = "#000000";
    return cell.getValue();
}

function title_truthFormatter(cell, formatterParams, onRendered) {
    var cellValue = cell.getValue();
    var cellElement = cell.getElement();
    var classToAdd;
    if (cellValue == "T") classToAdd = "truth-true";
    else classToAdd = "truth-false";

    setTimeout(function(){                   
       cell.getElement().parentNode.parentNode.classList.add(classToAdd);
    },100)

    return cell.getValue();
}

function childTFormatter(cell, formatterParams, onRendered) { // #8ea9db
    var cellElement = cell.getElement();
    cellElement.style.backgroundColor = "#8ea9db";
    return cell.getValue();
}

function childFFormatter(cell, formatterParams, onRendered) { // #ff7578
    var cellElement = cell.getElement();
    cellElement.style.backgroundColor = "#ff7578";
    cellElement.style.fontStyle = "italic";
    return cell.getValue();
}

CSS:

.tabulator .tabulator-header .tabulator-col .truth-true {
    background-color: #0000B3 !important;
    color: #FFFFFF;
    text-align: center !important;
    padding-top: 8px !important;
    /* No-op, in tabulator header: font-weight: bold; */
}

.tabulator .tabulator-header .tabulator-col .truth-false {
    background-color: #B30000 !important;
    color: #FFFFFF;
    text-align: center !important;
    padding-top: 8px !important;
    font-style: italic !important;
    /* No-op, in tabulator header: font-weight: bold; */
}

Answer 1

To get this to work with your headers there are a few bits we will need to tweak.

You will need to change your css selectors to use the .tabulator-col class and you will need to and some !important flags to override the inbuilt styling:

.tabulator-col.truth-true {
    background-color: #0000B3 !important;
    color: #FFFFFF;
    text-align: center !important;
}

Then in your title formatter you will need to select a couple of nodes up from the element on the cell to get the full header element rather than just the text. also because the parent technically doesn't exist yet, you will need to wait a few miliseconds for it to be added to the DOM

function truthFormatter(cell, formatterParams, onRendered) {
    //DO YOUR LOGIC TO DECIDE WHAT CLASS SHOULD BE APPLIED

    setTimeout(function(){                   
       cell.getElement().parentNode.parentNode.classList.add("truth-true");
    },100)

    return cell.getValue();
}

At this point it may be simpler to use a separate formatter function for the cells and headers as they need to do different things, though you could also check the classes on the cell element to see if it had the class tabulator-cell to decice how to then apply the class to the correct element