Datatables collapses by default

chinseone

My table loads by default like this:

I have to resize the browser in order to make header expand:

And then click one of the headers(sorting) to expand all rows:

Is there something missing, but I couldn't figure out a reason why collapse is default.

js + handlebars file:

(function() {
    "use strict";

    var MyCollection = Backbone.Collection.extend({

        url: /some/path
    });

    var MyRowView = Reporting.RowView.extend({
        template: _.template($("#row-template").html())
    });

    var MyTableView = Reporting.TableView.extend({
        el: $(".report"),
        header: _.template($("#header-template").html()),
        table: _.template($( "#table-template").html()),
        RowView: MyRowView
    });

    var mycollection = new MyCollection();
    
    var tableView = new MyTableView({
        collection: mycollection
    });
    
    mycollection.fetch();
    
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/template" id="header-template">
    <tr>
        <th>{{i18n "Assignment"}}</th>
        <th>{{i18n "Status"}}</th>
        <th>{{i18n "Success"}}</th>
        <th>{{i18n "Score"}}</th>
        <th>{{i18n "Comments"}}</th>
        <th>{{i18n "Rating"}}</th>
    </tr>
</script>

<script type="text/template" id="row-template">
    <td><%= resourceName %></td>
    <td><%= completionStatus %></td>
    <td><%= successStatus %></td>
    <td><%= score %></td>
    <td><%= noComments %></td>
    <td><%= noRatings %></td>
</script>

<script type="text/template" id="table-template">
    <table id="table-id" width="100%" class="table table-striped table-hover table-bordered">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>
</script>

<div class="report">
    {{include this resourceType="/path/to/bootstraptable"}}
</div>
{{includeClientLib categories="category.of.js.file" }}

Table initialised in Reporting namespace:

Reporting.TableView = Backbone.View.extend({
        initialize: function() {
            this.collection.on("add", this.render, this);
            this.collection.on("reset", this.render, this);
        },
        initializeSort: function() {

        },
        setSortIcon: function() {

        },
        render: function() {
            $(this.el).find(".center-container").hide();
            $(this.el).find(".reporting-table-content").append(
                this.table());

            //render the table head
            this.init();

            _.each(this.collection.at(0).get("items"), function(
                data) {
                $(this.el).find("tbody").append(new this
                    .RowView({
                        model: data
                    }).render().el);
            }, this);

            //apply data tables
            var table = $(this.el).find("table").DataTable({
                dom: "frAtiSJ",
                scrollY: 400,
                scrollCollapse: false,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Filter"
                }
            });

            var colvis = new $.fn.dataTable.ColVis(table, {
                fnStateChange: function() {
                    var evt = $.Event(
                        "dataTablesColumnUpdate"
                    );
                    $(this.dom.wrapper).trigger(evt);
                }
            });

            this.initializeSort();

            var i = 0;
            var sortIndex = 0;
            _.each($(this.el).find(
                    ".dataTables_scrollHead thead th"),
                function(data) {

                    if ($(data).hasClass("dt-hide")) {
                        $($(this.el).find("table")[1]).dataTable()
                            .fnSetColumnVis(i, false);
                        if (sortIndex === i) {
                            sortIndex++;
                        }
                    }
                    i++;
                }, this);

            this.setSortIcon();
            table.order([
                [sortIndex, "asc"]
            ]).draw();

            $(this.el).find(".dataTables_wrapper").prepend(
                colvis.button());

            var toolBar = $(
                "<div class='dataTables_toolbar'></div>");

            $(toolBar).append($(this.el).find(".ColVis"));
            $(toolBar).append($(this.el).find(
                ".dataTables_filter"));

            $(this.el).find(".dataTables_wrapper").prepend(
                toolBar);
        }
    });