Ngx-datatable with Angular 2 disabling pagination

Question

I have a table with a list of result using ngx-datatable. Currently, the table displays the results with pagination.

I'd like to add a button to "show all" results without pagination, How do you think I should do that?

<ngx-datatable class="material"
[rows]="rows"
[columnMode]="'force'"
[headerHeight]="40"
[footerHeight]="40"
[rowHeight]="30"
[externalPaging]="true"
[limit]="50"
[selectionType]="'checkbox'">
<ngx-datatable-column
        [width]="30"
        [sortable]="false"
        [canAutoResize]="false"
        [draggable]="false"
        [resizeable]="false"
        [headerCheckboxable]="true"
        [checkboxable]="true">
      </ngx-datatable-column>
          <ngx-datatable-column name="Name">
            <ng-template let-value="value" ngx-datatable-cell-template>
                <div class="redNumber">{{value}}</div>
            </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Title"></ngx-datatable-column>
      <ngx-datatable-column name="company"></ngx-datatable-column>
      <ngx-datatable-column name="Status" [cellClass]="getStatusClass">  
  </ngx-datatable-column>
<ngx-datatable-column name="Last connexion"></ngx-datatable-column>

Try removing the property [limit]="50" from ngx-datatable component — Karan Garg, Sep 05 '17 at 10:39

score 2 · Answer 1 · answered Sep 06 '18 at 06:11

Ngx-Datatable Footer will hide or if you want show more button you can do that too by writing block and use isVisible variable to show/hide more button

<ngx-datatable-footer>
      <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize" let-selectedCount="selectedCount"
        let-curPage="curPage" let-offset="offset" let-isVisible="isVisible">
        <div class="container" >

        </div>
      </ng-template>
    </ngx-datatable-footer>

score 0 · Answer 2 · answered Dec 04 '18 at 03:09

You can override the footer-template so the datatable-pager won't appear and therefore the pagination will be disabled.

<ngx-datatable-footer *ngIf="isChild">
  <ng-template ngx-datatable-footer-template>
  this text will appear instead of datatable-pager
  </ng-template>
</ngx-datatable-footer>

score 0 · Answer 3 · edited Dec 10 '20 at 09:32

0

Apply [footerHeight]="0" and it'll remove the footer.

edited Dec 10 '20 at 09:32

Mario Petrovic

7,500
14
42
62

answered Dec 10 '20 at 08:22

Manjeet Singh

21
6

Ngx-datatable with Angular 2 disabling pagination

3 Answers3