[Grid] Feature Request: Sticky Header Column

[pujan2809]

Description: When scrolling through a long list of data, the column headers move out of view, making it difficult to navigate the table. It would be helpful to have a sticky header column that ensures the table header remains visible at the top of the viewport while users scroll through the content, especially when dealing with large datasets.

Expected Behavior:

The column headers should remain fixed at the top of the table, even when scrolling down.
The sticky header should apply to all columns, with the exception of operation columns (if defined).
The sticky header should be responsive and work on both small and large screens.

Example

Notice in the second image how the header disappears when scrolling down.

[nzbin]

Can you provide an online example?

[pujan2809]

https://angular-material-13-starter-x1xj4z-f9zbaquz.stackblitz.io

I've added the sticky property to the header columns of my table so that the headers remain visible when scrolling down through a long list of items. However, when I try to implement this, it doesn't work as expected. Instead of keeping the header sticky while scrolling, the header doesn't behave as a sticky element at all.

[nzbin]

.mtx-grid {
  height: 100vh
}

// 1
td {
  position: sticky;
  top: 0;
  z-index: 100;
}

// 2 
td {
  position: sticky;
  top: 56px;
  z-index: 100;
}