Disable table pagination in Material-UI

Viewed 1775

I use TablePagination component of Material-UI with React.

But this component 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.

1 Answers

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

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

Live Demo

Codesandbox Demo

Related