Right-align values in UITable in App Designer

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.