Add maxResults prop to APagination component

[nicholaspsmith]

Is your feature request related to a problem? Please describe. Our table rows are very large and for certain tables, trying to render more than 2-300 rows will cause browser memory usage to spike, leading to degraded performance. We want to be able to set a maximum value so that a user will not try to render a very large (600+) number of rows and cause the browser to crash due to running out of memory.

I have already spoken with @brennarvo about this issue. If more context is needed, please reach out to me on Webex.

Describe the solution you'd like I would like to have a prop that allows me to set a maximum number of results per page. Something like this

<APagination
...
maxResults={50}
/>

Describe alternatives you've considered We are currently having to set a maximum value for resultsPerPage manually using a callback. This causes an issue where the text field does not update to show the correct value after a user tries to enter a value higher than the maximum. (e.g. if my maximum is 50 results per page, and the user tries to show 55 results per page, the table will show the correct number of rows, but the text field will still show [ 55 ] per page despite there being a max of 50.)

We are currently implementing this using the callback function for onResultsPerPageChange, but we are unable to change the value displayed in the textfield itself.

Additional context In the following video you can see the user initially set the table to 55, which we correct to show the max number of rows, which in this case we have set at 50. Once the table is showing 50 rows, the user then tries to enter a number higher than the maximum again (they try to show 55). But since the APagination component is not receiving a new property value, there is no re-render triggered. This causes the textbox to show the incorrect value (once the user hits "enter" or clicks outside the box it should change the value back to 50). The only way I could get it to re-render would be to set it as a different number, other than 50, and then set it to 50 again using a setTimeout. This is not ideal.

https://user-images.githubusercontent.com/4481189/160462232-1221b7a9-4630-4754-bfdc-80426cbb896c.mp4

[nicholaspsmith]

Tip: don't hover your mouse above the video. Most of what I am showing is at the very bottom of the video and is covered by the video controls if your mouse is hovering over the video.