feat(DataTable): Dynamic Recalculation of Sticky Header Column Position on Resize

[fireflysemantics]

Feature Description

If the columns of a table that uses sticky headers fit within the container, then the sticky header scrolling is not applied, as it should be.

If the containing element is smaller than the data table, the sticky columns are rendered correctly.

However if we start with a container that fits the data table, and then resize the browser such that the containing container is now smaller, the sticky columns don't rerender properly. Scrolling is there, but usually when there's more than one column, it will be rendered too far to the right, and when the other columns are scrolled they will "Bleed" through the area where the sticky header column has left space.

I'm attaching a screenshot of this.

Notice that the "Type" column, which is scrolled behind SKU bleeds through where the table is "Missing" because the SKU column is rendered too far to the right.

Use Case

Correct rendering of the Sticky Columns when the table is resized.

[crisbeto]

I don't think that this is enough information for us to investigate. Is it possible to distil it into a Stackblitz? You can use one of the examples from the docs site as a starting point. https://material.angular.io/components/table/examples

[fireflysemantics]

OK - I created a Github Repository from the Angular Library Package project I'm using for the table component.

To see the bleeding that happens:

git clone git@github.com:fireflysemantics/datatablestickycolumnsdemo.git
npm i
ng build
ng serve -o

Notice that when scrolling the headers, they bleed through behind the CUSTOMER header, as that header is not correctly positioned ...

[andrewseguin]

I tried running the provided example but it failed to find and install some @fireflysemantics packages. It would be very helpful if you can reproduce this example in StackBlitz to simplify the reproduction

[fireflysemantics]

@andrewseguin I updated the repository. Sorry - I had the TableData class in a separate library and I forgot to refactor that part. I made the TableData class part of the DataTable.ts library component ... It should be self contained now. I also cleaned up the template, so it should be an easy read ... hopefully ...

[kryshac]

if anyone else encounters this problem, I leave a hack below, the problem is that cdkTable does not know when the table is resized. You must pay attention to the elementRef to be included in it in the resize container

export class App implements AfterViewInit, OnDestroy {
  @ViewChild(CdkTable) table!: CdkTable<unknown>;

  private _resizeObserver: ResizeObserver;

  constructor(private _elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    this._resizeObserver = new ResizeObserver(() => this.table.updateStickyColumnStyles() );
    this._resizeObserver.observe(this._elementRef.nativeElement);
  }

  ngOnDestroy(): void {
    this._resizeObserver.disconnect();
  }
}