CODEWITHSUNDEEP
angularangular-materialangular-material-6
FrancoVP
FrancoVP

Reputation: 335

Angular 6 Material Table Sticky Header doesn't work

I need to make the Header of the mat-table component fixed to the top, But It doesn't work.

I have Angular v6.1.7 and @angular/material v6.4.7.

I added the "sticky: true" propertie to the matHeaderRowDef as someone mentions here but it doesn't do anything :(

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

I have this example project: https://stackblitz.com/edit/angular-wem2qa

This is my imports on the TS file:

import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from "@angular/core";
import { MatDialog, MatExpansionPanel, MatSnackBar, MatSort, MatTableDataSource, Sort } from "@angular/material";

Upvotes: 9

Views: 17944

Answers (3)

GuiTib
GuiTib

Reputation: 43

Their is an issue related to this if you are working into a <mat-tab-group>.

Some cases dependent solutions are detailed: https://github.com/angular/components/issues/16283

Upvotes: 1

Sergiu
Sergiu

Reputation: 1396

Seems like this is not supported any more in IE. Extracted from the documentation:

This feature is supported by Chrome, Firefox, Safari, and Edge. It is not supported in IE, but it does fail gracefully so that the rows simply do not stick.

The alternative would be to handle it manually, from Javascript, but that would be very expensive for an old browser like IE.

Upvotes: 1

user4470482
user4470482

Reputation:

Your problem may be not the sticky row itself. You need to add a container around your table to make sure a row can be sticky at top with these styles for example:

.example-container {
  height: 400px;
  overflow: auto;
}

See example on Angular Material documentation: https://material.angular.io/components/table/overview#sticky-rows-and-columns and also check the CSS-tab.

Upvotes: 6

Related Questions