javascript - Disable table pagination in Material-UI - Stack Overflow

admin管理员组

文章数量:1291345

I use TablePagination ponent of Material-UI with React.

But this ponent doesn't have disabled prop.

I have a boolean loading value, which I want to use as a param to enable or disable arrows in the TablePagination.

How to achieve result like this?

I've tried to just pass disabled prop into TablePagination, but it doesn't work.

I use TablePagination ponent of Material-UI with React.

But this ponent doesn't have disabled prop.

I have a boolean loading value, which I want to use as a param to enable or disable arrows in the TablePagination.

How to achieve result like this?

I've tried to just pass disabled prop into TablePagination, but it doesn't work.

• javascript
• reactjs
• pagination
• material-ui

Share Improve this question Follow edited Sep 27, 2021 at 8:58 NearHuscarl 81.7k2222 gold badges319319 silver badges281281 bronze badges asked Sep 27, 2021 at 8:41 Andrew LosseffAndrew Losseff 37366 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

There is not a single disabled switch, but you can set the disabled prop of the inner button ponents like this:

<TablePagination
  SelectProps={{
    disabled: isDisabled
  }}
  backIconButtonProps={
    isDisabled
      ? {
          disabled: isDisabled
        }
      : undefined
  }
  nextIconButtonProps={
    isDisabled
      ? {
          disabled: isDisabled
        }
      : undefined
  }
  {...}
/>

Live Demo

The above answer is deprecated. Instead, if you want to disable the i.e. next button you may use the structure below:

  <TablePagination
    slotProps={{
      actions: {
        nextButton: {
          disabled: totalPages ? page + 1 >= totalPages : false
        },
      },
    }}
  />

本文标签： javascriptDisable table pagination in MaterialUIStack Overflow