ngTable can't generate header

Question

I'm using ngTable with this code:

HTML:

 <table data-ng-table="tableParams" class="table table-condensed table-bordered table-striped">
                        <tbody>
                            <tr data-ng-repeat="task in $data">
                                <td data-title="''">
                                    <input type="checkbox" style="display: block; margin: auto;" ng-model="task.IsSelected" ng-change="optionToggled()">
                                </td>
                                <td data-title="''" style="text-align: center">
                                    <i class="glyphicon glyphicon-flag" ng-show="task.IsToday"></i>
                                    <i class="glyphicon glyphicon-ok" ng-show="task.IsCompleted"></i>
                                </td>
                                <td data-title="'Subject'" data-sortable="'Subject'">{{task.Subject}}</td>
                                <td data-title="'Priority'" data-sortable="'PriorityValue'">{{task.PriorityValue}}</td>
                                <td data-title="'Status'" data-sortable="'StatusValue'">{{task.StatusValue}}</td>
                                <td data-title="'Due Date'" data-sortable="'DueDate'">{{task.DueDate}}</td>
                                <td data-title="'Completed'" data-sortable="'CompletedValue'">{{task.CompletedValue}}</td>
                                <td data-title="'Date Completed'" data-sortable="'DateCompleted'">{{task.DateCompleted}}</td>
                                <td data-title="'Action'">
                                    <button type="button" style="display: block; margin: auto;" class="btn btn-info btn-xs" ng-click="editRow(task)">
                                        <i class="glyphicon glyphicon-edit"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

Javascript:

 $scope.tableData = [];

    $scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: { DueDate: "asc" } // initial sort order,
    },
    {
        paginationMaxBlocks: 10,
        paginationMinBlocks: 2,

        getData: function($defer, params) {

            var sorting = params.sorting();
            var keySorting = Object.keys(sorting)[0];
            var valueSorting = sorting[keySorting];

            var count = params.count();
            var pageIndex = params.page() - 1;
            var keySearch = angular.isDefined($scope.textSearch) ? $scope.textSearch : '';

            taskService.pagingTasks(pageIndex * count, count, keySearch, keySorting, valueSorting).then(function(data) {
                var obj = angular.fromJson(data);
                params.total(obj.Total);

                formatToDateTime(obj.Data);

                $scope.tableData = obj.Data;
                $defer.resolve(obj.Data);
            });
        }
    });

But when I run my website I see ngTable generate

And my browser console show this error:

I have no idea why ngTable can't generate columns header. Currently, I must create columns header by manually.

Answer 1

I found my answer:

You can fix this issues base on this post : AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template

Modified these lines in file "ng-table.js" and remove tr tag in : "filterRow.html", "groupRow.html", "sorterRow.html".

(template)

$templateCache.put('ng-table/header.html', '<tr ng-if="params.hasGroup()" ng-show="$groupRow.show" class="ng-table-group-header" ng-table-group-row></tr> <tr class="ng-table-sort-header headerrow" ng-table-sorter-row></tr> <tr ng-show="show_filter" class="ng-table-filters" ng-table-filter-row></tr> ');

(directive)

function ngTableGroupRow(){
        var directive = {
            restrict: 'A',
            //replace: true,
            templateUrl: 'ng-table/groupRow.html',
            scope: true,
            controller: 'ngTableGroupRowController',
            controllerAs: 'dctrl'
        };
        return directive;
    }

function ngTableSorterRow(){
        var directive = {
            restrict: 'A',
            //replace: true,
            templateUrl: 'ng-table/sorterRow.html',
            scope: true,
            controller: 'ngTableSorterRowController'
        };
        return directive;
    }

 function ngTableFilterRow(){
        var directive = {
            restrict: 'A',
            //replace: true,
            templateUrl: 'ng-table/filterRow.html',
            scope: true,
            controller: 'ngTableFilterRowController'
        };
        return directive;
    }