Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][TablePagination] Ability to show, but disable, the first/last page buttons #39336

Closed
cjenkscybercom opened this issue Oct 6, 2023 · 1 comment · Fixed by #39353
Assignees
Labels
component: TablePagination The React component. new feature New feature or request

Comments

@cjenkscybercom
Copy link

cjenkscybercom commented Oct 6, 2023

Summary 💡

When paging through results and waiting on the API to return the next set of results, we like to disable the pagination controls. It's possible to do this for the page size dropdown, previous page button, and last page button like so:

<DataGridPro
    slotProps={{
          pagination: {
            showFirstButton: true,
            showLastButton: true,
            backIconButtonProps: {
              disabled: isLoading
            },
            nextIconButtonProps: {
              disabled: isLoading
            },
            SelectProps: {
              disabled: isLoading
            }
          },
        }}
</DataGridPro

However, it doesn't seem to be possible to also disable the first/last buttons.

Examples 🌈

Maybe we could add props for the first/last buttons?

<DataGridPro
    slotProps={{
          pagination: {
            showFirstButton: true,
            showLastButton: true,
            firstIconButtonProps: {
              disabled: isLoading
            },
            backIconButtonProps: {
              disabled: isLoading
            },
            nextIconButtonProps: {
              disabled: isLoading
            },
            lastIconButtonProps: {
              disabled: isLoading
            },
            SelectProps: {
              disabled: isLoading
            }
          },
        }}
</DataGridPro

Or even better...make it possible to entirely disable the pagination controls? (doesn't currently work)

<DataGridPro
    slotProps={{
          pagination: {
            showFirstButton: true,
            showLastButton: true,
            disabled: isLoading
          },
        }}
</DataGridPro

Motivation 🔦

When the user is paging through data, it should be possible to disable the pagination controls while data is loading.

Search keywords: datagrid first last page disable
Order ID: 70139

@cjenkscybercom cjenkscybercom added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 6, 2023
@zannager zannager added the component: data grid This is the name of the generic UI component, not the React module! label Oct 6, 2023
@MBilalShafi MBilalShafi changed the title Ability to show, but disable, the first/last page buttons [TablePagination] Ability to show, but disable, the first/last page buttons Oct 7, 2023
@MBilalShafi
Copy link
Member

MBilalShafi commented Oct 7, 2023

Since the grid uses the TablePagination component from the core for this part of the application, I think allowing this enhancement there is better.
I'll transfer the issue there for the team to have a look.

CC @mui/core team

@MBilalShafi MBilalShafi transferred this issue from mui/mui-x Oct 7, 2023
@MBilalShafi MBilalShafi added component: TablePagination The React component. and removed component: data grid This is the name of the generic UI component, not the React module! labels Oct 7, 2023
@DiegoAndai DiegoAndai self-assigned this Oct 9, 2023
@DiegoAndai DiegoAndai added new feature New feature or request and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 10, 2023
@DiegoAndai DiegoAndai changed the title [TablePagination] Ability to show, but disable, the first/last page buttons [material-ui][TablePagination] Ability to show, but disable, the first/last page buttons Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: TablePagination The React component. new feature New feature or request
Projects
None yet
4 participants