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 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)
}}
Most helpful comment
I got it working with the following approach:
The
TableFooter
component:The
handleChangeRowsPerPage
method: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 therowsPerPageOptions
arrayI hope someone find this usefull!