angular 8 ngx-datatable footer not displaying

0
votes

I am having issues displaying the datatable footer and am unable to find a working solution online. I have tried a number of solutions including this: ngx-datatable-footer does not work in Angular Aplication and this: ngx-datatable footer customize as well as a number of other solutions outside SO but none have worked. I implemented this in another project sometimes in the past using a footer very similar to the one below successfully, even copying the exact footer without success. Any ideas on how to get this working?

<ngx-datatable-footer #tFooter (onFooterPage)="handleF($event)">
   <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize" let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset">
      <span class="pl-3 text-primary">SHOWING:</span>&nbsp;&nbsp;<span class="text-muted text-sm"> {{curPage > 1 ? (curPage * pageSize) - pageSize : curPage}} - {{(pageSize * curPage) < rowCount ? pageSize * curPage : rowCount}} of {{rowCount}}</span>
      <datatable-pager (onFooterPage)="handleF($event)" (change)="table.onFooterPage($event)" [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'" [pagerPreviousIcon]="'datatable-icon-prev'" [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage" [size]="pageSize" [count]="rowCount">
     </datatable-pager>
   </ng-template>
</ngx-datatable-footer>
1
angularngx-datatable

1 Answers

3
votes

Figured out the issue. Apparently, not setting footerHeight attribute value on the datatable will cause the table footer to be hidden:

<ngx-datatable [footerHeight]="50">

Setting it fixes the issue!