Adding a TableView to a View in Xcode 4.2

Sometimes you need something else to be shown on the screen besides just a TableView, maybe you want a search bar at the top or a ToolBar or a bunch of other elements. In this case using a UITableViewController as your view won’t do it. This is a simple guide of one way to solve this (I’m sure there might be others).

I’m using Xcode 4.2 and storyboards on this one although it doesn’t really make much difference in this case, working with xib files would be very similar.

First, for the view instead of using a UITableViewController use a UIViewController, drag it to your storyboard (hook it up with any existing scenes you might already have) and then find the TableView object in your library and drag it inside your view (be careful not to confuse it with the UITableViewController).

Now create a new file of type UIViewController subclass and call it whatever suits your app (I’ll call it DetailViewController for the purposes of this guide) and in your storyboard select the new view you created with the TableView inside and in the “Identity Inspector” set its class to DetailViewController by selecting it from the droplist.

Now since you want to control your TableView from within the view you need to implement a couple delegates so open up your DetailViewController.h file and change the interface line to:

@interface DetailViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

Next you’ll want to hook up your TableView to your view by creating an IBOutlet for it, you can do this by going to the storyboard, making sure you have “show the Assistant editor” with DetailViewController.h open and crtl+click and drag from the TableView to your code and call it myTable (something else if you want).

Your DetailViewController.h file should be looking similar to this:

@interface DetailViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
 
@property (strong, nonatomic) IBOutlet UITableView *myTable;
 
@end

Now if you did this like I said from dragging it in the storyboard you should also have a line like this in your DetailViewController.m file:

@synthesize myTable;

If not then type it now. If you try to build now it should succeed but you’ll have a few warnings because of protocol methods missing in the implementation. This means that since your view is your TableView’s delegate it is responsible for implementing its protocol and there are lots of methods in it but only a few are really needed for now. In your DetailViewController.m put in the following methods:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}
 
- (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];
    }
 
    // configure your cell here...
 
    return cell;
}

You might also want to implement other delegate methods like – (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath but that’s beyond the scope of this guide.

The last step is to hook up your view as the TableView’s delegate and data source. To do this open the storyboard file, select your TableView and go to your “Connections Inspector” and drag from dataSource and delegate to your ViewController.

That’s it, you might want to customize your TableView, its cells and put in the other elements into the view now, have fun with it.