I can only help with the first part of your question - why 9 row limit.

I experienced the same problem - 1 header row and 9 data rows.

The default style was 35px per row, therefore 350px total height.

The default css styling sets block-size: 350px which limits you to 10 visible rows.

In the example: https://adazzle.github.io/react-data-grid/#/CommonFeatures you can see that the className "fill-grid" has a css rule: block-size: 100%.

Setting the className prop on DataTable to "fill-grid" and creating a css rule for the "fill-grid" class allowed me to see all rows in the table.