I forked the example on angular material table with sticky header and I added more data. I see that the headers are not sticky. Stackblitz here
Anyone knows how headers can remain sticky?
Add a comment
|
6 Answers
The problem in your example is that the table container has overflow: auto and height: 100%; this is unnecessary, since the page will already have a scrollbar attached if the table content is bigger than the viewport.
I've fixed it by removing all the styles that are attached to .example-container.
In this way, the sticky element will be set relative to the top of the page.
Example: https://stackblitz.com/edit/angular-brzwrz-aejes6
Let me know if it works for you.
1 Comment
pantonis
Excellent. You should send the code to material team to fix it there as well. The example they have there is not good promotion for material table and might lead potential users of the table to abandon it for something else. Thanks again !
By limiting your table height. https://stackblitz.com/edit/angular-brzwrz-hkevwi
4 Comments
pantonis
But I want the table to take full page height. I do not want to limit the table height
Bilel-Zheni
use 100vh instead of 100px for your table height
pantonis
there are two scrollbars. Page scrollbar and the table container scrollbar. This is not what I need. Primeng has a very good example of how sticky header must work.
https://www.primefaces.org/primeng/#/table/stickyBilel-Zheni
mat table sticky option is used to keep the table header visible when you scroll the table content
Same issue with material expansion table and related example. I solved by setting overflow: hidden in style.css under scr folder, as below:
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; overflow: hidden; }
and modifying the CSS .example-container in
.example-container {
height: 100vh;
overflow: auto;
}
You will see only the table scrollbar.
Hope help someone
Comments
In my case I just removed the overflow: auto from my table container, and the sticky worked.
Comments
Found a much easier way... It's all about the syntax in the definition...
<cdk-virtual-scroll-viewport tvsItemSize
class="wrapper mat-elevation-z2">
<table mat-table [dataSource]="dataSource">
<!-- Notice the definition for *matHeaderRowDef and the 'sticky: true' in quotes. -->
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<ng-container matColumnDef="id">
<th mat-header-cell
*matHeaderCellDef
class="col-sm">No.</th>
<td mat-cell
*matCellDef="let element"
class="col-sm">{{element.id}}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container>
</table>
</cdk-virtual-scroll-viewport>
