One of the great challenges facing developers of business apps that run on mobile handsets is the presentation of tabular data in an area slightly larger than a business card. Presenting sufficient data at a size that is conveniently readable is a difficult task, which must be done correctly. Flub this aspect and no one will use the app, regardless of how good its other properties might be.

Fortunately Cocoa Touch, the object-oriented framework used in programming for Apple devices such as the iPhone, iPod Touch, and iPad, provides classes that display data in a compact, tabular format. One of the classes, UITableView, helps arrange such data into a hierarchic structure of lists, with each list presented as a table on the screen. Other supporting classes and methods enable a user to navigate easily through these tables (screens) of information. The user can then quickly drill down through a complex data set to reach the desired information.

Because UITableView is good at managing and displaying information, it often serves as the workhorse in data-centric applications. Unfortunately, the information on using UITableView is scattered throughout volumes of documentation in the Apple iOS SDK. This article consolidates this information and introduces you to UITableView and its related classes. In addition, I demonstrate how to use these classes through two example iOS apps.

Table Terminology and Types

In the abstract, table data is presented as rows of content, and the rows can be formatted in a specific style. Exactly what constitutes a row and a column though is a looser concept on mobile devices that it is on the desktop. An iOS table row is a horizontal strip of content drawn across the width of the screen. Rows are often referred to as cells, from the UITableViewCell class that implements them. The content of a row can be a mix of text or graphics, and you can specify the row's height in points. However, because a row spans the width of the screen, a table displays only one column of information.

Rows of related content can be grouped into sections. Sections are delineated by distinctive header strip that appears at the top of each group and contains a title. An optional footer can appear below each group; it also has a title. The titles can consist of strings or graphics. Like the cells, you can specify the height of headers and footers. The entire table can also have its own optional header and footer.

iOS tables come in two styles: plain and grouped. For the plain style, a table consists of section headers, followed by rows of content displayed as lists. For example, the Mailboxes screen of the iOS Mail app demonstrates this style. For the grouped style, the sections occupy distinct screen regions, with the header and footer content appearing above and below them. The Settings app is an example of this style.

Figure 1 shows these two table styles, and indicates the sections, headers, and footers. Note that while the plain style does support footers, they are often not used.

When you first create a table, you specify its style, either directly in the code or in Interface Builder. Once set, a table's style cannot be changed.

Table rows (cells) have four predefined styles: default, style1, style2, and subtitle. These styles vary slightly in the number of built-in text fields they offer and whether an optional image is displayed. Different cell styles can appear in a table, and a cell's style can change on the fly, as driven by user actions.

Cells can also be customized to present additional text labels or images, or present controls such as sliders, buttons, and switches. For example, in Figure 1 the grouped table (right) has cells that contain a switch and a segment control.