Add a display rows per page dropdown or textbox with pagination

Is your feature request related to a problem? Please describe. It would be nice to add a dropdown to select how many rows user wants to show per page like this

Describe the solution you’d like I think the prop recordPerPage should show the dropdown so that both dropdown and page info can be sync

Describe alternatives you’ve considered An alternative can be to add a withLimitDropdown prop to table which if it is true it should show the limit dropdown and get the value from recordsPerPage state

<DataTable
  recordsPerPage="10"
  withLimitDropdown
/>

[icflorescu]

This should work in v1.7.13 🎉

[Muhammad-Arsalan31]

Hi, I have worked on the feature and named the props as you mentioned above. but data types are different for onRecordsPerPageChange and recordsPerPageOptions they are

onRecordsPerPageChange: ((value: string | null) => void) | undefined; recordsPerPageOptions: string[];

the reason for this is that the select component takes values as a string array

   <Select
      onChange={onPerPageOptionChange}
      value={`${recordsPerPage}`}
      size={paginationSize}
      data={recordsPerPageOptions as (string | SelectItem)[]}
      sx={{ width: '80px' }}
   />

also, I am getting a typescript error if I don’t pass these props to DataTable component. I have made them optional but I don’t know why this error is occurring can you help me with this

Type '{ withBorder: true; records: { id: string; firstName: string; lastName: string; email: string; birthDate: string;
 departmentId: string; }[]; columns: ({ accessor: string; width: number; } | { accessor: string; width: string; } | 
{ ...; })[]; ... 4 more ...; paginationColor: "ffaa11"; }' is not assignable to type 'IntrinsicAttributes & 
DataTableProps<{ id: string; firstName: string; lastName: string; email: string; birthDate: string; 
departmentId: string; }>'.
Translation: I was expecting a type matching A, but instead you passed B.

theses are some issues I am facing if I can fix these issues then I can submit the PR

also, the Ui is like this