First, we will layout the required view controllers and set their properties.

Secondly, we will create the UI by dragging and dropping objects onto the view.

Finally, we will add the required UIKit class to each view and give various controls a name.

Once the storyboard is complete, code can be added to run the table.

Layout The View Controllers

Let's follow these steps to delete the existing Detail view and replace it with a UITableViewController:

Select the black bar at the bottom of the Detail View and delete it.

Drag a UITableViewController onto the Storyboard from the Object Library.

Create a segue from the Master View Controller to the View Controller that was just added. To create the segue, Control+drag from the Detail cell to the newly added UITableViewController. Choose the option Push under Segue Selection

Select the new segue you created and give it an identifier to reference this segue in code. Click on the segue and enter "TaskSegue” for the Identifier in the Properties Pad , like this:

Change the Master View to be Content: Dynamic Prototypes (the View on the Design Surface will be labelled Prototype Content ).

Change the new UITableViewController to be Content: Static Cells .

Select the View Controller and type TaskDetailViewController for the Class in the Properties Pad.

Finally, enter the StoryboardID as detail, illustrated in the example below.

Once we change the Master view's title to "Choreboard", the storyboard design surface should look like this:

Create the UI

First, select the prototype cell in the Master View Controller and set the Identifier as taskcell, as illustrated below:

Next, follow these steps to create a button that will add new tasks:

Drag a Bar Button Item from the Toolbox into the navigation bar

In the Properties Pad, under Bar Button Item select Identifier: Add (to make it a "+" button).

Enter "AddButton" as the Name. This will enable us to refer to it in code at a later stage.

Now we must build the DetailView. The screenshot below shows the finished UI:

To build the complete layout, first select the table view and open the Property Pad. Update the following properties as follows:

Sections: 2

Style: Grouped

Seperator: None

Selection: No Selection

Now, select the top section of the DetailView and under Properties > Table View Section change rows to '3', as illustrated below: