Inset Grouped UITableView with Header Section

Question

I have Used UITableView with Two prototype Cells and Inset Grouped style

Without viewForHeaderInSection Output will be fine

After Add viewForHeaderInSection Output will be Like this

Expected Output

Here is my code

extension DashboardVC:UITableViewDelegate, UITableViewDataSource {
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 45
    }
    
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return UITableView.automaticDimension
    }
    
    func tableView(_ tableView: UITableView, estimatedHeightForHeaderInSection section: Int) -> CGFloat {
        return 70
    }
    
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerCell = tableView.dequeueReusableCell(withIdentifier: "TblHeaderCell") as! TblHeaderCell
        return headerCell
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TblSectionCell", for: indexPath) as! TblSectionCell
        return cell
    }
}

Answer 1

First, Inset Grouped tableView's have additional alignment properties...

If you use default cells and simply set the titleForHeaderInSection, you'll see that the text in the section header is aligned with the text in the cell.

In addition, Inset Grouped rounds the corners of the section of rows -- it does NOT include the section header.

Here's how it looks with a plain UIView as the section header view:

Zoomed in a little:

To get the visual output you're going for, I think you'll want to use your "header cell" as the first row in the section, and your "section cell" for the remaining rows:

I'm guessing the "down arrow / chevron" in your section header indicates you want to expand / collapse the sections? If so, you'll need to refactor your code to display only the first row when the section is collapsed.

Another option would be to NOT use Inset Grouped, and instead customize your cells to round the top corners of the section header and bottom corners of only the last cell in the section ... or round all 4 corners of the header when the section is collapsed.