How to separate cells into sections with custom header?

Question

What I'm trying to do is separate my cells into sections by their Brand

what Ive been able to do so far is pass data of selected items from HomeVC to populate the cells of the CartVC

I am trying to separate the sections by brand, the brand data is a part of the model Items Class (name, brand, imageUrl, price, & weight) and the Items class retrieves data from CloudFirestore to populate the cells of the HomeVC

How would I be able to to separate the cells into sections by their brand, when passed into the CartVC.

So far what I've done seems to fail, because once I pass an item from the HomeVC to the CartVC I only get one header cell, with the brand name of the first item I passed into the CartVC. When I pass more data into the the CartVC all the cells stay in the section of the first item passed when im trying to section off all my CartCells by their brand

 extension HomeViewController: UITableViewDelegate, UITableViewDataSource {

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return itemSetup.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "HomeCell") as? HomeCell else { return UITableViewCell() }

        let item = itemSetup[indexPath.row]
        cell.configure(withItems: item)
        cell.addActionHandler = { (option: Int) in
            print("Option selected = \(option)")
            self.tray.append(Tray(cart: item))
            item.selectedOption = option
        }

        return cell
    }

}

class CartViewController: UIViewController {

    var items: ProductList!
    var sectionModel: [SectionModel] = []
    var tray: [Tray] = []

    var groupedItems: [String: [Tray]] = [:]
    var brandNames: [String] = []

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

         groupedItems = Dictionary(grouping: tray, by: {$0.cart.brand})
         brandNames = groupedItems.map{$0.key}.sorted()
    }

}

extension CartViewController: UITableViewDataSource, UITableViewDelegate {

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tray.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CartCell", for: indexPath) as! CartCell

        let cart = tray[indexPath.row]
        cell.configure(withItems: cart.cart)

        return cell
    }

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let cartHeader = tableView.dequeueReusableCell(withIdentifier: "CartHeader") as! CartHeader

        cartHeader.storeName.text = "Brand: \(tray[section].cart.brand)"
        return cartHeader
    }

    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 45
    }
}

class Tray {
    var cart: ProductList!

    init(cart: ProductList) {

        self.cart = cart
    }
}

Have you tried returning a number greater than 1 in your CartVC's `numberOfSections(in tableView: UITableView)` method? Maybe something like `sectionModel.count`? — TylerP, Nov 23 '19 at 19:32
I tried but it didn't work ;( I set my CartVC to its base, since everything ive tried hasn't worked since im not so good at seperating cells into sections in the tableview — Evelyn, Nov 23 '19 at 19:43
Essentially in your viewDidLoad, you need to reorganize your items by brand. You can do that using a dictionary for example, with: key = brand name, value = Array of items. Then you need to readapt your delegate functions (numberOfSections, cellForRowAt etc..). Are you using CoreData, Realm, SQLite? — rs7, Nov 23 '19 at 20:14
im using cloud Firestore to store my data **@rs7**, but I just updated my code in my CartVC would I use a dictionary item like that? — Evelyn, Nov 24 '19 at 03:52

score 1 · Accepted Answer · answered Nov 26 '19 at 05:59

just set your your tableview functions like and you'll have no problem setting things up by section

   func numberOfSections(in tableView: UITableView) -> Int {
        return brandNames.count
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        let brand = brandNames[section]
        return groupedItems[brand]!.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cartCell = tableView.dequeueReusableCell(withIdentifier: "CartCell") as! CartCell

        let brand = brandNames[indexPath.section]
        let itemsToDisplay = groupedItems[brand]![indexPath.row]
        cartCell.configure(withItems: itemsToDisplay.cart)

        return cartCell
    }

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let cartHeader = tableView.dequeueReusableCell(withIdentifier: "CartHeader") as! CartHeader

        let headerTitle = brandNames[section]
        cartHeader.brandName.text = "Brand: \(headerTitle)"

        return cartHeader
    }

How to separate cells into sections with custom header?

1 Answers1