Components: [Table] Add input for sticky headers

[andrewseguin]

Add an input to <cdk-table> that makes the table's header stick to the top of the scroll container.

Interim solution: Use styles position: sticky; top: 0 on the header element.

[lutchit]

Using sticky position, interim solution has some bugs when you navigate through pages in a table, if you're not at the top of the table when you change the page, header disappear, any solution ?

[jscharett]

sticky position is not supported in IE. When will we see a cross-browser solution?

[lutchit]

Hello @andrewseguin, any solution to the problem related to the interim solution?

[andrewseguin]

You can use position: sticky; top: 0 on the header row for now. Unfortunately this isn't a valid solution for IE but we have an implementation for this that we'd like to introduce soon.

[lutchit]

It's not really working on Firefox too, and in Chrome navigating or changing items per page cause bug.
I know this feature is not urgent but have you an idea of the delivery date of this?

[oliverschenk]

Support for position: sticky isn't great across browsers.

[andrewseguin]

For now, here's a fun solution. Separate your table into two - the first won't show any rows, and the second won't display the header. Make the overflow scroll only on the rows.

If you set the same column IDs, you can re-use and existing column-specific class styles you might have applied (e.g. mat-column-name { min-width: 60px; }) - it will apply to both tables.

Proof-of-concept:
https://plnkr.co/edit/Gc3zVWr1GXqaJdK2S8mQ?p=preview

Just realized this looks great on a mac, which overlays scrollbars rather than pushes content to show them. With this, scrollbars will push the rows left while the header is static, causing mis-alignment.

[rhythmnewt]

@andrewseguin any suggestions on how to support horizontal + vertical scroll with sticky headers? So far I either get one or the other working properly. Here's the plunkr https://plnkr.co/edit/CXN6rNz3Kb9gDHKCceJ9?p=preview

[jscharett]

@andrewseguin While this works visually, I believe it has some accessibility issues. A screen reader is likely going to announce 2 tables, of which the second has hidden headers, so its not clear how a screen reader would handle it.

[tamvo94]

Hi all and @jscharett ,
I write a directive to auto set max height for multiple resolutions from ideal of @andrewseguin . Hope it can help everyone. Thanks.

import { Directive, AfterViewInit, OnDestroy } from "@angular/core";
/**
 * floating table header when user scroll table
 */
@Directive({ selector: "[autFloatingTableHeader]" })
export class FloatingTableHeaderDirective implements AfterViewInit, OnDestroy {
  private tableHasContentElement: HTMLElement;
  private targetElement: HTMLElement;

  ngAfterViewInit(): void {
    this.tableHasContentElement= document.getElementById("list-content") as HTMLElement;
    this.targetElement= document.getElementsByTagName("footer").item(0) as HTMLElement;
    this.resetTableHeight();
    window.addEventListener("resize", this.resetTableHeight.bind(this));
  }

  ngOnDestroy(): void {
    window.removeEventListener("resize");
  }

    private resetTableHeight(): void {
      setTimeout(() => {
        if(this.targetElement&& this.tableHasContentElement) {
          let distance = this.targetElement.getBoundingClientRect().top - this.tableHasContentElement.getBoundingClientRect().top;
          this.tableHasContentElement.style.maxHeight = `${Math.round(distance)}px`;
        }
      }, 0);
    };
}

[Maximaximum]

Support for sticky headers would be a really great feature! Really waiting for it :)

[FJBDev]

I would love this feature as well !!!

[simeyla]

I had to do position: sticky; top: -0.5px; background: white; for iOS retina (maybe Android too).
It was showing a single device pixel gap above the header which showed the data underneath as you scroll.

[pantonis]

@simeyla can you share code? Where did you add position: sticky; top: -0.5px; background: white;

[simeyla]

@pantonis I did this in my styles.css

You may need to look at the styles on the parent container if this doesn't work (eg. display or flex settings) - but this works quite nicely for me until there's an official update.

/* Table header row */
mat-header-row {
    /*https://github.com/angular/material2/issues/5885*/
    position: sticky;
    top: -.5px;
    background: white;
    z-index: 100;
}

[andrewseguin]

@simeyla Can you share how you reproduced the issue? I'm seeing this show up on Chrome dev tools when I enter responsive mode, but I can't seem to get a real world example on my Android phone and mac laptop

[andrewseguin]

Got it reproduced using this example https://stackblitz.com/edit/angular-s1t3nz?file=app/app.component.ts

Seeing it on mobile chrome with desktop view showed an issue: https://angular-s1t3nz.stackblitz.io/

[simeyla]

@andrewseguin What I posted was working quite well for me, so I was happy with this and wasn't really reporting an issue. But I'm only testing in latest Chrome at this time. If by issue you mean why did I have to use half a pixel it was on my iPad and showing through underneath the header as I scrolled.

[erickyi2006]

@simeyla , beautiful. works like a charm . thumbs up

my css now has these two elements

mat-table {
    height: calc(100vh - 30px);
    overflow: auto;
}

mat-header-row {
    position: sticky;
    top: -.5px;
    z-index: 100;
}

[kal93]

@andrewseguin any update on sticky for mat header row.

I tried the stickybits which works across browsers but doesn't seem to work for column headers.
Here's the Stackblitz .

[andrewseguin]

@kal93 Currently working on it right now. We're going the route of using position: sticky. It leaves IE out of the race but it's much more efficient than us coming up with a custom solution that would be less efficient than letting the browser handle it.

Here's a stackblitz that I'm using to play with the idea: https://stackblitz.com/edit/angular-vttjfe?file=app%2Fhello.component.html

[kamalSaiDd]

@pantonis I did this in my styles.css

You may need to look at the styles on the parent container if this doesn't work (eg. display or flex settings) - but this works quite nicely for me until there's an official update.

/* Table header row */
mat-header-row {
    /*https://github.com/angular/material2/issues/5885*/
    position: sticky;
    top: -.5px;
    background: white;
    z-index: 100;
}

Thanks much.
It worked like gem

[ryansperzel1]

For now, here's a fun solution. Separate your table into two - the first won't show any rows, and the second won't display the header. Make the overflow scroll only on the rows.

@andrewseguin Creative, but filtering and sorting becomes an issue with this solution. This issue was opened in Jul 2017 - has there been any progress on scrolling just the body of the table? Looking for something exactly like the complex example here: https://v0.material-ui.com/#/components/table

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}