Components: 2 MdPaginators for one table

Created on 17 Nov 2017  路  4Comments  路  Source: angular/components

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

I would like to have a paginator for the top of the md-table and also one for the bottom.
It would be nice if these paginators could be connected or a clone so either one can paginate the table.

What is the current behavior?

One paginator has control and the other paginator doesn't.

What are the steps to reproduce?

Create an md-table and add a paginator to top and bottom.

What is the use-case or motivation for changing an existing behavior?

If a table row length is significantly long, scrolling, either up or down to paginate, could lead to a poor user experience.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.4
Angular Material 2.0.0-betal.11
mac OS - High Sierra
Typescript - 2.3.4

Is there anything else we should know?

Fix Attempt 1
I've tried to create a component that contains the paginator then reference it twice in the table template.

Fix Attempt 2
I've also tried to create a shallow copy of the first paginator by using.
this.paginator2 = Object.assign(this.paginator). This essentially passed pagination control to the second one and didn't do what I expected. Thanks for any thoughts!

Most helpful comment

@jelbourn would you consider allowing multiple paginators to be passed to MatTableDataSource? I've seen this asked before but can't find the discussion now. ATM it's pretty cumbersome to create two paginators that stay in sync.

All 4 comments

The paginator and the table don't know about each other at all. You can add however many paginators you'd like, so long as you handle the events coming out of them and update your datasource.

@jelbourn would you consider allowing multiple paginators to be passed to MatTableDataSource? I've seen this asked before but can't find the discussion now. ATM it's pretty cumbersome to create two paginators that stay in sync.

@willshowell - thanks for jumping in. I agree with @jelbourn about the paginator and managing the events and handling the datasource. Thanks for a great UI framework to work with! I didn't know if there was an easier approach than what I was doing!

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._

Was this page helpful?
0 / 5 - 0 ratings