Pular para o conteúdo

🎉 v5 is out! Head to the documentation to get started.

Data Grid - Pagination

Through paging, a segment of data can be viewed from the assigned data source.

By default, the MIT DataGrid displays the rows with pagination, and up to 100 rows per page.

On the other hand, the commercial DataGridPro component displays, by default, all the rows with infinite scrolling (and virtualization) and without the 100 rows per page limitation. You need to set the pagination prop to enable the pagination feature in such a case.

Basic example

Desk
Commodity
Trader Name
Trader Email
Quantity
D-8445
Soybeans
Kenneth Cruz
37,104
D-9831
Oats
Virgie Doyle
25,331
D-8488
Soybean Meal
Elnora Santos
61,620
D-8207
Milk
Flora Mathis
29,655
D-2407
Wheat
Helen Stokes
54,437
D-5843
Cocoa
Gary Norris
9,466
D-7936
Sugar No.14
Roger Stanley
72,054
D-9164
Coffee C
Curtis Hansen
92,157
D-1630
Soybean Meal
Vernon Reynolds
29,340
D-7590
Wheat
Keith Sims
66,635

Linhas por página:

100

1-100 de 1000

<DataGrid pagination {...data} />

Page size

  • The default page size is 100, you can change this value with the pageSize prop.
  • You can configure the possible page size the user can choose from with the rowsPerPageOptions prop.
Desk
Commodity
Trader Name
Trader Email
Quantity
D-8207
Milk
Charles Santiago
24,428
D-901
Soybeans
Ethan Cain
5,199
D-9577
Frozen Concentrated Orange Juice
Cecelia Reyes
72,968
D-4288
Robusta coffee
Katie Moran
65,504
D-1302
Sugar No.14
Betty Murray
4,080

Linhas por página:

5

1-5 de 100

<DataGrid
  pageSize={pageSize}
  onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
  rowsPerPageOptions={[5, 10, 20]}
  pagination
  {...data}
/>

Controlled pagination

While the previous demos show how the pagination can be uncontrolled, the active page can be controlled with the page/onPageChange props.

Desk
Commodity
Trader Name
Trader Email
Quantity
D-4820
Cocoa
Angel Harrington
67,493
D-8906
Cotton No.2
Margaret Ortiz
98,279
D-327
Soybean Oil
Brent Townsend
31,506
D-6859
Rapeseed
Brett Castillo
24,846
D-2676
Cocoa
Clifford Blair
49,452

1-5 de 100

<DataGrid
  page={page}
  onPageChange={(newPage) => setPage(newPage)}
  pageSize={5}
  rowsPerPageOptions={[5]}
  pagination
  {...data}
/>

Auto size

The autoPageSize prop allows to auto-scale the pageSize to match the container height and the max number of rows that can be displayed without a vertical scroll bar. By default, this feature is off.

Desk
Commodity
Trader Name
Trader Email
Quantity
D-5648
Wheat
Alejandro Goodwin
37,400
D-1973
Soybean Oil
Estelle Holmes
40,403
D-2493
Soybeans
Ryan Myers
22,703
D-3122
Rapeseed
Harold Barber
18,445
D-8962
Soybeans
Edith Cross
45,930

1-5 de 100

<DataGrid autoPageSize pagination {...data} />

Server-side pagination

By default, pagination works on the client-side. To switch it to server-side, set paginationMode="server". You also need to set the rowCount prop so that the grid knows the total number of pages. Finally, you need to handle the onPageChange callback to load the rows for the corresponding page.

Desk
Commodity
Trader Name
Trader Email
Quantity

1-5 de 100

<DataGrid
  rows={rows}
  columns={data.columns}
  pagination
  pageSize={5}
  rowsPerPageOptions={[5]}
  rowCount={100}
  paginationMode="server"
  onPageChange={(newPage) => setPage(newPage)}
  loading={loading}
/>

Cursor-based pagination

You can adapt the pagination for your cursor-based pagination. To do so, you just have to keep track of the next cursor associated with each page you fetched.

Desk
Commodity
Trader Name
Trader Email
Quantity

1-5 de 100

<DataGrid
  rows={rows}
  columns={data.columns}
  pagination
  pageSize={5}
  rowsPerPageOptions={[5]}
  rowCount={100}
  paginationMode="server"
  onPageChange={handlePageChange}
  page={page}
  loading={loading}
/>

Customization

You can customize the rendering of the pagination in the footer following the component section of the documentation.

Paginate > 100 rows

The DataGrid component can display up to 100 rows per page. The DataGridPro component removes this limitation. The following demo displays 200 rows per page:

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

0-0 de 0

<DataGridPro pagination pageSize={200} rowsPerPageOptions={[200]} {...data} />

apiRef

The grid exposes a set of methods that enables all of these features using the imperative apiRef.

⚠️ Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.

  • setPageSize: Set the number of rows in one page.
  • setPage: Set the displayed page.
  • onPageChange: Callback fired after a new page has been displayed.
  • onPageSizeChange: Callback fired after the page size was changed.

Below is an example of how you can reset the page using the imperative setPage method.

Desk
Commodity
Trader Name
Trader Email
Quantity
D-6141
Soybeans
Gertrude Reid
59,425
D-4357
Coffee C
Glenn Oliver
79,863
D-3319
Soybean Oil
Roy Allison
11,664
D-6987
Robusta coffee
Caroline Frazier
92,197
D-7741
Corn
Christine Curtis
88,548

1-5 de 10

<Button color="primary" variant="outlined" onClick={handleClick}>
  Set page 2
</Button>
<div style={{ height: 400, width: '100%', marginTop: 16 }}>
  <DataGridPro
    pagination
    pageSize={5}
    rowsPerPageOptions={[5]}
    apiRef={apiRef}
    {...data}
  />
</div>