React with Material UI Table Pagination show all entries

Question

I have a react data table where I recently added pagination for when you have many entries. I wanted the option to show all entries in the table by selecting "all" in the rowsPerPageOptions dropdown menu. So far I managed to get the count of all entries to show up in the menu.

What I need now is to label the entries.length object with the string "all" and get that to show up in the menu. Is that possible?

When I try something like all.push({label: this.state.entries.length}); I get the error:

Objects are not valid as a React child (found: object with keys {label}). If you meant to render a collection of children, use an array instead.

That made me think that I can not use arrays with keys for the menu, so I have to show that value in a different way.

Code:

Edit: Moved the all variable into the render function after morteza ataiy commented and pointed out an error.

render() {
    return (
    let all = [5,10,25,50,(this.state.entries.length)];
        <div>
        <Table>
        </Table>
        </div>
        <TablePagination
                component="div"
                count={this.state.entries.length}

                rowsPerPage={this.state.rowsPerPage}
                page={this.state.page}
                backIconButtonProps={{
                    'aria-label': 'Previous Page',
                }}
                nextIconButtonProps={{
                    'aria-label': 'Next Page',
                }}
                onChangePage={this.handleChangePage}
                onChangeRowsPerPage={this.handleChangeRowsPerPage}
                labelRowsPerPage="Reihen pro Seite:"
                rowsPerPageOptions={all}

            );
    }

Image: The last entry is what I want to change

Please keep in mind that I am new to React and JavaScript, thanks in advance!

Why you add `let all = [...` after `return` ? move it between `render` and `return` — morteza ataiy, Aug 11 '19 at 20:52
Please, check mi answer in [React material table automatic page size](https://stackoverflow.com/a/58193834/7994269) — Jorge Santos Neill, Oct 02 '19 at 00:47

score 3 · Answer 1 · answered May 06 '21 at 03:59

3

You can use label . plz refer the code

<TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />

You can pass -1 to the backend and write query with respect to this.

answered May 06 '21 at 03:59

Shahnad S

983
10
17

score 1 · Answer 2 · answered Aug 15 '18 at 11:23

just use it in render method:

render() {
    let all = [5,10,25,50,(this.state.entries.length)];
    return (
        <div>
        <Table>
        </Table>
        </div>
        <TablePagination
                component="div"
                count={this.state.entries.length}

                rowsPerPage={this.state.rowsPerPage}
                page={this.state.page}
                backIconButtonProps={{
                    'aria-label': 'Previous Page',
                }}
                nextIconButtonProps={{
                    'aria-label': 'Next Page',
                }}
                onChangePage={this.handleChangePage}
                onChangeRowsPerPage={this.handleChangeRowsPerPage}
                labelRowsPerPage="Reihen pro Seite:"
                rowsPerPageOptions={all}

            }

Thanks for the reply, I already do that, I messed up the code in my question. What I have is already working, the problem is that I want to display a string in the menu instead of the number I get from `this.state.entries.length` but of course I want the number to get used as the actual pagination length. I will edit my question code and move the variable in the render like I already have it in my project, sorry for the confusion. — Jay-Way, Aug 15 '18 at 11:38
hi, please also show how to change next icon with `nextIconButtonProps` — mohas, Jun 19 '19 at 19:04

React with Material UI Table Pagination show all entries

2 Answers2