CODEWITHSUNDEEP
reactjsmaterial-ui
mattsmith5
mattsmith5

Reputation: 1093

Material React Pagination, Change Rows Per Page

Does Material React Pagination component have Page Size option (Rows per page)? I don't see it in the API listed. I know TablePagination component does, however regular component does not seem to .

<Pagination

https://mui.com/material-ui/react-pagination/

TablePagination has this, but not regular Pagination.

<TablePagination
  component="div"
  count={100}
  page={page}
  rowsPerPage={rowsPerPage}

enter image description here

Upvotes: 2

Views: 4769

Answers (2)

DrJele
DrJele

Reputation: 51

  1. add this to your <DataGrid/>

components={
      {
          "Pagination": () => (<Pagination rowsPerPageOptions={rowsPerPageOptions}/>)
      }
  }

  1. this is the custom pagination component

import React from "react";
import {Box, Pagination as PaginationBase, TablePagination} from "@mui/material";
import {DataGrid, gridPageCountSelector, gridPageSelector, gridRowCountSelector, GridToolbar, useGridApiContext, useGridSelector} from "@mui/x-data-grid";
import {gridPageSizeSelector} from "@mui/x-data-grid/hooks/features/pagination/gridPaginationSelector";

function Pagination({rowsPerPageOptions}) {
    const gridApiContext = useGridApiContext();

    const page = useGridSelector(gridApiContext, gridPageSelector);
    const rowCount = useGridSelector(gridApiContext, gridRowCountSelector);
    const pageCount = useGridSelector(gridApiContext, gridPageCountSelector);
    const pageSize = useGridSelector(gridApiContext, gridPageSizeSelector);

    const handleChangePage = (event, newPage) => {
        gridApiContext.current.setPage(newPage);
    };

    const handleChangePageSize = (event) => {
        gridApiContext.current.setPageSize(parseInt(event.target.value, 10));
        gridApiContext.current.setPage(0);
    };

    return (
        <TablePagination className="pagination-container"
                         component="div"
                         count={rowCount}
                         page={page}
                         rowsPerPage={pageSize}
                         onRowsPerPageChange={handleChangePageSize}
                         onPageChange={handleChangePage}
                         rowsPerPageOptions={rowsPerPageOptions}
                         ActionsComponent={() => (
                             <PaginationBase className="pagination-pages"
                                             color="primary"
                                             variant="outlined"
                                             shape="rounded"
                                             page={page + 1}
                                             count={pageCount}
                                             onChange={(event, page) => handleChangePage(event, page - 1)}
                             />
                         )}
        />
    );
}

  1. this is the css

.pagination-container
{
    flex: 1 0 auto;

    .pagination-pages
    {
        flex: 1 0 auto;
        padding-left: 1rem;
    }
}

Upvotes: 1

kofeigen
kofeigen

Reputation: 1635

No. rowsPerPage is not available in the Pagination component.

The MUI docs say:

The Pagination component was designed to paginate a list of arbitrary items...

This means that the Pagination component does not make assumptions about the type of content that is being divided into pages. The content is arbitrary. The docs continue to say:

It's preferred in contexts where SEO is important, for instance, a blog.

So, for example the content could be a flow of continuous text.

The TablePagination component has a prop explicitly for rowsPerPage because it was designed:

For the pagination of a large set of tabular data...

Here, the content is assumed to be items delimited by rows rather than an arbitrary flow of content.

Upvotes: 1

Related Questions