Fixed header rows for md-table

[jansomers]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Have the headers of md-table fixed (when you scroll down, headers should remain at the top)

What is the current behavior?

When you scroll down, headers become invisible

What is the use-case or motivation for changing an existing behavior?

As a user scrolls down a list of data , he or she wants to be able to sort the table at any given moment

Is there anything else we should know?

This may be already possible , in which case I hope someone can tell me how :)

[alexandr8558]

+1

[ghost]

+1

[willshowell]

Duplicate of #5885

[nikkigantos]

+1

[madhuvdl]

Hi,

I made fixed header table scroll using css for angular material. Use the below code it will work.

Put table code inside "div "block with class name "table-container"

`Ex: HTML

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>

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

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

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

<mat-paginator #paginator
               [pageSize]="10"
               [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>

CSS:
.table-container {
position: relative;
margin-top:50px;
}
.table-container .mat-table {
max-height: calc(100vh - 200px);
overflow-y: auto;
}
.table-container .mat-table .mat-header-row {
position: absolute;
top: -50px;
left: 0px;
right: 18px;
background: #fff;
}

TS file:
import {Component, Inject, ViewChild} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
export class AppComponent {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);

@ViewChild(MatPaginator) paginator: MatPaginator;

/**
 * Set the paginator after the view init since this component will
 * be able to query its view for the initialized paginator.
 */
ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
}

}

export interface Element {
name: string;
position: number;
weight: number;
symbol: string;
}

const ELEMENT_DATA: Element[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];`

Try this Code surely it will work.

[androidovshchik]

to simplify above solution
Write

.mat-header-row {
  position: sticky;
  top: 0;
  background: white;
}

[mdelorimier]

@androidovshchik : Seems you need to add z-index for the white background to work. In my case i had to anyways. Thanks for the solution.

[androidovshchik]

@mdelorimier
yes, i.e. z-index: 9999

[pankajarora1991]

Seems it is working

.mat-header-row {
position: sticky;
top: 0;
background: white;
}

but Scroll for sticky header not work as expected
Ex. Following these steps
1 . select page size to 100 and scroll down to end bottom
2 . then select page size again to 10
3 . See scroll height not reflect as it is same for every page size

[mellisdesigns]

position: sticky also has limited support on browsers.

https://caniuse.com/#search=sticky

[sarathy-partha]

instead of right: 18px, it must be lot less like 3px or so if you have a darker background for header. Else position is bit left to the scroll.

[niculescuc]

Hello everyone.
My workaround for this is to create another table with datasource.data=null and put it on top of the table that need. I works flawlessly.

[maiasmith]

@niculescuc Can you provide sample html?

[niculescuc]

Hi,
Your sampleL
https://stackblitz.com/edit/angular-material-table-data-source-rrcezr

[AvishekNath]

Can anyone please suggest me how to wrap all the cdk-row inside a

container in angular 5 material table

[androidovshchik]

@AvishekNath
i think this is impossible (or very very difficult will be)

[akifkhan75]

Thanks @androidovshchik

[soumyakantiroychowdhury]

Solution does not work if the table is inside mat-sidenav-container. Any suggestion?

[shiamalon]

I was thinking I wanted something but what I really wanted is @niculescuc solution! thanks!

[niculescuc]

You should upgrade your material version to 6.0.0 or more and use sticky header. Is more reliable and easy to use. You can get also the advantage of sticky footer and sticky columns.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}