CODEWITHSUNDEEP
material-ui
Andrés Montoya
Andrés Montoya

Reputation: 4427

Material UI - Remove "Rows per page" in the component TablePagination

How can I remove the select "Rows per page"? I don't want to use it in my project...

enter image description here

Upvotes: 35

Views: 61085

Answers (7)

Mike
Mike

Reputation: 1

In the latest MUI, you can pass an empty option like this: rowsPerPageOptions={[]}

Upvotes: 0

RJA
RJA

Reputation: 457

enter image description here

You can set the label to '' and hide the drop down, here is how to access them for MUI "@mui/material": "5.10.16",

         <TablePagination
            component="div"
            count={100}
            page={page}
            onPageChange={handleChangePage}
            rowsPerPage={10}
            labelRowsPerPage=''
            sx={{
              '& .MuiSelect-select':{
                display: 'none !important'
              },
              '& > div.MuiToolbar-root > div.MuiInputBase-root > svg':{
                display: 'none !important'
              }
            }}
          />

Upvotes: 1

wanHeda2394
wanHeda2394

Reputation: 21

Little different when you use MUIDataTable - it's 'pagination'
https://github.com/gregnb/mui-datatables#mui-datatables---datatables-for-mui-formerly-material-ui

<MUIDataTable 
      //...
      options={{ pagination: false }}
/>

Upvotes: 2

Psychobellic
Psychobellic

Reputation: 81

I cannot comment yet, unfortunately.

But for MUI 5 I got an error when attempting the empty array.

It is possible that the cause is my pageSize is set to 5, so the following worked fine for me:

pageSize={5}
rowsPerPageOptions={[5]}

This is an answer for the comment from FooBar:

It's a nice solution, but it will show an error in Material UI 5: Material-UI: The page size 100 is not preset in the rowsPerPageOptions Add it to show the pagination select. – FooBar Oct 26 at 14:26

Upvotes: 6

Yuriy Piskunov
Yuriy Piskunov

Reputation: 1224

Correct answer you should find in documentation. For the property rowsPerPageOptions one says:

Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed.

So you have to specify rowsPerPageOptions={[]}, that's all folks. The documentations could be found here.

Upvotes: 91

Fortune
Fortune

Reputation: 192

Just add the options property with paging as false to your JSX call for Material Table

<MaterialTable
    //your other props
    options={{
        paging: false
    }}
/>

Upvotes: 5

shiva
shiva

Reputation: 3941

Just assign the attribute labelRowsPerPage in TablePagination tag to an empty string. 

<TablePagination
  labelRowsPerPage=''
  {...otherProps}
  />

Upvotes: 9

Related Questions