Is it possible to achieve expandable table header view?

Question

I have implemented table view with expandable section i.e. the section user choose will have number of items for that particular category. For closed section there will be 0 items.

Now for better UI purpose, I want to achieve following type of table view which has expandable header view? In this image, we can see that section looks like a group with items it contains with rounded corners and border. As per default UITableView, this behavior is not possible. Still if any one has implemented, please give some advise whether it is feasible or not.

Rows always start after section. In my case, section's background is expanding. For example, see the difference between 'Brand' and 'Learning skills' header view UI. — NSPratik, May 18 '20 at 12:33
Yes... if I take table view inside cell, how height will be calculated?? — NSPratik, May 18 '20 at 14:34
If I take table view inside cell, and inner table view has 20 rows, how outer cell’s height will be increased automatically to contain those 20 rows rows? — NSPratik, May 18 '20 at 14:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214113/discussion-between-nspratik-and-jawadali). — NSPratik, May 18 '20 at 14:42
using a tableview in a tableview cell is generally not a good idea — DonMag, May 18 '20 at 14:48

King.lbt · Accepted Answer · 2020-05-19T09:16:44.683

1

struct WrapperObject {
    var header : HeaderObject
    var listObject : [ObjectDetail]
}

struct HeaderObject {
    var id : String
    var isOpen : Bool
}

struct ObjectDetail {
    var id : String
    var detailInfo : String
}

In your VC or datasource. Create : private var internalData : [WrapperObject]

After set data, in the delegate of UITableView

extension ViewController : UITableViewDelegate {
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
            // TODO : Custom your own view
            // have a callback to set property isOpen =  true or false to the internalData.
            return UIView()
        }
    }

extension ViewController : UITableViewDataSource {

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

        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            if internalData[section].header.isOpen {
                return internalData[section].listObject.count
            } else {
                return 0
            }

        }

        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            return UITableViewCell() // TODO: custom your own cell
        }
    }

edited May 19 '20 at 09:16

answered May 19 '20 at 06:53

King.lbt

843
5
15

Yes, i understand your question. I just create an example model for your tableView to adapt. Ok, i have updated much more detail. – King.lbt May 19 '20 at 09:16
That is right but in my case, UI is only issue. Look at image in question where header view id different when it is open. It contains all rows like grouping which is totally different than achieving simple expand and collapse. – NSPratik May 19 '20 at 09:19
So your problems is the border of every section or the UI of the session header. You mean the + or the - icon ? – King.lbt May 19 '20 at 09:21
Border of section. Look at `Learning Skills`. The header view behave like a parent view of all rows. – NSPratik May 19 '20 at 09:23
OK, i see, sorry for misunderstanding. In this case, if learning skill is really a header, I think you need to create a tableview inside that header. If learning skill does not behave like header (always top) look like that cell contains a mini tableview – King.lbt May 19 '20 at 09:27
something likes this : https://stackoverflow.com/questions/17398058/is-it-possible-to-add-uitableview-within-a-uitableviewcell/52247846?noredirect=1#comment91446479_52247846 – King.lbt May 19 '20 at 09:28
Yes, but table view inside table view cell is not a good idea I think. We should avoid doing the same. – NSPratik May 19 '20 at 09:29

Is it possible to achieve expandable table header view?

1 Answers1