如何在較小的屏幕上調整 React Material ui 分頁間距/寬度

Question

我正在使用 react-material ui 分頁組件，其中我有每頁行選項以及向前、向后、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} />
        )}
      />

有沒有辦法讓較小的屏幕，我可以隱藏每頁行選項或將分頁組件向左移動。 基本上使組件響應

謝謝

Answer 1

我認為僅刪除每頁的行將有助於您的事業。

從rowsPerPageOptions的文檔

自定義每頁行數 select 字段的選項。 如果可用的選項少於兩個，則不會顯示 select 字段。

所以基本上，如果你通過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>
</>

並且該表已經響應。 請告訴我。