Help with ui-tabulator Column Headings Required

General
1

I have the following table and I would like to centre the column headers of a couple of the columns;

image
image964×104 5.53 KB

I wish to centre the Protocol & Power headers and so far I have not found a way to do it, so any ideas will be welcome.
As can be seen I have tried hozAlign but that did not work

This is the template code used to generate the above

msg.tbInitObj = {
   "maxHeight": "100%",
   "pagination": "local",
   "paginationSize": 10,
   "paginationCounter": "rows",

   "columns": [
      {"title": "Model Name",    "field": "modelID",        "width": "20%"},
      {"title": "Type",          "field": "type",           "width": "22%"},
      {"title": "Protocol",      "field": "protocol",       "width": "10%"},
      {"title": "Brand",         "field": "brand",          "width": "14%"},
      {"title": "Attribute Set", "field": "attributeSet",   "width": "18%"},
      {"title": "Power", "hozAlign": "center",
         "columns": [
                     {"title": "Source",  
                      "field": "powerSource",    
                      "width": "8%",
                      "formatter": "lookup", 
                      "formatterParams": {"battery": "Battery", "mains": "Mains"}, 

                     },
                     {"title": "Type",    
                      "field": "powerType",      
                      "width": "8%",

                     }
                    ]
      }

   ]

}

I would also like to vertically centre the column headers Model Name -> Attribute Set in the two row space created by the split header Power.

2

This is actually a question to Tabulator...
Anyway, for headers, you should use headerHozAlign
For example:

{"title": "Details","headerHozAlign":"center",
     "columns": [...

As far as I know there is no way to "merge" the top & bottom header rows of "regular" (non-nesting) columns and center the title vertically across the merged cell (like we do in Excel). I assume there could be some CSS tricks for this.

One thing you could do is to bring the title to the bottom row (by nesting it under a blank parent row), e.g.

"columns": [
   {"title":"", "columns": [
      {"title": "Model Name","field": "modelID", "width": "20%"},
      {"title": "Type",      "field": "type",    "width": "22%"},
   ...
3

Thank you for this. I will leave the other headers at the top for the time being.