Components: sticky matColumnDef don’t work so good

[paulferaud]

What is the expected behavior?

A simple table whose first column is sticky should work.

What is the current behavior?

Does not work good:

• A the column that are initially hidden have missing styles
• If more than half the table is hidden, then the first column gets pushed out of the way.

What are the steps to reproduce?

Just create a table, as simple as can be, with the first column being sticky:
https://stackblitz.com/edit/angular-sticky-column-bug?file=src/app/app.component.ts
https://angular-sticky-column-bug.stackblitz.io/

Screenshots:
Initial state:
Start scrolling:
Scroll some more:

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

At least 7.3.6.

Is there anything else we should know?

[paulferaud]

I did some more investigating. This only happens if:

• You use "component-based" material tables (aka <mat-table>, <mat-header-cell>) rather than attribute based (<table mat-table>, <th mat-header-cell> etc...)
• You give your columns a min-width

[ccjmne]

Just umping in to say that I think the "attribute-based" <table mat-table> is the preferred alternative since it has been available.

If you can use the table native element, I reckon you should go for it. It also lets you painlessly use the overflow properties to enable scrolling, and probably lets you avoid a few other quirks I don't know of.

Disclaimer: I'm not denying there's a problem 🙂

[jelbourn]

If I recall correctly, this was expected about the flexbox-based table, but it was supposed to be documented. @andrewseguin was that right?

[alexpetrus20]

I am trying to use the material table with 4 sticky columns, 2 of them to left and 2 of them to right. The problem is that the offset is calculated wrong by sticky and stickyEnd attributes from angular material. Does anyone have the same issue?

Here is an example with how I am using sticky and stickyEnd.
https://stackblitz.com/edit/angular-kueky5?file=src%2Fapp%2Ftable-sticky-columns-example.html

[MatheusRodrigues301]

Same problem!

[lexstark]

Same problem

[szellcsaba-ge]

"@angular/material": "^8.2.3",
"@angular/core": "~8.2.14",

Issue still exists.

[TrevorKarjanis]

I did some more investigating. This only happens if:

• You use "component-based" material tables (aka <mat-table>, <mat-header-cell>) rather than attribute based (<table mat-table>, <th mat-header-cell> etc...)
• You give your columns a min-width

Thank you for pointing that out. I was able to workaround the issue by giving the table a minimum width instead.