Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Include Buttons and Paginator in the Material Table Footer

I use Angular Material Table and I need a command button and the table's paginator in the table's footer row, something like this enter image description here

My code is like this actually

<div class="example-table-container mat-elevation-z8">

  <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
    <!-- DataSource's displayedColumns -->
    <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>


    <!-- Exporter column -->
    <ng-container matColumnDef="exporter">
      <td mat-footer-cell *matFooterCellDef colspan="2">
        <button class="btn btn-primary" (click)="exportCsv(dataSource)">
          <i class="material-icons" title="Exporter en CSV">save_alt </i>
        </button>
      </td>
    </ng-container>

    <!-- Paginator column -->
    <ng-container matColumnDef="paginator">
      <td mat-footer-cell *matFooterCellDef colspan="3">
        <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>

    <tr mat-footer-row *matFooterRowDef="['exporter', 'paginator']"></tr>

  </table>
</div>

As you can see, I moved the <mat-paginator> element inside a td... But this broke the paginator as it doesn't paginate the table anymore... (you see "0 of 0" and disable pagination buttons)... when I put it back outside the table element, the paginator returns to normal...

How to correctly put the paginator inside the footer row?

like image 382
serge Avatar asked Sep 13 '18 14:09

serge


People also ask

Which can be used in mat-table for pagination?

Pagination. To paginate the table's data, add a <mat-paginator> after the table. If you are using the MatTableDataSource for your table's data source, simply provide the MatPaginator to your data source.

What is Paginator angular?

The paginator displays a dropdown of page sizes for the user to choose from. The options for this dropdown can be set via pageSizeOptions. The current pageSize will always appear in the dropdown, even if it is not included in pageSizeOptions.


1 Answers

Finally, I used a toolbar, if someone has the same problem:

  </table>

  <mat-toolbar>
    <mat-toolbar-row>
      <mat-icon (click)="exportCsv(dataSource)" title="Export as CSV">save_alt</mat-icon>
      <span class="example-spacer"></span>
      <mat-paginator class="paginator" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
    </mat-toolbar-row>
  </mat-toolbar>

</div>

that gave: enter image description here

like image 103
serge Avatar answered Sep 21 '22 18:09

serge