esvit / ng-table

Simple table with sorting and filtering on AngularJS
http://esvit.github.io/ng-table
BSD 3-Clause "New" or "Revised" License
2.77k stars 851 forks source link

Number of displayed rows is limited by number of columns in ng-table-dynamic #1041

Open grosseman opened 6 years ago

grosseman commented 6 years ago

I have a very bizzare problem. I am pulling my data from an API through a getData function in increments of 20 per page. The data is coming through so the problem does not lie here. No filters are applied to the data.

I declare my columns through a variable: this.columns = [ { field: "selector", title: "", show: true//, headerTemplateURL: "app/core/headerCheckbox.html" }, { field: "barcode", //filter: {barcode: "text"}, title: "Streckkod", show: true, "class": "list-table-header" }, {...}];

and so on. 12 columns in total. In HTML the table is declared as so:

<table ng-table-dynamic="$ctrl.tableParams with $ctrl.columns" class="table table-hover table-condensed" show-filter="$ctrl.ngTableFilterRowVisible">

Then comes ng-repeat: <tr ng-repeat-start="row in $data" ng-class="{'active' : $ctrl.rowData[$index].isActive }" ng-mouseenter="$ctrl.toggleHover($index)" ng-mouseleave="$ctrl.toggleHover($index)" title="Click for details..">

..followed by a <td></td> pair for each column. Finally

</tr><tr ng-repeat-end="" class="expandedRow" ng-show="$ctrl.rowData[$index].expandRow"><td colspan="12">Test</td></tr>

However, no matter how many rows are returned from the getData function, the table refuses to display more than 12 rows, same as the number of columns. In fact, if I reduce the column count to 1, along goes the number of rows!

Only column 1 visible:

scrn1

Column 1 and 2 visible:

scrn2

Inspecting the HTML, the reason the rows are not displayed appears to be that the <td></td> elements are not being generated for any rows surpassing the column count (2 in this case):

rowsempty

while a "healthy" row looks like this:

rows

What could possibly be causing this?

Edit

Adding an empty <th></th> before <tr ng-repeat-start..> appears to fix the problem...

<th ng-if=""></th> fixes the problem and gets rid of the unneeded empty row.

streetchief commented 5 years ago

After much struggling, we fixed this issue by adding a whole empty row inside the repeated tbody element.