Material table with sticky header and responsive columns

Question

Is there a way I can have a material table with a sticky header and the columns responsive? I found this example on material documentation: https://stackblitz.com/angular/paddnlmnavx?file=src%2Fapp%2Ftable-sticky-complex-flex-example.css

My issue here is that the header width is fixed, calculated using the cell's width:

min-width: 1920px; /* 24 columns, 80px each */

If I want to make the columns responsive then I will have a dynamic width for the columns and if I remove the min-width from the header, the header row will have a width of 100% and will not contain all the header cells.

What exactly do you need??

Purvang Gor
– Purvang Gor

2021-05-17 10:07:37 +00:00
Commented May 17, 2021 at 10:07 — Purvang Gor
– Purvang Gor, Commented May 17, 2021 at 10:07
Can you elaborate what you want to achieve?

NeNaD
– NeNaD

2021-05-17 10:22:13 +00:00
Commented May 17, 2021 at 10:22 — NeNaD
– NeNaD, Commented May 17, 2021 at 10:22

NeNaD · Accepted Answer · 2021-05-17 10:33:14Z

1

One way to solve this is with @media query. You can change the min-width based on screen size and you will have responsive columns.

You can do it like this:

.mat-header-row,
.mat-footer-row,
.mat-row {
  min-width: 1920px;
}

@media (max-width: 1200px) {
  .mat-header-row,
  .mat-footer-row,
  .mat-row {
    min-width: 2500px;
  }
}

@media (max-width: 992px) {
  .mat-header-row,
  .mat-footer-row,
  .mat-row {
    min-width: 3000px;
  }
}

@media (max-width: 768px) {
  .mat-header-row,
  .mat-footer-row,
  .mat-row {
    min-width: 4000px;
  }
}

Here is the updated example: https://stackblitz.com/edit/angular-k6repx-qpnjoa?file=src/app/table-sticky-complex-flex-example.css

answered May 17, 2021 at 10:33

NeNaD

20.8k11 gold badges64 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eyllanesc · Accepted Answer · 2021-05-23 03:21:00Z

1

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

You can find more details on this page

edited May 23, 2021 at 3:21

eyllanesc

246k19 gold badges205 silver badges282 bronze badges

answered May 23, 2021 at 3:09

Aniket Shahane

413 bronze badges

Comments

Murugan Shankar · Accepted Answer · 2021-05-22 05:41:28Z

0

Try to use this code structure to make angular material table header as sticky.

<tr mat-header-row *matHeaderRowDef="headerdata" sticky></tr>

Adding sticky keyword to the <tr mat-header-row> tag. And this change will work in angular 6.2.3+ version.

answered May 22, 2021 at 5:41

Murugan Shankar

133 bronze badges

Collectives™ on Stack Overflow

Material table with sticky header and responsive columns

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest