英文:
How to combine scrollable Angular Material table with paginator
问题
在我们的项目中，我们希望使用Angular Material表格与分页组件。如果我们遵循示例中使用的布局，一切都运行正常。最接近我们所需布局的示例是这个：https://material.angular.io/components/table/examples#table-http
然而，与示例相比，在我们的布局中，我们不知道父组件的高度。我们无法将min-height和max-height设置为固定数值。虽然分页器应该使用它需要的任何高度（-> auto），但表格应该根据需要增长/缩小，并通过提供滚动条来处理溢出。
解决方案可能接近以下内容：
<div style="height: 100%; display: flex; flex-direction: column">
<table mat-table style="flex: 1 1 0px"> ... </table>
<mat-paginator style="flex: none"> ... </mat-paginator>
</div>
虽然如果表格确实需要所有可用空间，这个方法可以正常工作，但如果表格中没有要显示的行，它也会占用可用高度。我不知道分页器的高度，因为它取决于引入了Angular 15的密度设置。因此，我无法将我的表格的max-height设置为类似calc(100% - $paginatorHeight)的东西。是否有一个flexbox属性可以告诉我的表格只增长到它的内容的高度？或者有适合我的用例的其他样式选项吗？
英文:
In our project we want to use the Angular Material table with the paginator component.
Everything works fine if we stick to the layouts which are used in the examples. The example closest to our desired layout is this one: https://material.angular.io/components/table/examples#table-http
However, compared to the example, in our layout we don't know the height of our parent component. We cannot set min-height and max-height to a fixed number. While the paginator should use whatever height it needs (-> auto), the table should grow/shrink and handle the overflow by providing a scrollbar.
The solution is probably close to the following:
<div style="height: 100%; display: flex; flex-direction: column">
<table mat-table style="flex: 1 1 0px"> ... </table>
<mat-paginator style="flex: none"> ... </mat-paginator>
</div>
While this works fine if the table really needs all available space, it also consumes the available height if there are no rows to display in the table.
I don't know the height of the paginator as it depends upon the density setting introduced with Angular 15. Therefore, I cannot set max-height of my table to something like calc(100% - $paginatorHeight).
Is there a flexbox property which tells my table to only grow up to its content? Or is there any other styling option suitable for my use case?
答案1
得分: 1
我通过将分页器移到表格的页脚来解决了这个问题。
<ng-container matColumnDef="paginator">
<td mat-footer-cell *matFooterCellDef [attr.colspan]="100">
<mat-paginator #paginator [length]="totalCount" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="[10, 20, 50]"
(page)="onPageChange($event)">
</mat-paginator>
</td>
</ng-container>
<tr mat-footer-row *matFooterRowDef="['paginator']; sticky: true"></tr>
这会使分页器在滚动时保持在顶部，并且您可以将表格的高度设置为100％。
英文:
I solved this issue by moving the paginator to the footer of the table.
<ng-container matColumnDef="paginator">
<td mat-footer-cell *matFooterCellDef [attr.colspan]="100">
<mat-paginator #paginator [length]="totalCount [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="[10, 20, 50]"
(page)="onPageChange($event)">
</mat-paginator>
</td>
</ng-container>
<tr mat-footer-row *matFooterRowDef="['paginator']; sticky: true"></tr>
This makes the paginator sticky when scrolling and you can set the height of table to 100%
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论