Apoorv Blog

UITableView with Multiple Sections in iOS Swift

Updated on:



Click here to see tutorial on sorting sections by date

Screenshot tutorial

1. First let’s setup the XCode project as usual. Create new single view application X code project. Set project name to table with sections and save it to the desktop.

Set project name

2. Go to main storyboard and select view controller and delete it. Add Table View Controller in the main storyboard

Add table view controller

3. Select table view controller and make it Initial View Controller.

set initial view controller

4. Select table view controller and go to Editor -> Embed in -> Navigation Controller. Then set navigation item title to Menu.

set navigation title

5. Select prototype cell. Set it’s identifier to menuCells.

set prototype cell identifier

6. Delete view controller swift file and add new cocoa touch class file of subclass UITableViewController and name it MenuTableViewController.

menu swift file

7. Set custom class for MenuTableViewController.

set custom class

8. Open MenuTableViewController Swift file and add an array for section titles and array of array for items corresponding to each section.

11
12
13
14
15
16
17
class MenuTableViewController: UITableViewController {
    
    let sectionTitles = ["Appetizers", "Entrees", "Salads"]
    
    let foodItems = [["Cheese Sticks", "Chicken Tender and fries", "Fish Sticks"], ["Cheese Burger", "Bacon Cheese Burger", "Turkey Burger"], ["Ceasar Salad", "Garden Salad", "Chicken Salad"]]

    override func viewDidLoad() {

9. In view did load set tables footer view to empty view. So you will not see empty rows after content ends.

17
18
19
20
21
22
23
24
25
26
27
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.tableFooterView = UIView()

        // Uncomment the following line to preserve selection between presentations
        // self.clearsSelectionOnViewWillAppear = false

        // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
        // self.navigationItem.rightBarButtonItem = self.editButtonItem
    }

10. Set number of sections to section titles count.

29
30
31
32
33
34
    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return sectionTitles.count
    }

11. Set rows per section based on array count for section index inside food items.

36
37
38
39
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return foodItems[section].count
    }

12. Override title for header in section and set title using section titles at index section.

41
42
43
44
    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        
        return sectionTitles[section]
    }

13. Uncomment cell for row at indexpath method. Set cell identifier to menuCells. Then set cells label text to food item at indexpath section and row.

46
47
48
49
50
51
52
53
54
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "menuCells", for: indexPath)

        // Configure the cell...
        
        cell.textLabel?.text = foodItems[indexPath.section][indexPath.row]

        return cell
    }

14. Finally build and run on iPhone XR.

demo table with sections

comments powered by Disqus