How to scroll to a specific row in a specific page using Angular Material table

Question

I am using angular material to display data in table with pagination, when the user clicks on a row, I redirect him to another page, and if he wants to go back to table page, he clicks on a button.

My problem is the user needs to go back to table page and to scroll to the specific row, I do it like this

document.getElementById(elementId).scrollIntoView()

but if the row clicked is not in the first page, the element is not found, how can I paginate to the page where the row exists ?

And the second problem is user can filter table then select a specific row, if I save the page number, when he will go back to table page, the data will be rendered without filter and the page number will not be correct

labu4bd · Accepted Answer · 2019-04-12 14:38:04Z

2

you have to save the information about pageIndex when you go to another page, because when you come back your data table you have to give this index number to [pageIndex]. Ex:

<mat-paginator [length]="length"
          [pageSize]="pageSize"
          [pageSizeOptions]="pageSizeOptions"
          (page)="pageEvent = $event"
          [pageIndex]="pIndex">
</mat-paginator>

here pIndex is a variable that I define in my Component. if your pageSize is 10 and pageIndex is 0 then it show 1 to 10 row...

For more info: https://stackblitz.com/angular/ngdejmepgbr?file=app%2Fpaginator-configurable-example.html

answered Apr 12, 2019 at 14:38

labu4bd

7015 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ghizlane Lotfi Over a year ago

but as I said if he sort the data then the user go to other page if he comes back, the page index is not the same, suppose the selected row is in pageIndex = 2, he sort data, and the selected row is in pageIndex = 1, then he click on the row, when he will come back to the page, the selected item is back to page index 2, cause the sort is reset

labu4bd Over a year ago

you can save also the sort information and when user come back you can sort again if sort is true.

Ghizlane Lotfi Over a year ago

Thanks for your reply, I want to know if there is another way without saving sort information

Sam Herrmann · Accepted Answer · 2019-04-12 14:45:56Z

2

You need to connect the paginator with Angular's router.

For example, let's say you structured your route path as follows:

http://my/url/to/table/component?page=2

In this case you can get the page index 2 from the url to the table as follow:

Component Class:

class MyComponent {

  pageIndex = this.activatedRoute.queryParams.pipe(
    map(params => params['page'])
  );

  constructor(activatedRoute: ActivatedRoute) {}
}

Template:

<mat-paginator [pageIndex]="pageIndex | async"></mat-paginator>

So far the URL will drive the table. Now you also need to update the URL when the user navigates the table using the paginator:

Template:

<mat-paginator [pageIndex]="pageIndex | async" (page)="pageChange($event)"></mat-paginator>

Component Class:

class MyComponent {

  pageIndex = this.activatedRoute.queryParams.pipe(
    map(params => params['page'])
  )

  constructor(activatedRoute: ActivatedRoute, router: Router) {}

  pageChange(e: PageEvent): void {
    this.router.navigate( /* ... */ );
  }
}

Now that the URL is being updated as the user navigates around the table, that allows the router to then drive the table when the user returns to a previously visited URL.

edited Apr 12, 2019 at 14:45

answered Apr 12, 2019 at 14:42

Sam Herrmann

7,0285 gold badges33 silver badges61 bronze badges

3 Comments

Ghizlane Lotfi Over a year ago

but as I said if he sort the data then the user go to other page if he comes back, the page index is not the same, suppose the selected row is in pageIndex = 2, he sort data, and the selected row is in pageIndex = 1, then he click on the row, when he will come back to the page, the selected item is back to page index 2, cause the sort is reset

Sam Herrmann Over a year ago

Also store the sorting information in the URL so that when the user returns they are presented with the same sorting configuration?

Ghizlane Lotfi Over a year ago

Thanks for your reply, it is not what I want, I am looking for another solution, you think is there another way to do it ?

Collectives™ on Stack Overflow

How to scroll to a specific row in a specific page using Angular Material table

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related