How to create uitableview with multiple sections in iOS Swift

This tutorial has been updated for X code 7.3 & swift 2.2

Uitableview is very important part of iOS ecosystem. Everything from songs playlist to weight trackers use tableview to show data. When you have 10,000 songs or number of rows in your table then its difficult to find right information. So we split tableviews in sections. Then its easier to find right information.

  1. First lets set up the x code project as usual. Create new single view application X code project. Set project name to tableview with sections & save it on desktop.

new x code project

 

2. Go to main storyboard & select view controller & delete it. Add tableview controller in main storyboard.

add table view controller

 

3. Select tableview controller & make it initial view controller

set initial view controller

 

4. Now delete view controller swift file & add new cocoa touch class file of class uitableviewcontroller

add table view controller swift file

 

5. Go to main storyboard; select table view controller & set its class to TableViewController

set custom class

 

6. Now create an array called section to store section title & another array of array called items section row content of tableview as follows

class TableViewController: UITableViewController {

let section = ["pizza", "deep dish pizza", "calzone"]

let items = [["Margarita", "BBQ Chicken", "Pepperoni"], ["sausage", "meat lovers", "veggie lovers"], ["sausage", "chicken pesto", "prawns", "mushrooms"]]

7. Add new method for setting name for each section & set number of sections as follows.

// MARK: - Table view data source

override func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {

return self.section\[section\]

}

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
 // #warning Incomplete implementation, return the number of sections

return self.section.count

}

8. Set number of rows per section as follows

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 // #warning Incomplete implementation, return the number of rows

return self.items\[section\].count

}

9. Uncomment cellForRowAtIndexPath method & add following code

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

// Configure the cell...

cell.textLabel?.text = self.items[indexPath.section][indexPath.row]

return cell

}

9. Now go to main storyboard & select the prototype cell. Set its identifier to tableCell. Also set style to Basic

prototype cell identifier

Now build and run app in iPhone 5s You will see the table populated with items from number array.

tableview with sections
Download X code file
Challenge: Create table view with multiple sections separated by due dates

section by due date
Download Challenge Solution
Uber challenge: Create tableview with multiple sections separated by dates

sorted by dates
Download Uber Challenge Solution

Total 70 Votes
45

Tell us how can I improve this tutorial?

+ = Verify Human or Spambot ?