[Data Grid] Fix logic when pageSize larger than number of rows

[curq]

Description

There is a bug with DataGrid component, when there is less number of rows with data than number of rows per page, the DataGrid component is rendered with height equal to number of rows per page, instead of number of actual rows. This results in an empty unused space.

For example, when there is 99 rows but the number of rows is 120, the table is rendered with height that fits 120 rows, and not 99. Screenshot:

The issue is even more evident when we make number of rows per page even larger (e.g. 1000 per page). I explained more in the issue #699 where I provided a sandbox.

After fix:

You might notice that the rows per page is 99 in the screenshot (actual number of rows), but the options show 120 ( they usually are provided by the developer), so I'm not sure if this okay.

Issues Resolved

Fixes #699

Check List

• New functionality includes testing.
• New functionality has been documented.
• All tests pass
  • yarn lint
  • yarn test-unit
• Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

For more information on following Developer Certificate of Origin and signing off your commits, please check here.

[ashwin-pc]

@curq I dont think you should limit the options in datagrid to fix this issue, but rather treat the row limit more like max-height like property, where if the content exceeds the size, we show only the number of rows that we limit to, but if the rows are lesser, we adjust the height to the height of the existing rows.

Look at the behavior of the list here and how this behaves as an example: https://playground.opensearch.org/app/management/opensearch-dashboards/objects

[curq]

@ashwin-pc Thank for the feedback, I have changed my fix, so that row limit behave like max-height. Now after the fix the component looks like this:

[ashwin-pc]

Nice and elegant fix. Pulled this down and works as expected. I did notice that when you have say 51 rows and you select see 50 rows at a time, switching to the next page keeps the row height still at 50 even though there is just a single row. But Im pretty sure that we want it that way since I prefer avoiding a layout repaint given that the primary goal of the DataGrid is to improve rendering large volumes of data, and a layout repaint can be slow and expensive for such re-renders.