matlabcustomizationmatlab-uitablematlab-app-designerundocumented-behavior

How to control the style of uitable headers?

Consider the following code that adds a table to a UIFigure:

hF = uifigure();
hT = uitable(hF, 'Position',[1 1 72 112], ...
  'Data', [ (5:5:20).' + "K", 100+zeros(4,1) + "%" ], ...
  'ColumnName', [compose("\x0394T"), "SR"], 'RowName', [],...
  'ColumnWidth', {30,40});
addStyle( hT, uistyle('HorizontalAlignment', 'center')); % Added in R2019b

This results in:

enter image description here

As you can see above, the headers of the table are still left-justified, and have a smaller font size than the contents - which is quite unpleasant to look at. I would prefer having the header center-justified and having the same or larger font size.

My question is: How can I change the text alignment and font size of the headers?

I'm working with R2019b Update 1.

Solution

  • This can be done by executing several JS commands that modify the style of <div class="mw-default-header-cell"> elements:

    % Get a webwindow handle:
hWin = struct(struct(struct(hF).Controller).PlatformHost).CEF;

% Execute some dojo commands:
hWin.executeJS('W = dojo.query("div[class=mw-default-header-cell]");');
hWin.executeJS('dojo.style(W[0], ''text-align'', ''center'');');
hWin.executeJS('dojo.style(W[1], ''text-align'', ''center'');');
hWin.executeJS('dojo.style(W[0], ''font-size'', ''12px'');');
hWin.executeJS('dojo.style(W[1], ''font-size'', ''12px'');');

    Resulting in:

    enter image description here

    Note that dojo.query("div[class=mw-default-header-cell]") retrieves all divs that are table headers, so if there are multiple tables in the UIFigure, or headers one does not wish to modify, care must be taken with the indices (of W) to modify.