Material-ui: [TablePagination] How to show all rows on a single page?

Created on 14 Nov 2017  Â·  8Comments  Â·  Source: mui-org/material-ui

  • [x] 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.

Table enhancement

Most helpful comment

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!

All 8 comments

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

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 :)

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

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.

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!

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

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

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

activatedgeek picture activatedgeek  Â·  3Comments

chris-hinds picture chris-hinds  Â·  3Comments

pola88 picture pola88  Â·  3Comments

mattmiddlesworth picture mattmiddlesworth  Â·  3Comments

FranBran picture FranBran  Â·  3Comments