Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable table pagination in Material-UI

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.

like image 528
Andrew Losseff Avatar asked Oct 24 '25 19:10

Andrew Losseff


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

like image 79
NearHuscarl Avatar answered Oct 26 '25 07:10

NearHuscarl



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!