Пользовательский интерфейс материала - Удалите "Строк на страницу" в компоненте TablePagination

Question

Как я могу снять выделение "Строки на странице"? Я не хочу использовать это в моем проекте...

Answer 1

Просто назначьте атрибут labelRowsPerPage в TablePagination тег к пустой строке.

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

Answer 2

Правильный ответ вы увидите в документации. Смотрите свойство "rowPerPageOptions".. и документация говорит:

Настраивает параметры строки в поле выбора страницы. Если доступно менее двух вариантов, поле выбора не будет отображаться.

Итак, вы должны указать rowPerPageOptions={[]} и все. Док. страница: https://material-ui.com/api/table-pagination/

Извините за мой язык.

Answer 3

Я пока не могу комментировать, к сожалению.

Но для MUI 5 я получил ошибку при попытке пустого массива.

Возможно, причина в том, что для моего pageSize установлено значение 5, поэтому у меня отлично сработало следующее:

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

Это ответ на комментарий от FooBar:

Это хорошее решение, но оно покажет ошибку в Material UI 5: Material-UI: размер страницы 100 не задан в rowsPerPageOptions. Добавьте его, чтобы показать выбор разбиения на страницы. — FooBar 26 окт в 14:26

Answer 4

Просто добавьте свойство options с paging как false к вашему вызову JSX для таблицы материалов

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

Answer 5

Немного отличается, когда вы используете MUIDataTable — это «нумерация страниц»
https://github.com/gregnb/mui-datatables#mui-datatables---datatables-for-mui-formerly-material-ui

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

Answer 6

Вы можете установить метку «» и скрыть раскрывающийся список. Вот как получить к ним доступ для 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'
              }
            }}
          />