angularangular-materialangular-material-5

Angular Material Table automatic scroll


Is there any way to scroll the Angular Material Table in the code behind?

I have a requirement that the table should be always at the bottom bosition when the page loads. Unfortunately paging is not an option.


Solution

  • Typically, scrollable elements in angular material with scroll capability use cdkScrollable directive, but it doesn't seem to be the case with mat-table

    So for now you could bypass it by directly accessing the element, and scroll to a high y value

      scrollBottom() {
        document.querySelector('mat-table').scrollBy(0, 10000);
      }
    

    Example