ios Tableview with section header and footer example

1. Drag a Table View Controller from the Utilities to the story board.

2. Set the prototype cells to 2 in the attributes inspector for the table view.

3. Add a label to the header cell and set the identifier of the header cell to HeaderCell.

4. Set the identifier of the content cell to tableCell.

5. CustomTableViewHeaderCell.swift, this will be the custom view class for the header cell.

import UIKit

class CustomTableViewHeaderCell: UITableViewCell {
    
    @IBOutlet weak var headerLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        // Configure the view for the selected state
    }

}

6. MyTableviewControllerTableViewController.swift, the table view controller which manages the data for the for rows in the table.

import UIKit

class MyTableviewControllerTableViewController: UITableViewController {

    private let numberOfSections = 3
    var meat = ["Beef","Turkey","Fish", "Lamb", "Chicken", "Pork"]
    var fruit = ["Apple","Banana","Cherry"]
    var vegetable = ["Lettuce","Broccoli","Cauliflower"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    // MARK: - Table view data source

    // return the number of sections
    override func numberOfSections(in tableView: UITableView) -> Int {
        return numberOfSections
    }

    // return the number of rows in the specified section
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        var rowCount = 0
        switch (section) {
        case 0:
            rowCount = meat.count
        case 1:
            rowCount = fruit.count
        case 2:
            rowCount = vegetable.count
        default:
            rowCount = 0
        }
        
        return rowCount
    }

    // Content Cell
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "tableCell", for: indexPath)

        switch (indexPath.section) {
        case 0:
            cell.textLabel?.text = meat[indexPath.row]
        case 1:
            cell.textLabel?.text = fruit[indexPath.row]
        case 2:
            cell.textLabel?.text = vegetable[indexPath.row]
        default:
            cell.textLabel?.text = "Other"
        }
        return cell
    }
    
    // Header Cell
    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let  headerCell = tableView.dequeueReusableCell(withIdentifier: "HeaderCell") as! CustomTableViewHeaderCell
        headerCell.backgroundColor = UIColor.gray
        
        switch (section) {
        case 0:
            headerCell.headerLabel.text = "Meat";
        case 1:
            headerCell.headerLabel.text = "Fruit";
        case 2:
            headerCell.headerLabel.text = "Vegetable";
        default:
            headerCell.headerLabel.text = "Other";
        }
        
        return headerCell
    }
    
    // Footer Cell
    override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        let rect = CGRect(origin: CGPoint(x: 0,y :0), size: CGSize(width: tableView.frame.size.width, height: 20))
        let footerView = UIView(frame: rect)
        footerView.backgroundColor = UIColor.darkGray
        return footerView
    }
    
    // footer height
    override func tableView(_ : UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return 20.0
    }

}

7. To make the section header sticky, add this line in the viewDidLoad method.

self.automaticallyAdjustsScrollViewInsets = false

Complete example in Github