CODEWITHSUNDEEP
angularpaginationangular-material
Fjordo
Fjordo

Reputation: 872

Angular 2+ filter *ngFor table with Material Paginator

I have a big, complex custom table, with many nested rows visible on user clicks and many other actions. I need to paginate that table, to show items per page selector and the "result number" for every page

(something like paginator example)

I found angular material paginator component (the image above is that component in reality) which seems perfect to me, but I can't go over importing the component. How do I bind page change event to my custom table ? I've searched angular material website but I did not found any useful example. The only is this table example which involves other material component I can't use.

Any help ?

Here is the paginator tag

<mat-paginator [length]="this.state?.unitaDocByMap.length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = $event">
</mat-paginator>

And here is an extract of my table 

 <ng-container *ngFor="let unitaDoc of this.state?.unitaDocByMap >
      <tr>
      <td>{{unitaDoc?.nome}}</td>
      <td *ngFor="let ist of unitaDoc?.istanzeMetadato;">
        {{ist?.valore}}
      </td>
      <td>

        <button type="button" class="btn btn-primary" title="Visualizza Documenti UD"
                (click)="getCustomDocumentiRow(unitaDoc?.id); hide(this.i); this.avviato = false"
                [attr.id]="'but'+this.i">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </button>
      </td>
    </tr>
    <tr [hidden]="!hideme[this.i]" [attr.id]="this.i">
      <td [attr.colspan]="this.dimensione">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">Documenti</h4>
          </div>

          <div class="panel-body">

            <table class="table table-responsive table-hover">
              <thead>
              <tr>
                <th>Funzione documento</th>
                <th>Versione</th>
                <th>VDC</th>
                <th>SIP</th>
                <th>Elementi</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let doc of this.state?.docCustom;">

.... and so on

As you see, I can't convert the table. Maybe I can use another paginator, but I can't find any other capable of changing results per page and which show result numbers listed in every page.

Upvotes: 2

Views: 2011

Answers (1)

Fjordo
Fjordo

Reputation: 872

I found this component, ngx.pagination which is barebone paginator, but with some math I can write result numbers of this page, and I can create a to change element displayed per page.

By the way, I'd like to know the solution with the other component.

Upvotes: 2

Related Questions