data-table.component.html 1.2 KB

123456789101112131415161718192021222324252627282930313233
  1. <table class="table">
  2. <thead>
  3. <tr>
  4. <th *ngFor="let header of columns?.toArray()" class="left">
  5. <ng-container *ngTemplateOutlet="header.template"></ng-container>
  6. </th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr *ngFor="let item of items | paginate:{ itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }">
  11. <ng-container *ngTemplateOutlet="rowTemplate; context: { item: item }"></ng-container>
  12. </tr>
  13. </tbody>
  14. </table>
  15. <div class="table-footer">
  16. <div class="form-group">
  17. <div class="select">
  18. <select [value]="itemsPerPage" (change)="itemsPerPageChange.emit($event.target.value)">
  19. <option [value]="10">10 per page</option>
  20. <option [value]="25">25 per page</option>
  21. <option [value]="50">50 per page</option>
  22. <option [value]="100">100 per page</option>
  23. </select>
  24. </div>
  25. </div>
  26. <vdr-pagination-controls [currentPage]="currentPage"
  27. [itemsPerPage]="itemsPerPage"
  28. [totalItems]="totalItems"
  29. (pageChange)="pageChange.emit($event)"></vdr-pagination-controls>
  30. </div>