How can I add a <thead> section to a marionette collectionview with tagName: 'table'?

Question

I have a collection view that looks something like this:

var PersonView = Marionette.ItemView.extend({
        tagName: 'tr',
        template: function (model) {
            return _.template("<td><%= data.firstName %></td><td><%= data.lastName %></td>", {
                firstName: model.firstName,
                lastName: model.lastName
            }, { variable: 'data' });
        }
    }),
    PersonCollectionView = Marionette.CollectionView.extend({
        tagName: 'table',
        itemView: PersonView
    });

It works fine, but I can't figure out the best way to add a <thead> section to my table. I thought of changing tagName: 'table' to tagName: 'tbody' and adding the thead section in the layout which displays the collection view, but it doesn't look like a very clean approach. Indeed, if I were to use my collection view elsewhere, I would have to reproduce the thead section in another layout... What is the proposed way of doing this?

PS See https://github.com/shawninder/table-collection-views for a working example. You'll notice the table has no <thead> section, which is what I'm trying to solve.

UPDATE: Fixed with this commit based on accepted answer

Answer 1

You may need to use the CompositeView instead. With CompositeView you can provide a template which adds your thead and use the ItemViewContainer to render you collections. Read the doc and I am sure you will figure out the solution.