bug(mat-table): Re-orderable sticky columns become un-sticky if you start dragging, abort the drag, and then scroll

[jalipert]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

If you create a Material Design Table with reorderable columns that are also sticky, the column headers become un-sticky if you start to reorder a column, abort, and then scroll.

StackBlitz that reproduces the issue: https://stackblitz.com/edit/angular-kyaurw?file=src/app/table-sticky-header-example.html

Reproduction

Steps to reproduce:

1. https://stackblitz.com/edit/angular-kyaurw?file=src/app/table-sticky-header-example.html
2. Click and hold a column header and start to drag it, but release the mouse button before dropping it in a new location
3. Scroll down
4. The column header is no longer sticky (see screenshot of the issue)
   

Expected Behavior

If you abort a drag/drop, the column header should still be sticky like all of the other headers.

Actual Behavior

If you abort a drag/drop, the column header you clicked is no longer sticky.

Environment

• Angular: 15.0.4
• CDK/Material: 15.0.4
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[jalipert]

Note that if you actually move a column to a new position, the bug doesn't happen. It only occurs if you start to drag a column and then release the mouse button, leaving the column in its original position.

[Leonek]

Try to add css line to your code: (Angular v15)
.mat-mdc-header-cell { position: sticky; top: 0; }
or same code for .mat-mdc-table-cell-sticky to apply sticky feature to only sticky headers.

Angular < v15
mat-header-cell or mat-table-cell-sticky css class names;

Working example:

https://stackblitz.com/edit/angular-kyaurw-znqyip?file=src%2Fapp%2Ftable-sticky-header-example.css

Note: If you have also horizontal column stickiness you would need to call updateStickyColumnStyles after column drop from:
@ViewChild(MatTable) table: MatTable<any>;

[jalipert]

Yeah, that seems to fix it, thanks!

So what exactly does: *matHeaderRowDef="displayedColumns; sticky: true" do then? Should that be omitted in favor of the CSS solution in the case of drag/drop headers?

[Leonek]

Guess they didn't anticipate a situation where someone would add d&d feature to table columns(?). Without d&d it's working fine. If css solution works fine, we no needed to use sticky: true anymore. At least we have solution for the next lost souls.