Main Content

Programmatic App that Displays a Table

This example shows how to display a table in an app using the uitable function. It also shows how to modify the appearance of the table and how to restrict editing of the table in the running app.

Create a Table UI Component Within a Figure

The uitable function creates an empty UI table in the figure.

fig = uifigure('Position',[100 100 752 250]);
uit = uitable('Parent',fig,'Position',[25 50 700 200]);

Create a Table Containing Mixed Data Types

Load sample patients data that contains mixed data types and store it in a table array. To have data appear as a drop-down list in the cells of the table component, convert a cell array variable to a categorical array. To display the data in the table UI component, specify the table array as the value of the Data property.

load patients
t = table(LastName,Age,Weight,Height,Smoker, ...
t.SelfAssessedHealthStatus = categorical(t.SelfAssessedHealthStatus, ...

uit.Data = t;

Table of patient data, with columns titled 'LastName', 'Age', 'Weight', 'Height', 'Smoker', and 'SelfAssessedHealthStatus'. The SelfAssessedHealthStatus column displays the status of each patient as one of 'Poor', 'Fair', 'Good', or 'Excellent'.

Customize the Display

You can customize the display of a UI table in several ways. Use the ColumnName property to add column headings.

uit.ColumnName = {'Last Name','Age','Weight', ...
                  'Height','Smoker','Health Status'};

Table of patient data, with columns titled 'Last Name', 'Age', 'Weight', 'Height', 'Smoker', and 'Health Status'. The data in the table is equivalent to the table above.

To adjust the widths of the columns, specify the ColumnWidth property. The ColumnWidth property is a 1-by-N cell array, where N is the number of columns in the table. Set a specific column width, or use 'auto' to let MATLAB® set the width based on the contents.

uit.ColumnWidth = {'auto',75,'auto','auto','auto',100};

Table of patient data with columns of different sizes. The Last Name, Weight, Height, and Smoker columns are the same width, set based on the contents of the column. The Age column is 75 pixels wide, and the Health Status column is 100 pixels wide.

Add numbered row headings by setting the RowName property to 'numbered'.

uit.RowName = 'numbered';

Table of patient data. The first column of the table does not have a title and provides the row number.

Reposition and resize the table using the Position property.

uit.Position = [15 25 565 200];

Table of patient data, moved down in the figure window and made less wide when compared to the previous table. The Age and Health Status columns remain at 75 and 100 pixels wide, respectively. The Last Name, Weight, Height, and Smoker column widths are automatically resized to fit the new table size.

By default, table UI components use row striping and cycle through the specified background colors until the end of the table is reached. If you set the RowStriping property to 'off', the table UI component will just use the first color specified in the BackgroundColor property for all rows. Here, leave row striping 'on' and set three different colors for the BackgroundColor property.

uit.BackgroundColor = [1 1 .9; .9 .95 1;1 .5 .5];

Table of patient data. The first, fourth, and seventh rows are colored yellow, the second, fifth, and eight rows are colored blue, and the third and sixth rows are colored red.

Enable Column Sorting and Restrict Editing of Cell Values

Make all the columns sortable by setting the ColumnSortable property to true. If a column is sortable, arrows appear in the header when you hover your mouse over it.

uit.ColumnSortable = true;

Table of patient data. The Last Name column has arrows pointing up and down next to the column title to indicate that the column is sortable.

To restrict the user's ability to edit data in the table, set the ColumnEditable property. By default, data cannot be edited in the running app. Setting the ColumnEditable property to true for a column allows the user to edit data in that column.

uit.ColumnEditable = [false false true true true true];

Table of patient data. The app user has clicked on the Health Status cell in the first row, which displays a drop-down menu with the options 'Poor', 'Fair', 'Good', and 'Excellent'.

Create a Callback

The Table object has two commonly used callbacks. The CellSelectionCallback executes when the user selects a different cell. The CellEditCallback executes when the user changes a value in a cell.

uit.CellEditCallback = @ageCheckCB;

For example, if you want the Age column to contain values between 0 and 120, set the CellEditCallback to a function such as this one:

function ageCheckCB(src,eventdata)
if (eventdata.Indices(2) == 2 && ...                  % check if column 2
      (eventdata.NewData < 0 || eventdata.NewData > 120))
   tableData = src.Data;
   tableData{eventdata.Indices(1),eventdata.Indices(2)} = eventdata.PreviousData;
   src.Data = tableData;                              % set the data back to its original value
   warning('Age must be between 0 and 120.')          % warn the user

If the user enters a value that is outside the acceptable range, the callback function returns a warning and sets the cell value back to the previous value.

Get All Table Properties

To see all the properties of the table, use the get command.

          BackgroundColor: [3x3 double]
             BeingDeleted: off
               BusyAction: 'queue'
            ButtonDownFcn: ''
         CellEditCallback: @ageCheckCB
    CellSelectionCallback: ''
                 Children: [0x0 handle]
           ColumnEditable: [0 0 1 1 1 1]
             ColumnFormat: {}
               ColumnName: {6x1 cell}
           ColumnSortable: 1
              ColumnWidth: {'auto'  [75]  'auto'  'auto'  'auto'  [100]}
              ContextMenu: [0x0 GraphicsPlaceholder]
                CreateFcn: ''
                     Data: [100x6 table]
                DeleteFcn: ''
              DisplayData: [100x6 table]
    DisplayDataChangedFcn: ''
                   Enable: 'on'
                   Extent: [0 0 0 0]
                FontAngle: 'normal'
                 FontName: 'Helvetica'
                 FontSize: 12
                FontUnits: 'pixels'
               FontWeight: 'normal'
          ForegroundColor: [0 0 0]
         HandleVisibility: 'on'
            InnerPosition: [15 25 565 200]
            Interruptible: on
              KeyPressFcn: ''
            KeyReleaseFcn: ''
                   Layout: [0x0 matlab.ui.layout.LayoutOptions]
            OuterPosition: [15 25 565 200]
                   Parent: [1x1 Figure]
                 Position: [15 25 565 200]
     RearrangeableColumns: off
                  RowName: 'numbered'
              RowStriping: on
      StyleConfigurations: [0x3 table]
                      Tag: ''
                  Tooltip: ''
                     Type: 'uitable'
                    Units: 'pixels'
                 UserData: []
                  Visible: on