Right-align values in UITable in App Designer - matlab

Question

I already asked about this on Matlab Answers but did not get a response there, so I try it here.
I have some numbers I want to show in a UITable. Since I need a specific formatting of the values (three digits after comma, no scientific notation), I converted the values to strings. The problem is that these strings are by default left-aligned which looks not very nice.
When using UITable in GUIDE, I was able to pad strings with leading spaces to get them right aligned like in the following
data = {'1532.000'; ' 5.543'; ' 26.457'};
Using a mono space font, the values are shown like this in the table:
1532.000
5.543
26.457
Currently I am considering switching to App Designer. I am using the same space-padded strings but here the uitable seems to strip them off. That is the result looks like the following:
1532.000
5.543
26.457
Is there a way to make uitable in App Designer keep the spaces like it did in GUIDE?
Of course it would be even better to directly right-align the strings without the need of padding, but as far as I know this is not possible.
In case it matters: I am using Matlab R2016b.
Edit:
Minimal example for generating and filling a UITable. This is a simple AppDesigner GUI where I added only a table and a button (without modifying any attributes). The click callback of the button is used to add the data to the table.
classdef test < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
UITable matlab.ui.control.Table
Button matlab.ui.control.Button
end
methods (Access = private)
% Button pushed function: Button
function ButtonPushed(app, event)
data = {'1532.000'; ' 5.543'; ' 26.457'};
app.UITable.Data = data;
end
end
% App initialization and construction
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure
app.UIFigure = uifigure;
app.UIFigure.Position = [100 100 640 480];
app.UIFigure.Name = 'UI Figure';
setAutoResize(app, app.UIFigure, true)
% Create UITable
app.UITable = uitable(app.UIFigure);
app.UITable.ColumnName = {'Column 1'; 'Column 2'; 'Column 3'; 'Column 4'};
app.UITable.RowName = {};
app.UITable.Position = [127 180 302 185];
% Create Button
app.Button = uibutton(app.UIFigure, 'push');
app.Button.ButtonPushedFcn = createCallbackFcn(app, #ButtonPushed, true);
app.Button.Position = [220 104 100 22];
end
end
methods (Access = public)
% Construct app
function app = test()
% Create and configure components
createComponents(app)
% Register the app with App Designer
registerApp(app, app.UIFigure)
if nargout == 0
clear app
end
end
% Code that executes before app deletion
function delete(app)
% Delete UIFigure when app is deleted
delete(app.UIFigure)
end
end
end
After pushing the button the table looks as follows:
Note that AppDesigner only allows me to modify the code inside the ButtonPushed function.

Answer 1

After investigating this for a while, I found that the reason for the "special" behavior when it comes to a uitable is because it's actually a Java object! (I have no idea how they managed to pull this off or why). In any case, right-aligning the data can be done by inserting one line to your script:
data = {'1532.000'; ' 5.543'; ' 26.457'};
app.UITable.Data = data;
setColumnFormat(java(app.UITable),{'numeric'}); % < Add this
if there's more than one column that you would like to right-align this way, simply replicate {'numeric'} as many times as needed:
setColumnFormat(java(app.UITable), repmat( {'numeric'}, 1, size(data,2) ) );
There's also a slightly shorter notation possible for the styling commands above (thanks #luator for pointing this out):
app.UITable.ColumnFormat = {'numeric'};
app.UITable.ColumnFormat = repmat( {'numeric'}, 1, size(data,2) );
The result:
If I understood Yair's blog correctly, you can find more information about the customization of these table objects by looking for "JIDE Table", or SortableTable.