как настроить интервал / ширину пагинации пользовательского интерфейса реагирующего материала на небольших экранах

Я использую компонент пагинации пользовательского интерфейса response-material, где у меня есть опция строк на страницу вместе с параметрами forward, backward, first_page и last_page, как показано ниже

введите здесь описание изображения

Код рендеринга пагинации:

<TablePagination
        component="div"
        rowsPerPageOptions={[10, 20, 50, 100]}
        colSpan={20}
        count={totalProducts}
        rowsPerPage={rowsPerPage}
        page={page}
        labelRowsPerPage="Rows per page"
        SelectProps={{
          inputProps: { "aria-label": "rows per page" },
          native: true
        }}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
        ActionsComponent={subProps => (
          <Pagination {...subProps} totalProducts={totalProducts} />
        )}
      />

Есть ли способ, при котором для небольших экранов я могу скрыть параметр строк на странице или переместить компонент нумерации страниц влево. В основном делая компонент отзывчивым

Спасибо


reactjs material-ui react-material
person Gopal Chandak    schedule 08.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что простое удаление строк на странице поможет вашему делу.

Из документации для rowsPerPageOptions

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

В общем, если вы пройдете rowsPerPageOptions={[]}, это должно сработать.

Вы можете использовать Hidden для переключения между ними, как показано ниже.

Пример

<>
  <Hidden smUp>
   <TablePagination
     rowsPerPageOptions={[]}
     component="div"
     count={rows.length}
     rowsPerPage={rowsPerPage}
     page={page}
     onChangePage={handleChangePage}
     onChangeRowsPerPage={handleChangeRowsPerPage}
   />
 </Hidden>
 <Hidden smDown>
   <TablePagination
   rowsPerPageOptions={[5, 10, 15, 20]}
   component="div"
   count={rows.length}
   rowsPerPage={rowsPerPage}
   page={page}
   onChangePage={handleChangePage}
   onChangeRowsPerPage={handleChangeRowsPerPage}
  />
 </Hidden>
</>

И таблица уже отзывчивая. Дай мне знать.

person Sahil Paudel    schedule 11.05.2020