material-ui 如何更改 TablePagination 中的初始 rowsPerPage

Question

我是使用材料的新手，我想删除选择“每页行数”并显示“n”行，例如 10。

<TablePagination
          rowsPerPageOptions={[]}
          component="div"
          count={rows.length}
          rowsPerPage={10}
          page={page}
          backIconButtonProps={{
            "aria-label": "Previous Page"
          }}
          nextIconButtonProps={{
            "aria-label": "Next Page"
          }}
          onChangePage={handleChangePage}
          onChangeRowsPerPage={handleChangeRowsPerPage}
        />

但是，该表继续显示 5 行。我怎样才能改变这种行为？提前致谢

Answer 1

我尝试了接受的答案，但是这需要对各个行的呈现方式进行更精细的控制。如果您只想更改呈现的初始行数，请将 pageSize（参见文档https://material-table.com/#/docs/all-props）传递给 MaterialTable 的 options 属性，如下所示

 <div>
      <MaterialTable
        icons={tableIcons}
        columns={props.column_mapper}
        data={props.data}
        title="Fancy Title Here"
        options={{
          search: true,
          exportButton: true,
          pageSize:10
        }}
      />
 </div>

Answer 2

它不起作用，因为它是一种状态，并且您没有以正确的方式更改它，在这个 Material-UI 示例中，您必须初始化 上的值，就像我在本React.useState()示例的第 119 行中所做的那样。

const [rowsPerPage, setRowsPerPage] = React.useState(10); // this line will be the starting