How expand the tableview with with 3 sub items with title

672 Views Asked by At

I'm getting the data from api' like below i want show in tableview with expandable with title subitems> subitems

{
        "CategoryId": "25",
        "Name": "Bathroom Furniture",
        "ParentID": "0",
        "cPath": "25",
        "level": 0,
        "SubItems": [
            {
                "CategoryId": "43",
                "Name": "Bathroom Cabinets",
                "ParentID": "25",
                "cPath": "25_43",
                "level": 1,
                "SubItems": []
            },
            {
                "CategoryId": "44",
                "Name": "Bathroom Mirrors",
                "ParentID": "25",
                "cPath": "25_44",
                "level": 1,
                "SubItems": []
            },
            {
                "CategoryId": "45",
                "Name": "Bathroom Storage Units",
                "ParentID": "25",
                "cPath": "25_45",
                "level": 1,
                "SubItems": []
            },
            {
                "CategoryId": "209",
                "Name": "Bathroom Vanities",
                "ParentID": "25",
                "cPath": "25_209",
                "level": 1,
                "SubItems": []
            },
            {
                "CategoryId": "42",
                "Name": "Bathroom Furniture Sets",
                "ParentID": "25",
                "cPath": "25_42",
                "level": 1,
                "SubItems": []
            },
            {
                "CategoryId": "37",
                "Name": "Toilet Seats",
                "ParentID": "25",
                "cPath": "25_37",
                "level": 1,
                "SubItems": []
            },
            {
                "CategoryId": "41",
                "Name": "Bathroom Accessories",
                "ParentID": "25",
                "cPath": "25_41",
                "level": 1,
                "SubItems": []
            },
            {
                "CategoryId": "40",
                "Name": "Bathroom Bins",
                "ParentID": "25",
                "cPath": "25_40",
                "level": 1,
                "SubItems": []
            }
        ]
    }

enter image description here

1

There are 1 best solutions below

0
SGDev On

Demo code for your problem

class CollapsibleTableViewDemoVC: UIViewController, UITableViewDataSource, UITableViewDelegate {


    private let headerIdentifier = "headerCell"
    private let cellIdentifier = "contentCell"

    private let sectionTitles = ["First section", "Second section", "Third section"]
    private var sectionIsExpanded = [true, true, true]
    private let numberOfActualRowsForSection = 4

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

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // First will always be header
        return sectionIsExpanded[section] ? (1+numberOfActualRowsForSection) : 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.row == 0 {
            let cell = tableView.dequeueReusableCell(withIdentifier: headerIdentifier, for: indexPath) as! PseudoHeaderTableViewCell
            cell.titleLabel.text = sectionTitles[indexPath.section]

            if sectionIsExpanded[indexPath.section] {
                cell.setExpanded()
            } else {
                cell.setCollapsed()
            }
            return cell
        } else {
            let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)
            cell.textLabel?.text = "Section: \(indexPath.section); row \(indexPath.row)"
            return cell
        }
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // Expand/hide the section if tapped its header
        if indexPath.row == 0 {
            sectionIsExpanded[indexPath.section] = !sectionIsExpanded[indexPath.section]

            tableView.reloadSections([indexPath.section], with: .none)
        }
    }
 }

PseudoHeaderTableViewCell Class code:

class PseudoHeaderTableViewCell: UITableViewCell {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var statusButton: UIButton!

    func setExpanded() {
        statusButton.setImage(#imageLiteral(resourceName: "arw_red_top"), for: .normal)
    }

    func setCollapsed() {
        statusButton.setImage(#imageLiteral(resourceName: "arw_red_bottom"), for: .normal)
    }
}

Storyboard UI :

enter image description here

For reference : https://medium.com/@legonaftik/uitableview-with-collapsible-sections-927d726b985c .