why isn't app designer table not sorting?

Hi All,

- Just started exploring the App Designer and I can't get the columnsortable work for a table. Can anyone have a look at this? It is in the second tab.

- I also need to add populate the entire table empty initially and first and all second column cells to have dropdownlist, such as {'...','HorLayer','VerLayer','Point'}.

Any ideas would help!

The app file is here: https://www.dropbox.com/s/qzwhwey2wtqvnyd/app2.mlapp?dl=0

This is the code in the appdesigner:

classdef app2 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure         matlab.ui.Figure
        TabGroup         matlab.ui.container.TabGroup
        Tab              matlab.ui.container.Tab
        UIAxes           matlab.ui.control.UIAxes
        Button           matlab.ui.control.Button
        Tab2             matlab.ui.container.Tab
        CheckBox         matlab.ui.control.CheckBox
        UITable          matlab.ui.control.Table
        Button2          matlab.ui.control.Button
        Tab3             matlab.ui.container.Tab
        Tab4             matlab.ui.container.Tab
        UITable2         matlab.ui.control.Table
        DatePickerLabel  matlab.ui.control.Label
        DatePicker       matlab.ui.control.DatePicker
    end

    % Callbacks that handle component events
    methods (Access = private)

        % Button pushed function: Button2
        function Button2Pushed(app, event)
            app.UITable.Data=rand(6);
        end

        % Display data changed function: UITable
        function UITableDisplayDataChanged(app, event)
            newDisplayData = app.UITable.DisplayData;
        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Colormap = [0.2431 0.149 0.6588;0.251 0.1647 0.7059;0.2588 0.1804 0.7529;0.2627 0.1961 0.7961;0.2706 0.2157 0.8353;0.2745 0.2353 0.8706;0.2784 0.2549 0.898;0.2784 0.2784 0.9216;0.2824 0.302 0.9412;0.2824 0.3216 0.9569;0.2784 0.3451 0.9725;0.2745 0.3686 0.9843;0.2706 0.3882 0.9922;0.2588 0.4118 0.9961;0.2431 0.4353 1;0.2196 0.4588 0.9961;0.1961 0.4863 0.9882;0.1843 0.5059 0.9804;0.1804 0.5294 0.9686;0.1765 0.549 0.9529;0.1686 0.5686 0.9373;0.1529 0.5922 0.9216;0.1451 0.6078 0.9098;0.1373 0.6275 0.898;0.1255 0.6471 0.8902;0.1098 0.6627 0.8745;0.0941 0.6784 0.8588;0.0706 0.6941 0.8392;0.0314 0.7098 0.8157;0.0039 0.7216 0.7922;0.0078 0.7294 0.7647;0.0431 0.7412 0.7412;0.098 0.749 0.7137;0.1412 0.7569 0.6824;0.1725 0.7686 0.6549;0.1922 0.7765 0.6235;0.2157 0.7843 0.5922;0.2471 0.7922 0.5569;0.2902 0.7961 0.5176;0.3412 0.8 0.4784;0.3922 0.8039 0.4353;0.4471 0.8039 0.3922;0.5059 0.8 0.349;0.5608 0.7961 0.3059;0.6157 0.7882 0.2627;0.6706 0.7804 0.2235;0.7255 0.7686 0.1922;0.7725 0.7608 0.1647;0.8196 0.749 0.1529;0.8627 0.7412 0.1608;0.902 0.7333 0.1765;0.9412 0.7294 0.2118;0.9725 0.7294 0.2392;0.9961 0.7451 0.2353;0.9961 0.7647 0.2196;0.9961 0.7882 0.2039;0.9882 0.8118 0.1882;0.9804 0.8392 0.1765;0.9686 0.8627 0.1647;0.9608 0.8902 0.1529;0.9608 0.9137 0.1412;0.9647 0.9373 0.1255;0.9686 0.9608 0.1059;1 0 0];
            app.UIFigure.Position = [100 100 851 715];
            app.UIFigure.Name = 'UI Figure';

            % Create TabGroup
            app.TabGroup = uitabgroup(app.UIFigure);
            app.TabGroup.Position = [131 66 510 460];

            % Create Tab
            app.Tab = uitab(app.TabGroup);
            app.Tab.Title = 'Tab';

            % Create UIAxes
            app.UIAxes = uiaxes(app.Tab);
            title(app.UIAxes, 'Title')
            xlabel(app.UIAxes, 'X')
            ylabel(app.UIAxes, 'Y')
            app.UIAxes.Position = [20 215 300 185];

            % Create Button
            app.Button = uibutton(app.Tab, 'push');
            app.Button.Position = [90 142 89 48];

            % Create Tab2
            app.Tab2 = uitab(app.TabGroup);
            app.Tab2.Title = 'Tab2';

            % Create CheckBox
            app.CheckBox = uicheckbox(app.Tab2);
            app.CheckBox.Position = [111 357 89 48];

            % Create UITable
            app.UITable = uitable(app.Tab2);
            app.UITable.ColumnName = {'Column 1'; 'Column 2'; 'Column 3'; 'Column 4'; 'col5'; 'col6'};
            app.UITable.RowName = {};
            app.UITable.ColumnSortable = [true true true false false false];
            app.UITable.ColumnEditable = true;
            app.UITable.DisplayDataChangedFcn = createCallbackFcn(app, @UITableDisplayDataChanged, true);
            app.UITable.Position = [21 115 470 210];

            % Create Button2
            app.Button2 = uibutton(app.Tab2, 'push');
            app.Button2.ButtonPushedFcn = createCallbackFcn(app, @Button2Pushed, true);
            app.Button2.Position = [310 368 100 22];
            app.Button2.Text = 'Button2';

            % Create Tab3
            app.Tab3 = uitab(app.TabGroup);
            app.Tab3.Title = 'Tab3';

            % Create Tab4
            app.Tab4 = uitab(app.TabGroup);
            app.Tab4.Title = 'Tab4';

            % Create UITable2
            app.UITable2 = uitable(app.UIFigure);
            app.UITable2.ColumnName = {''};
            app.UITable2.ColumnWidth = {'auto'};
            app.UITable2.RowName = {};
            app.UITable2.ColumnEditable = true;
            app.UITable2.Position = [131 556 300 80];

            % Create DatePickerLabel
            app.DatePickerLabel = uilabel(app.UIFigure);
            app.DatePickerLabel.HorizontalAlignment = 'right';
            app.DatePickerLabel.Position = [540 654 68 22];
            app.DatePickerLabel.Text = 'Date Picker';

            % Create DatePicker
            app.DatePicker = uidatepicker(app.UIFigure);
            app.DatePicker.Position = [623 654 150 22];

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = app2

            % Create UIFigure and 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

