[TablePagination] Add showFirstButton and showLastButton support

[indexofmetals]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

First of all, thank you for creating and maintaining such an extensive set of attractive and easy-to-use UI components. My job is much easier because of you fine people.

My request: it would be nice to have FirstPage and LastPage buttons in the TablePagination component.

The TablePagination component should accept 'showFirstButton' and 'showLastButton' props and, if true, provide first_page and last_page buttons/functionality so that users can quickly paginate to the end of a large amount of data displayed in tabular form. This functionality is currently supported in the Pagination component but not in the TablePagination component. It would be nice to have it in the TablePagination component because TablePagination works well with the table, and it seems like a common use case that users might want to, for example, quickly paginate to the 'Z' page of a large set of alphabetically-ordered data.

Examples 🌈

As we can see, Angular Material has implemented this:
https://stackblitz.com/angular/qmpmanrjbem?file=src%2Fapp%2Ftable-pagination-example.ts

Motivation 🔦

Our application displays a paginated table of items either 10, 25, 50, or 100 entries at a time, out of approximately 12,000 possible data points. We have extensive filtering capabilities, but users have nonetheless requested First Page and Last Page buttons. We feel that it would help users who might be less technically-minded or less familiar with our data to have these buttons, as more advanced filtering requires more intimate knowledge of the dataset. We are either going to switch to the Pagination component or use a different table, but in the future it would be nice to have this implemented in the TablePagination component.

I may be able to help implement this in the coming weeks.

[indexofmetals]

Oh! I just realized there is an example in in source with a custom actions component. Thanks!

[oliviertassinari]

@hurricane987 Thanks for the example with Angular Material, I was curious about how they format the numbers, they don't 🙃

Related to #20656

[indexofmetals]

Perhaps I closed this prematurely. I'm going to use that example with the custom actions component but it makes sense to have this option as configurable props.

[oliviertassinari]

@hurricane987 Agree, it would be consistent with the Pagination component: https://material-ui.com/components/pagination/#buttons. Do you want to work on it?

[indexofmetals]

I probably won't have time until next week but yeah I'd be happy to!

[oliviertassinari]

@hurricane987 Perfect, to be fair, I doubt somebody will give it a shot before a couple of months if it's not coming from you, so don't worry about a developer "stealing" your opportunity to contribute 😁.

[marcosvega91]

Why not integrate the pagination component inside of table pagination?

[oliviertassinari]

Why not integrate the pagination component inside of table pagination?

@marcosvega91 Two different concerns, TablePagination is for data grids, Pagination is for lists.

[ankitasingh170190]

Why not integrate the pagination component inside of table pagination?

@marcosvega91 Two different concerns, TablePagination is for data grids, Pagination is for lists.

@oliviertassinari I have used pagination component with Table to achieve the same. Is this not a just use of the component. Thank you.

[solmalisani]

Hi I would like to work in this, is it still available?

[oliviertassinari]

There is a open pull request for the feature in #20750. We will wait for the work on v5 to merge it :)

[MisterFredy]

hi i hope it has feature handle for last and first page handling from server side