Angular 6 Material Data Table with Fixed Header and Paginator

Question

How to make the Header of Data Table component fixed to the top, and the Paginator fixed to the bottom?

This is my HTML:

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

    <table mat-table #itemsTable [dataSource]="dataSource" class="items-list">

        <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.position}} </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>

        <ng-container matColumnDef="weight">
            <th mat-header-cell *matHeaderCellDef> Weight </th>
            <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
        </ng-container>

        <ng-container matColumnDef="symbol">
            <th mat-header-cell *matHeaderCellDef> Symbol </th>
            <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="this.componentsDataService.displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: this.componentsDataService.displayedColumns;" (click)="onRowClicked(row)"></tr>
    </table>

    <mat-paginator [pageSizeOptions]="[50, 100, 250]" showFirstLastButtons></mat-paginator>

</div>

I tried adding sticky to the <tr mat-header-row> from the docs, but it doesn't work.

My imports in .ts file:

 import { Component, OnInit, OnChanges, Input, ViewChild } from '@angular/core';
 import { TabsDataService } from 'src/app/services/tabs-data.service';
 import { ComponentsDataService } from 'src/app/services/components-data.service';
 import { MatPaginator, MatTableDataSource, MatTable, MatTableModule } from '@angular/material';

That is not all of your relevant code, where is the TS where you import the required module? — fredrik, Aug 06 '18 at 14:10
why the hell you need my ts file? everything works fine i just want sticky header — Chris K, Aug 06 '18 at 14:15
Because it might say why the sticky doesn't work, missed module or some such. But entire ts files aren't needed, only relevant portions of them. — fredrik, Aug 06 '18 at 14:19
When you way stick, is ut togs you're after? https://stackoverflow.com/questions/46468665/sticky-header-md-table-conta — fredrik, Aug 06 '18 at 16:56

score 127 · Accepted Answer · answered Aug 09 '18 at 10:23

127

I found in the examples on the material site that the header can be fixed by adding sticky to the matHeaderRowDef:

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">

For the paginator i added a class to mat-paginator:

<mat-paginator ...
                class="mat-paginator-sticky">

with a class based on the answer in the link @frederik provided in the comments

.mat-paginator-sticky {
  bottom: 0px;
  position: sticky;
  z-index: 10;
}

answered Aug 09 '18 at 10:23

Wendie

1,386
2
10
5

OK this helped me a lot! Thanks! Before I was using `mat-card` with `mat-card-titel`, `mat-card-content` (containing the table) and `mat-card-footer` (containing the paginator) to achieve some similar design. But I do prefer this solution way more. – Melroy van den Berg Oct 31 '19 at 23:55
1

Note: My row actually looks like: `` – Melroy van den Berg Oct 31 '19 at 23:57

score 22 · Answer 2 · edited Dec 11 '20 at 05:51

As per Material 8.1

For the sticky header we need to give a sticky values as shown in many answers here
For the sticky paginator or bottom fixed paginator.

We can wrap the table inside a div with max-height or height CSS Property and put the paninator outside that div.

Html Code sample.

 <div class="mat-elevation-z2">
    <div class="table-container">

      <!--- List of column definitions here --->
      <table mat-table [dataSource]="dataSource" matSort>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

    </div>
    <mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 15, 25, 100]"></mat-paginator>
 </div>

CSS

  table {
    width: 100%;
  }

  .table-container {
    max-height: calc(100vh - 155px); // or height: calc(100vh - 155px); depending on your need  change
    overflow: auto;
  }

This is one of the best solutions. I created a example by also set first column to sticky: https://stackblitz.com/edit/angular-p6zdti — Jorgen, Apr 08 '20 at 04:55
This is good if you want your whole table to be essentially a fixed height, which in most cases, I think acts most naturally. You might want to scroll down a list by scrolling your whole screen, but I think users expect tables (esp. with paginators) to have a fixed size. — Adam Dunkerley, Jun 03 '21 at 17:09

score 14 · Answer 3 · answered Aug 09 '18 at 20:12

14

Try to update angular material in your project because the sticky attribute was added in 6.2.3.

answered Aug 09 '18 at 20:12

kavind

261
2
13

I don't think this should be the best answer. Many below work without making you upgrade. – Farasi78 May 20 '21 at 01:08
@Farasi78 i agree but I said that because he used the sticky attribute from the doc at first – kavind Jul 19 '21 at 08:07

score 5 · Answer 4 · edited Dec 10 '18 at 06:17

5

The below css worked for me:

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
.mat-header-row{
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  }

edited Dec 10 '18 at 06:17

Nick

138,499
22
57
95

answered Dec 10 '18 at 06:14

shrinidhi desai

51
1
1

1

I don't know what is wrong, but when I try to pin header by means of css .mat-header-row{ position: sticky; it doesn't work. Only specifying explicitly in html sticky: true helps – MaterialGirl Jan 28 '19 at 08:53
1

@M.Laida It shouldn't, as `sticky` position is not in IE11. – Prajwal Apr 15 '19 at 09:49

score 3 · Answer 5 · answered Jan 09 '20 at 11:16

I too had this problem. I created a div of fixed size and then kept the table inside div. This should solve your issue.

<div style="height: 300px; overflow: auto">
    <table mat-table [dataSource]=dataSource>
        <!--Your table entries here -->
        . 
        .
        .
        .
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

Exactly what I wanted – Ashokan Sivapragasam Dec 21 '21 at 10:13 — Ashokan Sivapragasam, Dec 21 '21 at 10:13

Benjamin M · Answer 6 · 2019-06-12T17:57:52.890

2

You can use a normal sticky mat-footer-row with colspan and put the paginator inside:

<table mat-table>
   ...

    <ng-container matColumnDef="paginator">
        <td mat-footer-cell *matFooterCellDef [colSpan]="displayedColumns.length">
            <mat-paginator ...></mat-paginator>
        </td>
    </ng-container>

    <tr mat-footer-row *matFooterRowDef="['paginator']; sticky: true"></tr>
</table>

And use some style like this, to make it more appealing to eye:

.mat-row:last-child td {
  border-bottom: none;
}

.mat-footer-row:first-child td {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.mat-footer-cell .mat-paginator {
  margin-left: -24px;
  margin-right: -24px;
}

edited Jun 12 '19 at 17:57

answered Jun 12 '19 at 16:36

Benjamin M

23,599
32
121
201

This is too hacky, We can wrap the table inside a div with max-height or height CSS Property, the issue will be solved. – Morlo Mbakop Aug 03 '19 at 05:21
3

This was the only solution that I could get working with a variable-height window, without having to do a vh calculation. Might be hacky but at least it does what I want! – Jonathan Sep 01 '19 at 01:50

score 0 · Answer 7 · answered May 10 '23 at 12:59

0

Note that my mistake was to use

<mat-header-cell ...
<mat-cell ...

instead of

<th mat-header-cell ...
<td mat-cell

answered May 10 '23 at 12:59

Pipo

4,653
38
47

Angular 6 Material Data Table with Fixed Header and Paginator

7 Answers7

Linked