iOS Table

From Xojo Documentation

Revision as of 15:07, 8 February 2019 by PLefebvre (talk | contribs) (Usage)

A Table is used to display lists of data. Tables can display information in sections, can have "accessories" to indicate that more information is available. Each row of a Table can display images and up to 2 lines of text. In addition you can customize the rows of a table to show pretty much whatever you want.

Below is a list of commonly used events, properties and methods. Refer to iOSTable in the Language Reference for the complete list.



Called when the Detail accessory for a row is tapped.


Called when a row is selected. You are provided the section and row that was tapped.


Use this event to set up any row actions that are available for the row.


Called when the user initiates a "pull-to-refresh" action.


Called when a row action has been selected.


Indicates the editing style for the row when the table is put into edit mode.



Enable usage of the "pull-to-refresh" action for the table.


Use this configure a Table to gets its data from a data source class rather than populating it using the methods.


Indicates the table is currently in edit mode.


Indicates how the table is displayed. There are two choices: Plain and Grouped.


The number of sections in the Table. Use this in conjunction with the various methods to get row counts and other information about the table.


A boolean that indicates if the Table is visible when your app runs.


AddRow, InsertRow

Adds new rows to the end or inserts rows at a specific position of the table.

AddSection, InsertSection

Add new sections to the end or inserts sections at a specific position of the table.


Creates new cells (of type iOSTableCellData) to display in the table.


Creates new custom cells that are made using iOSCustomTableCell.

ReloadData, ReloadDataInSection, ReloadRow

Reloads all the data in the table, just the data for a specific section or a single row.

RemoveAll, RemoveRow, RemoveSection

Removes all rows in the table, a single row in a section or an entire section.


The count of rows in the specified section.


Returns an instance of iOSTableCellData that contains all the information about a row in a section.


Gets or sets the title of a section.

Cell Data

When working with a Table, you will need to manage its rows. The class iOSTableCellData contains information about a row in a table. To populate a table manually, you can create instances of iOSTableCellData (using iOSTable.CreateCell), set its properties and then add it to the Table. Or you can add rows using just a subset of values manually.

Use the RowData method to get the iOSTableCellData for a specific row, which you can then use or modify to change what is displayed.

Below are commonly used properties. Refer to iOSTableCellData in the Language Reference for the complete list.



The type of (optional) accessory to display for the row. This uses the AccessoryTypes enumeration to choose the type of accessory: None, Disclosure, Detail, Checkmark.


The Detail Text is smaller text that displays below the main text for the row.


When an image is specified, it appears in front of the row Text.


The Tag is an Auto that can be used to store any useful, related information about the cell for retrieval later (such as a primary key to a database or an instance of a class containing additional information).


The main text that is displayed for the cell row.

Data Source

Although you can directly add rows to a Table using the AddRow methods, this is only practical for when there are a small number of rows. When you have 50 or more rows in the table you should consider using a Data Source to provide the data for the table to display. This makes much better use of the resources available on iOS.

iOSTableDataSource is an Interface that you implement on a class that will provide the data to the Table. The table is then populated by the class so you do not have to use the Add/Insert methods.

These are the methods of the interface that have to be implemented in a class:


Returns the number of the rows in the specified section.


This method is used to create the iOSTableCellData for the specified section and row.


Returns the total number of sections.


Returns the title for the specified section.


Starting simply, you can manually add rows to a table. A table always has to have at least one section, even if you don't display it. So at a minimum, you would have code like this to add a row to the first section:

Table1.AddRow(0, "First Row")

Using this version of the AddRow method only lets you provide the text for the row. If you need to set other row values, such as the DetailText or an Image, you will need to first create an iOSTableCellData, set its properties and then add it to the Table:

Dim cell As iOSTableCellData
cell = Table1.CreateCell
cell.Text = "Product Name"
cell.DetailText = "Product Details"
cell.Image = ProductImage
Table1.AddRow(0, cell)

Insert works the same as Add but has an additional paramter to specify the row position (0-based) within the section for the newly inserted row.

Using these methods, you can populate a table by looping through the data. For example, if you have an array of customer names, you can loop through them and populate the Table like this:


Table1.AddSection("") // add heading for first letter of name
For i As Integer = 0 To CustomerNames.UBound
Table1.AddRow(0, CustomerNames(i))

To add rows with accessories, you have to use iOSTableCellData because that is where the AccessoryType property is. This code adds rows to a table and sets the accessory to a checkmark:

Dim cellData As iOSTableCellData

For i As Integer = 0 To 50
cellData = Table1.CreateCell
cellData.Text = "Line " + i.ToText
cellData.AccessoryType = iOSTableCellData.AccessoryTypes.Checkmark

Table1.AddRow(0, cellData)

To toggle the checkmark on and off when the cell is tapped, you can put this code in the Table's Action event handler:

Dim cell As iOSTableCellData
cell = Me.RowData(section, row)

If cell.AccessoryType = iOSTableCellData.AccessoryTypes.Checkmark Then
cell.AccessoryType = iOSTableCellData.AccessoryTypes.None
Me.ReloadRow(section, row)
cell.AccessoryType = iOSTableCellData.AccessoryTypes.Checkmark
Me.ReloadRow(section, row)
End If

This code gets the selected cell and tests if the accessory is a checkmark. If it is, then it sets the accessory to None. If there is no accessory, then it sets it to a checkmark. It then reloads the changed row to show the change to the accessory.

The AccessoryTypes enumeration has other accessories you can use instead: Disclosure, Detail and None. The default for cells is None.

If you use an AccessoryType of Detail then tapping the detail indicator calls the Table's AccessoryAction event. In this event you can put the code that performs an accessory-specific action, which is typically to display a new View with additional details. One technique is to have the additional details stored in the Tag of the cell so that you can get it to send to the new View like this:

Dim details As New DetailView
details.ApplyData(Me.RowData(section, row).Tag)

The RowData method is used to get the details of a cell for a specific row. You can then use the data or you can modify it to change what is displayed. After modifying cell data, you'll need to reload the row (or rows) that were modified. This Action event code changes the text of a row that was tapped:

Dim cell As iOSTableCellData
cell = Me.RowData(section, row)
cell.DetailText = "This row was tapped."
Me.ReloadRow(section, row)

To display an image you also have to use iOSTableCellData. This adds a row using an image from the project:

Dim cell As iOSTableCellData
cell = Table1.CreateCell
cell.Image = Product1Image
cell.Text = "Product 1"
Table1.AddRow(0, cell)

Sections can be used to provide ways to group the displayed data. One example might be to group a list of names by the first character of their name. So all names that start with "D" would be in their own group. Assuming you have an array of names, you can sort the array and then populate the Table, creating a new group when the first letter of the name changes:

Dim names() As Text = Array("Anna", "Andy", "Bob", "Chris", "Chuck", "Dave", "Ed", _
"Fred", "Greg", "Harry", "Henry")

Dim lastSectionTitle As Text
Dim sectionNum As Integer
For i As Integer = 0 To names.Ubound
If names(i).Left(1) <> lastSectionTitle Then
lastSectionTitle = names(i).Left(1)
sectionNum = Table1.AddSection(lastSectionTitle)
End If
Table1.AddRow(sectionNum, names(i))

Using a Data Source

See Also

iOSTable, iOSTableCellData, iOSCustomTableCell, iOSTableRowAction classes; iOSTableDataSource, iOSTableDataSourceEditing, iOSTableDataSourceReordering interfaces; UserGuide:iOS UI topic