Add Rows to Table View Tutorial in iOS8 with Swift

Inside Table Views the data is displayed using rows. These rows can be manipulated, in this tutorial we will add some Rows using user input.This tutorial makes use of Xcode 6 and is build for iOS8.

Update: Apr 22, 2015. This tutorial is updated for Swift 1.2 and Xcode 6.3.

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

Go to the storyboard. In Xcode 6 view controllers are now square by default, so that you can create one user interface use just for multiple devices. In iOS8 you can layout the storyboard using constraints and size classes. Since this app is only going to be for the iPhone, you can disable size classes. In the File Inspector untick Use Size Classes.

Choose Keep size class data for: iPhone, and click Disable Size Classes.

Remove the View Controller from the Storyboard and drag a Table View Controller to the empty canvas. Go to the Editor Menu and choose Embed in -> Navigation Controller. Since we have deleted the original View Controller, we have no initial start point anymore. Select the Navigation Controller, go to the Attribute Inspector and Select the "Is Initial View Controller" checkbox.

Double-click the Title Bar in the Table View Controller and insert the title Cars. Add a Bar button to the right side of the Navigation Bar of Our Table View Controller. Select the bar button item and in the Attributes Inspector change the Identifier to Add. We will use this button to show a new View Controller where we can add new items. The storyboard should look like this. 

Drag a new View Controller on the canvas to the right of our Table View Controller. Drag a Navigation Bar to the Top of the View.. Add the following to this View Controller.

  • Title of "Add Car"
  • Left Bar Button Item, change the Identifier to Cancel in the Attributes Inspector.
  • Right Bar Button Item, change the Identifier to Done in the Attributes Inspector.
  • Text Field

The ViewController should look like this.

Next, Ctrl + Drag from the Add button of Our Table View Controller to the View Controller and select modal. This transformation is called a segue, which means when the user clicks the Add button the new View Controller will be placed on top of the Table View.

Now let's move on to the code. The ViewController.swift file isn't needed anymore, because we have deleted the View Controller in our Storyboard. Next, add another file to the project. Choose iOS->Source->Cocoa Touch Class. Name the class CarListViewController and make it a subclass of UITableViewController.

We need some data model to display the cars, so add the following properties to the class.

var  cars = [String]()
var newCar: String = ""

the cars property is an empty array of Strings and the newCar property is an empty String. In the viewDidLoad method the cars array will be filled. 

override func viewDidLoad() {
  cars = ["BMW","Audi","Volkswagen"]

The delegate methods of the UITableViewDataSource protocol are already implemented, so we only need to tweak them a little. Change the methods to

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
  // 1
  return 1    

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  // 2
  return cars.count

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  // 3
  let cell = tableView.dequeueReusableCellWithIdentifier("carCell", forIndexPath: indexPath) as! UITableViewCell
  cell.textLabel!.text = cars[indexPath.row]  
  return cell
  1. There is only one section in the Table View so we need to return a 1 in the numberOfSectionsTableView method.
  2. The number of rows is equal to the number of items in the cars array so we use the count method of the array class
  3. The name of the car at the current index of our cars array is assigned to the text property of the textLabel property  of the current cell.

As a cellIdentifier the carCell is used, so we need to add this identifier also in the Storyboard. Select the Table View Cell and go to the Attributes inspector, in the Table View Cell Section change the Identifier to carCell.

Also, because we have a created a new Table View Controller class in our Code, we need to assign this class to The Table View in the Storyboard. Select the Cars Table View and go to the identity inspector, in the Custom Class section, change the Class to CarListViewController.

Build and Run the project and the car names will be displayed in our TableView.

We can get to the Add Cars screen using the + button, but this isn't functioning yet. Add another file to the project. Choose iOS->Source->Cocoa Touch Class. Name the class CarDetailViewController and make it a subclass of UIViewController.

Select the Add Cars View Controller in the Storyboard, and go to the identity inspector. In the Custom Class section, change the Class to CarDetailViewController. Open the Assistant Editor and make sure the CarDetailViewController.swift file is visible. Ctrl and drag from the Text Field to the CarDetailViewController class and create the following Outlet

Also add a property to hold the car name

var name: String = ""

Currently, there is no way back from the CarDetailViewController to the CarListViewController. To achieve this we make use of the unwind segue. In CarListViewController.m add the following IBAction methods.

@IBAction func cancel(segue:UIStoryboardSegue) {

@IBAction func done(segue:UIStoryboardSegue) {

Go to the Storyboard. Ctrl+Drag from the Cancel button to the green exit button on the View Controller and select the cancel: method. Repeat the same for the done button. Now on the left side you can see two unwind segue button in the Car Detail View Controller list.

Select the unwind segues and give it a identifier of cancelSegue and doneSegue in the Attributes inspector. We need these identifiers in our code. Go to CarDetailViewController.swift and add the prepareForSegue method

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject!) {
  if segue.identifier == "doneSegue" {
    name = carName.text

When the user presses the done button, the name property is set with the text of our textField. Next implement the Done IBAction method in CarListViewController.swift

@IBAction func done(segue:UIStoryboardSegue) {
    var carDetailVC = segue.sourceViewController as! CarDetailViewController
    newCar =

The CarDetailViewController is set as the source, next the name of the car is added to the cars array.  Build and Run the project, add a car in the textfield, the car is added to the Table View.

You can download the source code of the iOS8SwiftAddRowsTableViewTutorial at the ioscreator repository on Github.