Search code examples
reactjsmui-datatable

MUIDataTable default rows in page doesn't work

I'm trying to customize the number of rows in a MUIDataTable, but it seems like the default always stays at 10. This is what I tried: 

  <MUIDataTable
      pagination="true"
      count="5"
      title={"Proposals"}
      data={data.hits}
      columns={columns}
    />

I also tried adding page="1" but it seems to have no effect. How do I solve this?

Solution

  • Refer to MUI-Datatables' document

    Reason

    You need to provide it inside the options prop of your table

    <MUIDataTable
  options={{
    count: 10,
    ...
  }}
  ...
/>

    And count is correct for your demand, page is used for another feature

    page: User provided starting page for pagination
    count: User provided override for total number of rows

    Addition

    By the way, you can achieve specific paging via add two related props,

    rowsPerPage: Number of rows allowed per page
    rowsPerPageOptions: Options to provide in pagination for number of rows a user can select

    Usage sample as below:

    <MUIDataTable
  options={{
    rowsPerPage: 20,
    rowsPerPageOptions: [10, 15, 20],
    ...
  }}
  ...
/>