How do I add a Table in App Designer?

With due respect, the instructions for App Designer are at best counter-intuitive and hermetic. For example, how to create a Table with 3 columns and 3 rows (besides the row of column headings), name columns AND rows, and populate the cells with Default values. Make these cell data entries editable by the user when running the app. The app sould take these Table data (and other data from the Slider, Knob, etc.), run a code that generates a plot.

I am stuck in trying to add Row Names. The User Community advises I need to add Table data first. But there seems to be no place in Design View to add such data!

[Adam Danz]

There are LOTS of options with UI tables. But once you take the time to go through all of them, you'll realize it's fairly managable.

Here are all the properties you can manipulate with uitables:

https://www.mathworks.com/help/matlab/ref/matlab.ui.control.tableappd-properties.html?searchHighlight=uitable&s_tid=doc_srchtitle

And here are some examples of editing uitables in app designer

https://www.mathworks.com/help/matlab/creating_guis/display-an-interactive-table-in-app-designer.html

[Sree]

Thanks, but the basic question still remains: while building a new app using the App Designer, how to address and use all these wonderful properties of Tables from Design View (or Code View)?

[Sree]

Incidentally, this example, copied verbatim from your 2nd link does not work! See attached screen shot.

[Adam Danz]

Categorical inputs work in 2018a but I confirmed that they don't work in 2017b (your version). Anyway, there's lots of examples out there that use numeric, logical, or cell array variables.

[Sree]

Thanks. That example now works (after swtiching to R2018b). But my original question still remains unanswered. When building a new app using the app designer, how does the user build a table (esp. row names) from Design view (or code view)? As is, a table is a no go witout data and the above views don't seem to allow data input. This is unlike other app elements like the slider.

[Adam Danz]

Here's another set of examples of tables built in App.

https://www.mathworks.com/help/matlab/creating_guis/app-or-gui-with-graphical-table.html

If you're adding the table within the app instead of prgrammatically, you can set the parameters from within the app. But you can also set the parameters within the code. The examples in the link above mention the propery "ColumnEditable" which enables/disables the user's ability to edit the table (allow input). This was also covered in one of the links I provided in an earlier comment that lists all properties of tables.

[Sree]

Thanks again. But this example merely shows a page in the documentation. It would be more instructive to let the learner bring up the actual app in question (blood pressure monitoring?) and see how the interactive Table is implemented.

As for my original question, it still remains unanswered. (I did read the PDF manual on Apps.) When building an app from scratch, simple components (slider, knob, drop down, etc.) are self-contained by way of explanation. Not so with Tables. Drag a Table into the app window. The user can edit the column names. Then the music stops. There's no (clear) indication of how to proceed with populating the Table, naming the rows, and so on. Perhaps such can be done only programmatically.

May I recommend a course on "Interplanetary communication" before a scientist or engineer attempts to develop an app? It may help with interpreting Matlab's "instructions" for app designer!

[Adam Danz]

I agree the documentation could be better in that sense.

1. From the App Designer in design mode, right click anywhere on your app background, hover your mouse over 'callbacks', and add a startupFcn callback.
2. Go to Code View and you'll see the startupFcn. Add your data to your table there. You can refer to the documentation I shared which will be helpful now that you know how to add the table data.

app.UITable.Data = {1 2 3 4};

[Sree]

Thanks. By coincidence, I tried the satrtupFCN approach before your suggestion! It works, but just one glitch remains. The Table appears in a new window (instead of the main window where the other items, like sliders are normally dragged into). Getting there! Thanks again for your attention.

[Adam Danz]

If you share that snippet of code I might be able to help. Also, I'll move the response to the 'answers' section so others may find it useful in the future.

[ibenitoseb]

Here is a tutorial on adding rows and columns to tables in app designer:

https://www.youtube.com/watch?v=bmCDBf3U8pg

Answer 1

[Adam Danz]

To add data to a UItable in App Designer, use the startupFcn() after creating the table in the UI.

1. From the App Designer in design mode, right click anywhere on your app background, hover your mouse over 'callbacks', and add a startupFcn callback.
2. Go to Code View and you'll see the startupFcn. Add your data to your table there. Refer to the documentation below to change other properties of the table.

app.UITable.Data = {1 2 3 4};

• Here is a list of all UItable properties available in App Designer.
• Here is a demo of changing those properties within the code.
• Examples of table array data stored in UITables in App Designer (2018a or later).

[Shawn McLean]

Uhhh. Wow. Greaaate answer.

[Luca Re]

i don't see startupFcn callback..i do something wrong?

[Adam Danz]

@Luca Re see doc page:

Startup Tasks and Input Arguments in App Designer

[Luca Re]

I read your link but couldn't find it

[Adam Danz]

In the link, see the image in the first step. You must select your app in the component browser.

Answer 2

[Paul Macey]

Should really have a way to initalize in properties with at least one empty row.....

Here's what I did in the app startupFcn

app.ColorsUITable.Data = cell(1,length(app.ColorsUITable.ColumnName));

[Adam Danz]

That is the way to initialize a table with 1 empty row.

For some data types you can use <missing>

Here's a demo.

Answer 3

[Eric Sargent]

You can edit the RowName, ColumnName and ColumnEditable Properties of a UITable from the Property Inspector of App Designer.

You cannot add Data to a UITable from the Design View of App Designer, you will need to add the data in a StartupFcn (or other callback). For example

function startupFcn(app)
    app.UITable.Data = rand(2,4);
end

Will result in:

[Kristina Francke]

what if i want to add a value in Column 1 row Two only?

[Adam Danz]

app.UITable.Data(2,1) = value;