Indexed Table View Tutorial in iOS8 with Swift

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. This tutorial is made for iOS8.3 and built with Xcode 6.3.1

Open Xcode and create a new Single View Application. For product name, use IOS8SwiftIndexedTableViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Remove the View Controller from the Storyboard and drag a Navigation Controller to the empty canvas. When the initial View Controller is deleted there isn't a starting point defined. Select the Navigation Controller and go to the Attribute Inspector. In the View Controller Section  elect the "Is Initial View Controller" checkbox.

Double-click on the Navigation Bar in The Table View Controller and set the title to "Numbers".  Select the Table View Cell and go to the Attributes Inspector. In the Table View Cell section set the Identifier  to "Cell".

The Storyboard should look like this.

Since we have deleted the View Controller from the Storyboard we can also delete the ViewController.swift file. Add a new file to the project, select iOS->Source->Cocoa Touch Class. Name it TableViewController and make it a subclass of UITableViewController.

Go to the TabelViewController.swift file and add the following properties

var tableData = [String]()
var indexOfNumbers = [String]()

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

override func viewDidLoad() {
    var allNumbers = "100 200 300 400 500 600 700 800 900 1000 1100 1200 1300 1400 1500"
    tableData = allNumbers.componentsSeparatedByString(" ")
    var indexNumbers = "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15"
    indexOfNumbers = indexNumbers.componentsSeparatedByString(" ")

With the Array method componentSeperatedByString you can quickly put a series of numbers into an array. Next, implement the delegate and datasource required methods.

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // Return the number of rows in the section.
    return 1

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

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    // Return the number of sections.
    return indexOfNumbers.count

or every index there will be a section. 

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! UITableViewCell

    // Configure the cell...
    cell.textLabel?.text = tableData[indexPath.section]
    return cell

he 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, add the sectionIndexTitlesForTableView method

override func sectionIndexTitlesForTableView(tableView: UITableView) -> [AnyObject]! {
    return indexOfNumbers

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

override func tableView(tableView: UITableView, sectionForSectionIndexTitle title: String, atIndex index: Int) -> Int {
    var temp = indexOfNumbers as NSArray
    return temp.indexOfObject(title)

his method returns the index of the section corresponding to the current title and section title index. A temp variable is created to use the indexOfObject method of NSArray. Build and Run the project, select an index and you should see the table view moving to the correct row.

ou can download the source code of the IOS8SwiftIndexedTableViewTutorial at the ioscreator repository on Github.