More Table View Tricks for the iPhone

Go beyond the basics of the iPhone Table View with examples for grouping rows into sections, displaying an index on the side, and adding a Search Bar.

by Wei-Meng Lee

Dec 2, 2009

Page 1 of 3

y previous article on using the Table View in iPhone discussed the basics of this view and how you can use it to display rows of data and how users can use it to drill into more details. However, you can do many more things with the Table View than what that article could possibly cover. Hence, this follow-up article covers some more uses of the Table View. Specifically, you will learn:

How to group the rows in a Table View into sections

How to display an index on the right side of the Table View so that users can directly jump to a particular section of the Table View simply by tapping on the index

How to add a Search Bar to the Table View so that users can search for rows in the Table View

Grouping the Rows in a Table View into Sections

The previous article's example stored a list of all the US states using an NSMutableArray object and displayed all 50 states in the Table View as a single section. It would be very useful to group the 50 states into sections, perhaps alphabetically. The Table View allows you to group rows into sections, so that users have a visual way of viewing related rows.

To group the states into sections, you first declare another NSMutableArray object named stateIndex in the RootViewController.m file:

Rather than manually creating the index by adding “A”, “B”, “C”, etc., to the stateIndex object, you shall iterate through the listOfStates object and then extract the first character of each state. Each character extracted is then added into the stateIndex object. This approach is useful, as you can freely add or remove states from the listOfStates object. At the same time, the approach insures that certain characters (such as “B”) will not be added if there are no state names beginning with that particular character.

To insure that the Table View displays the rows in sections, implement the numberOfSectionsInTableView: method and return the size of the stateIndex object:

//---set the number of sections in the table---
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return [stateIndex count];
}

For each section, you will display a header. In this case, you shall display the beginning character of each state. To display the header for each section, implement the tableView:titleForHeaderInSection: method:

Essentially, you did the same thing as you did in the tableView:numberOfRowsInSection: method. In this case, instead of returning the size of the states object, you extracted the relevant state and used it to populate the Table View cell object.
Finally, release the stateIndex object in the dealloc method:

That's it! Press Command-R to test the application on the iPhone Simulator. Figure 1 shows the Table View displaying the states in sections.

Displaying an Index

Figure 2. Displaying an Index to the Right Side of the Screen: This screenshot shows the Table View displaying the index.

If you have a large number of rows displayed in the Table View, scrolling through them can be quite laborious. Instead of asking the user to scroll from the top to the bottom, it would be helpful to offer a way to jump directly to a particular section. By using an index, you can enable the Table View to do just that. In this example, you have grouped the various states alphabetically and, hence, it would logical to use the alphabet as the index.

The Table View displays the index on the right side of the screen. The user employs the index, which very useful for large number of rows, to jump directly to a section.

Displaying the index in the Table View is very easy: just implement the sectionIndexTitlesForTableView: method and return an array containing the index: