[DataGrid] Option to Disable Pagination while server request is loading

[asyrialaK]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

When i am using server side pagination my goal is for a user to be able paginate and get the next page.

We are using a graphQL API, and cursor based pagination. For pagination to work as intended, we need the request for the current page to complete, so we can get the cursors for the next page. As a result, we'd like the ability to disable the pagination buttons while content loads.

The inability to do this allows a user to hit next page any amount of times, and still request content based off the next page from the content currently being displayed.

An easy way to replicate this would be to hook up a table to server data with cursor based pagination, then throttle your speed. Then do the following

1. Let the table load
2. Hit next page 5 times
3. Each request will be using the end cursor from page 1
4. Page six will load with the results from page 2

Examples 🌈

No response

Motivation 🔦

I am trying to use the datagrid in a way where server side pagination using cursors provides us the ability to go to the next page and reliably get the next results.

Order ID 💳 (optional)

No response

[DanailH]

Hi, @asyrialaK thanks for raising this.

A possible solution is for you to provide your own pagination via the components prop (you can find more about it here https://mui.com/components/data-grid/components/#pagination) and control when it is enabled or disabled. If you use DataGridPro you can control it using the apiRef and access to rootProps to know when the grid is loading and when not. I've prepped a quick demo to showcase my idea. You can find it here: https://codesandbox.io/s/serverpaginationgrid-material-demo-forked-eipvy?file=/demo.tsx:1877-1887

[asyrialaK]

Thanks for providing a workaround for this! That approach would definitely enable us to prevent multiple paging to prevent bad pagination.

I'd love to see something like this baked into the base tables loading state to be able handle cursor-based server data by default.

[kovryzhenko]

idk why we still have to make some workaround for this :(
we need some flag for this from the box.
ty.

[jonahsol]

I'm using 6.8.0 and we can pass prop slotProps:

<DataGrid
    ...
    slotProps={{
        pagination: {
            prevIconButtonProps: {
                disabled: myQuery.isFetchingPreviousPage,
            },
            nextIconButtonProps: {
                disabled: myQuery.isFetchingNextPage,
            },
            SelectProps: {
                disabled: myQuery.isFetching,
            },
        },
    }}
/>

with the default <Pagination /> component these props are passed to https://mui.com/material-ui/api/table-pagination/.

[ducnhh8]

I'm using 6.8.0 and we can pass prop slotProps:

<DataGrid
    ...
    slotProps={{
        pagination: {
            prevIconButtonProps: {
                disabled: myQuery.isFetchingPreviousPage,
            },
            nextIconButtonProps: {
                disabled: myQuery.isFetchingNextPage,
            },
            SelectProps: {
                disabled: myQuery.isFetching,
            },
        },
    }}
/>

with the default <Pagination /> component these props are passed to https://mui.com/material-ui/api/table-pagination/.

Be careful when using this though because this will overwrite the default behavior of the previous and next buttons to be disabled on the first and last page, respectively.