Get Up and Running with Table Views in Xcode

&c=” border=”0″ alt=”” />

Advertise here via BSA

Table views are used in a lot of applications for iPhone and iPad and even Mac OS X. Today I’ll be focusing on a table view for iPhone and iPod Touch. A table view is the most popular type of view controller used and they are used to display a list of information that the user can interact with.

For example, a table view could display a list of fruits and then the user would select one of the fruits and a new screen could be displayed telling the user about that certain fruit. Then they could navigate back and choose another fruit.

The purpose of this tutorial is to get you up and running with table views and populate one with some information from, in our case, an array.

1. To begin, we need to start a new Xcode project. In order to get the full flavor of what it takes to make a table view, we’ll create a Single View Application in Xcode (Xcode 4.3) and press Next.

2. Now, we need to give our project a name, for this example I’ll simply call it TableView. It’s popular to leave out any spaces and simply capitalize the start of each word like I’ve done. You don’t need to worry about the company identifier and you can also leave the class prefix blank. Change the device family to iPhone and ensure that none of the check boxes are selected and then press Next.

3. Choose somewhere to save your project and press Save.

4. Now we have a completely functional iPhone and iPod Touch application that, if you press Command + R (Run) it will load and run completely fine within the iOS Simulator. Granted, the application is very boring and doesn’t do anything useful so return back to Xcode.

Screen Shot 2012-04-22 at 20.15.07

5. Back in Xcode, you’ll notice that there’s a View Controller (you can see it in the left of your window in the Project Navigator), this is essentially the start of where we’ll add or code to create a table view. There’s three files, ViewController.h (a header file for declarations), ViewController.m (an implementation file to give our view controller the ability to perform methods and what not) and finally ViewController.xib (an interface file where can drag interface elements onto our view).

6. Open up ViewController.xib and in the bottom right-hand corner, you’ll notice a little area called the Object Library (if you cannot see it, you can bring it up by going to View – Utilities – Show Object Library), in the search field at the bottom of the library, type in “Table View” and you’ll see a number of results. For this tutorial we need the one called Table View, click and drag it to your view. Now, we’ve created a table view and positioned it on our view but the table view doesn’t have anything to display and doesn’t know what to show.


7. Now, we need to specify where the data for our table view is stored and where it’s being managed and initialized. Select the table view on your view and go to the Connections Inspector in the top right-hand corner (the sixth tab) or go to View – Utilities – Show Connections Inspector.

8. Now, in the connections inspector, select the circle towards the right of the screen next to dataSource and drag it to the File’s Owner located on the left and let go. Congratulations! You’ve just made a connection between the table view and your ViewController. Now, do the same but for the delegate connection underneath dataSource, once again, drag it to File’s Owner. You should now have two connections.


9. We’ve linked the table view to the ViewController but we haven’t actually added any code to our ViewController so, in the Project Navigator, open up ViewController.h and now link it as table view datasource and delegate and also declare an array, see the image below:

Your file should look like (click the image to see it full size):

Screen Shot 2012-04-22 at 20.25.58

You might be asking: what’s the NSArray *dataArray; part mean? Well, an array is essentially a collection of things and we’ll be using dataArray to store the data that will be displayed within our table view.

10. Now, we need to head over to ViewController.m and add some information and code to make the table view actually populate with some data. Add the following code to ViewController.m underneath the -(void)viewDidLoad method:

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
self.title = NSLocalizedString(@"Fruits", @"Fruits");

dataArray = [[NSArray alloc] initWithObjects:
@"Dragon Fruit",
return self;

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return [dataArray count];

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

cell.textLabel.text = [dataArray objectAtIndex:indexPath.row];
return cell;

And ViewController.m such look similar to:

Screen Shot 2012-04-22 at 20.32.45

What we’ve done here is we’ve initialized an array: dataArray = [[NSArray alloc] initWithObjects… and populated it with objects (the fruits). Then we’ve called a method to determine how many rows we should have, in our case it’s the same amount of rows as items within the dataArray and we’ve essentially set up the table view to display our content and also set the table view to look like the default style provided by Apple.

11. If you press Command + R, you’ll find that our table view now contains our fruits and is populated with data. Congratulations, you’ve successfully set up a table view!

Screen Shot 2012-04-22 at 20.36.24

Here we’ve gotten to know some of Xcode’s libraries and inspectors as well as got to grips to create a simple table view that displays and populates with data that we have created from an array. You can now go on to more advanced table view programming topic such as pushing another view controller when the user taps a row within the table view to display a detail view.

Click here to download the source files.

Fuel Your Coding

Leave a Comment