Add Tables to App Designer Apps

To display tabular data in an App Designer app, use a table UI component. You can configure options for app users to interact with that data by sorting, selecting, or rearranging rows, columns, or cells in the app.

To add a table UI component to an App Designer app, you must work in both Design View and Code View.

Use Design View to:

• Create the table UI component.

• Specify row and column names.

• Specify interactivity options such as sortability and editability.

Create a StartupFcn callback in Code View to:

• Populate the table data.

• Configure the data appearance.

Create Table and Configure Table Behavior

In Design View, follow these steps to add a table UI component to your app:

1. Drag a Table component from the Component Library onto the app canvas.

2. Select the table UI component in the Component Browser.

3. To configure column information for the table, click the button to the right of the column-related table properties. Use the editor to interactively add and rename table columns. You can also specify interactivity options for each column, such as whether the column is editable or sortable when a user interacts with the table in an app.

   

4. To configure row names, use the RowName field in the Component Browser. However, the row names appear only once the table is populated with data when the app is run, and therefore do not appear in Design View.

Populate Table Data

In Code View, use these steps to populate table data in a StartupFcn callback. This callback is executed when a user runs the app.

1. In the Component Browser, right-click the app node and select Callbacks > Add StartupFcn callback. The app node has the same name as your MLAPP file.

   

2. In the callback function code in Code View, programmatically assign your table data to the table UI component using the Data property. For example, this code reads sample patient data and populates the table with that data.

   function startupFcn(app)
       % Read table array from file
       t = readtable("patients.xls");
       vars = {'Age','Systolic','SelfAssessedHealthStatus','Smoker'};
       t = t(1:20,vars);
   
       % Add data to the table UI Component
       app.UITable.Data = t;
   end

   For more information about how table data is displayed in a table UI component, see Display Tabular Data in Apps.

3. Optionally, in the callback function code, modify the way that the table data is displayed by using uistyle. For example, change the background color and font color of the first column of the table by adding this code to the StartupFcn callback.

   s = uistyle("BackgroundColor","black","FontColor","white");
   addStyle(app.UITable,s,"column",1);

   For more information, see Style Cells in a Table UI Component.

Example: App That Displays a Table

This example shows how to display a table UI component in an app that uses table data. The table contains numeric, logical, categorical, and multicolumn variables.

The StartupFcn callback loads a spreadsheet into a table array. Then a subset of the data displays and is plotted in the app. One plot displays the original table data. The other plot initially shows the same table data and then updates when the user edits a value or sorts a column in the table UI component.