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.

Nenad Milosavljevic Nenad Milosavljevic · Accepted Answer · 2021-05-17T10:33:14

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

Material table with sticky header and responsive columns

3 Answers