help(COMPONENT): Getting Sticky to work right for Angular Material Data Table.

[fireflysemantics]

What are you trying to do?

Get sticky to work right. Here's a Stackblitz that has an ID column that is sticky, and two other columns. In this case sticky works correctly because there are only two other columns:

https://stackblitz.com/edit/angular-material-minimal-sticky

However if we add 100 columns, as is done in this demo:

https://stackblitz.com/edit/angular-material-minimal-with-paging-and-sorting-and-sticky-100

The ID column disappears when scrolling horizontally.

The solution suggested on SO is to use inline-flex:

https://stackoverflow.com/questions/62562388/getting-sticky-to-always-stick-the-column-in-material-data-table

However that creates another problem, which is that the header cells no longer expand to fit the table with.

That can cause table rows to wrap inside the main table container as described here:

https://stackoverflow.com/questions/62584549/material-data-table-wraps-rows-when-table-width-allows-it

Any thoughts on how to get sticky to work right, without causing the wrapping issues?

[andrewseguin]

I can't seem to reproduce the issue you are having. It seems the sticky column works regardless of how many columns are displayed.

Can you confirm that this looks right to you

https://stackblitz.com/edit/angular-material-minimal-sticky-sk4rfv?file=src%2Fapp%2Fapp.component.css

[fireflysemantics]

I think perhaps one of the demo links I posted were wrong. This displays the behavior:

https://stackblitz.com/edit/angular-material-minimal-with-paging-and-sorting-and-sti-wrmghw

I'm going to study your demo now. It does very good :)

[fireflysemantics]

OK I think I see what the issue is now. My demo has this:

.mat-table {
  overflow-x: scroll;
}

Which causes the entire table to scroll away ...

Your demo has this:

.table-container {
  display: block;
  width: 100%;
  overflow: auto;
}

Which is probably the right way to do it. Thank you so much for this. I will close the issue, and if anything pops up in the future I'll just open another one and link to this. THANKS AGAIN!!

[fireflysemantics]

@andrewseguin I upgraded to Angular 10 and tried this out.

This is a Github Repo that I reproduced this in, since it is obviously working the Stackblitz, but not in Angular 10:

https://github.com/fireflysemantics/mat-table-sticky

It looks like there are two issues.

One is that the sticky slides over as described. The other is that the rows extend beyond the table. I took a screenshot. Could you please have a look.

[fireflysemantics]

So cross reference:
https://stackoverflow.com/questions/63082745/getting-sticky-to-stick-without-sliding-over-in-angular-material-data-table