Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TablePagination] How to show all rows on a single page? #9136

Closed
1 task done
SergeyAlexeev opened this issue Nov 14, 2017 · 9 comments · Fixed by #17885
Closed
1 task done

[TablePagination] How to show all rows on a single page? #9136

SergeyAlexeev opened this issue Nov 14, 2017 · 9 comments · Fixed by #17885
Labels
component: table This is the name of the generic UI component, not the React module! new feature New feature or request

Comments

@SergeyAlexeev
Copy link

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

Is there any way to configure TablePagination shows all rows on a single page?
I mean something like this:

<TablePagination
  rowsPerPageOptions: [5, 10, 15, 'All'] // or [5, 10, 15, 0]
/>

I've already tried to use '0' as a page size, but the 'next' and 'prev' buttons work incorrectly in this case.

@SergeyAlexeev SergeyAlexeev changed the title How to show all rows on a single page? [TablePagination] How to show all rows on a single page? Nov 14, 2017
@oliviertassinari oliviertassinari added component: table This is the name of the generic UI component, not the React module! new feature New feature or request labels Nov 14, 2017
@oliviertassinari
Copy link
Member

@SergeyAlexeev What's the use case of a TablePagination component if it's to display all the rows? Is this for displaying rows information?

I'm also wondering how much we want to make the TablePagination customizable. Maybe our best answer could be:

TablePagination is a high-level API, if he doesn't answer your need, go write your own.

@SergeyAlexeev
Copy link
Author

It's just about flexibility. For example, a table has not so many rows. By default, a table shows 10 rows on a page. But sometimes, it's more convenient to see all rows on a page. In this case, it's possible to use the Ctrl+F browser hotkeys to find some information :)

@leMaik
Copy link
Member

leMaik commented Nov 18, 2017

If you want to display all rows in one page… why are you using TablePagination (pagination = splitting content across pages) in the first place?

@SergeyAlexeev
Copy link
Author

As I pointed above, I'd like to use [10, 20, 'All'] page sizes, not always 'All'. And it seems like people often look for the similar functionality.

@hielfx
Copy link

hielfx commented Feb 19, 2018

I got it working with the following approach:

The TableFooter component:

<TableFooter>
  <TableRow>
    <TablePagination
      {..otherprops}
      rowsPerPage={this.state.rowsPerPage}
      onChangeRowsPerPage={this.handleChangeRowsPerPage}
      rowsPerPageOptions={[5, 10, 15, 'All']}
    />
  </TableRow>
</TableFooter>

The handleChangeRowsPerPage method:

handleChangeRowsPerPage = event => {
  const { data } = this.props
  const value = event.target.value
  const rowsPerPage = value === 'All' ? data.length : value;
  this.setState({ rowsPerPage });
};

Basicaly what I do is check the 'All' value in the change event and set the current rowsPerPage to the whole data length.
However when showing the selected value in the Select it will show an empy value because the data length number is not in the selected cases.
Another case would be adding the data.length directly in the rowsPerPageOptions array

I hope someone find this usefull!

@oakis
Copy link

oakis commented Apr 4, 2018

@hielfx When you pick "All" in your application, does "Rows per page:" show "All" or is it just blank? Mine is blank with your solution. If i inspect the element it is just an empty string.

@hielfx
Copy link

hielfx commented Apr 4, 2018

@oakis blank, I supose it's working that way because is not a number, thus is not matching the select values

@MatiasCiccone
Copy link

MatiasCiccone commented Sep 17, 2019

@oakis you can do this
SelectProps={{ renderValue: value => (value === yourMaxValue ? 'All' : value) }}

@timrutter
Copy link

timrutter commented May 23, 2023

much easier now with latest:
rowsPerPageOptions={[5, 10, 25, { value: data.length, label: "All" }]}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: table This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants