javascript - React with Material UI Table Pagination show all entries - Stack Overflow

admin管理员组

文章数量:1295651

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 mented and pointed out an error.

render() {
    return (
    let all = [5,10,25,50,(this.state.entries.length)];
        <div>
        <Table>
        </Table>
        </div>
        <TablePagination
                ponent="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!

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 mented and pointed out an error.

render() {
    return (
    let all = [5,10,25,50,(this.state.entries.length)];
        <div>
        <Table>
        </Table>
        </div>
        <TablePagination
                ponent="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!

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Aug 15, 2018 at 11:42 Jay-Way asked Aug 15, 2018 at 11:20 Jay-WayJay-Way 33811 gold badge33 silver badges1515 bronze badges 2

• Why you add let all = [... after return ? move it between render and return – morteza ataiy Commented Aug 11, 2019 at 20:52
• Please, check mi answer in React material table automatic page size – Jorge Santos Neill Commented Oct 2, 2019 at 0:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

just use it in render method:

render() {
    let all = [5,10,25,50,(this.state.entries.length)];
    return (
        <div>
        <Table>
        </Table>
        </div>
        <TablePagination
                ponent="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}

            }

本文标签： javascriptReact with Material UI Table Pagination show all entriesStack Overflow