Create Indexed TableView

An indexed table  is fundamentally the same as a plain-style table, but with an index running down the right hand edge. Typically, this index displays letters or numbers, which the user can tap to automatically scroll the table to the relevant section. In this tutorial, we are going to display some numbers in a table view and we're using short numbers for the index.

Open Xcode and create a new Single View Application. For product name, use indexedTableDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards checkbox is deselected and Use Automatic Reference Counting checkbox is selected.

First, we setup the basic table. Go to the view controller's NIB file, and drag a Table view from the Objects browser into the NIB’s view.

Connect the new table view to the controller by Ctrl-clicking it and dragging the connection line out to the File’s Owner icon in the Placeholders list. Click the dataSource item in the pop-up, and repeat the process again to connect the delegate .

In ViewController.m, add the two protocol names to the interface line


@interface ViewController () <UITableViewDelegate, UITableViewDataSource>

In the @interface section , create a property to hold the table data and a property for the index.

@property (nonatomic, strong) NSArray *tableData;
@property (nonatomic, strong) NSArray *indexOfNumbers;

In ViewDidLoad , fill the arrays with some data. Change viewDidLoad in


- (void)viewDidLoad 
[super viewDidLoad];

NSString *numbers = @"100 200 300 400 500 600 700 800 900 1000 1100 1200 1300 1400 1500";
self.tableData = [numbers componentsSeparatedByString:@" "];

numbers = @"1 2 3 4 5 6 7 8 9 10 11 12 13 14 15";
self.indexTitlesArray = [numbers componentsSeparatedByString:@" "];

With the array method componentSeperatedByString you can quickly put a serie of numbers into an array. Implement the delegate and datasource required methods.

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 
return 1;

For every number of tableData, there is an corresponding index, so the number of rows per section is one.

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { 
return [self.indexOfNumbers count];

For every index there will be a section.


-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
static NSString *cellIdentifier = @"cellIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

if (!cell)
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];

cell.textLabel.text = [self.tableData objectAtIndex:indexPath.section];

return cell;

The textLabel of the cell will be updated with the corresponding index of tabledata. To use an indexed table view, we need to implement two additional method. First, sectionIndexTitlesForTableView


- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView 
return self.indexOf;

This method returns the titles for the sections of a tableview. The last method we need to implement is the tableView:sectionForSectionIndexTitle:atIndex method


- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index 
return [self.indexTitlesArray indexOfObject:title];

This method returns the index of the section corresponding to the current title and section title index. Build and Run, select an index and you should see the table view moving to the correct row.

You can download the source code of the indexedTableDemo at the ioscreator repository on github.