[Adam Danz]

could you attach the mlapp file instead of copy-pasting its content?

[Baha411]

Well it doesn't allow me to attach the file. See below:

Cannot attach this file because:

File format is unsupported for file:app2.mlapp. Use any of these formats:.bmp, .csv, .fig, .gif, .jpg, .jpeg, .m, .mat, .mdl, .mlx, .slx, .sbproj, .pdf, .png, .txt, .xls, .xlsx, .zip

[Baha411]

Please find the .mlapp file in this dropbox link:

https://www.dropbox.com/s/qzwhwey2wtqvnyd/app2.mlapp?dl=0

[Adam Danz]

Got it. Now, how to I recreate the problem?

[Kevin Chng]

Hi,

understanding that the table is on Tab2. However, do you mind elaborate what you wanted to do?

For example, extract the info from exel and then place those data into Table in Tab2, then sort the data according to your requirement?

Answer 1

[Adam Danz]

" I can't get the columnsortable work for a table. Can anyone have a look at this?"

According to documentation, "To enable column sorting, the value of the Data property must be a table array. Setting the ColumnSortable property to true has no effect if the value of the Data property is a numeric, logical, cell array, or cell array of character vectors data type." You're currently loading the UITable with a double matrix (rand(6)). If you want to use the ColumnSortable feature, you'll need to use a table. Then you can hover your mouse over the column header and see the up/down arrows for sorting.

        % Button pushed function: Button2
        function Button2Pushed(app, event)
            app.UITable.Data=array2table(rand(6));   % <---- convert to table!
        end

"I also need to add populate the entire table empty initially"

Use this line below.

        app.UITable.Data = array2table(repmat({''},6)); 

"...and first and all second column cells to have dropdownlist"

This is where things get weird. In order for you to sort columns you need to use a table as your data (as I explained above). However, with table data, it seems you cannot use dropdown lists in the UITable. The code below works when data is a cell array but does not work when data is a table (r2019a).

         function Button2Pushed(app, event)
%             app.UITable.Data=array2table(rand(6));  %<---dropdown list doesn't work
              initData = repmat({''},6);              %<---drowdown list works
              initData(:,1) = {'red'}; 
              app.UITable.Data = initData;
              app.UITable.ColumnFormat = {{'red','blue'},[],[],[],[],[]};

[Baha411]

Thank you Adam, you answered all my questions. Yeah it get weird with the sortablecolumn with columnformat, maybe creating the first column in seperate table with no sortable property, and rest of the columns as seperate table would work. I think whenever I sort the 2nd table, I could update the 1st table cells in the call back. But for now, that's not urgent for me.

I wonder if you could address these quick questions I posted yesterday. And I just saw that you already answered lol... You rock Adam! :D

[Adam Danz]

Glad I could help! Thanks for the feedback.