Re-Size Ag-Grid to fit the number of rows

Question

I am using Ag-Grid in an angular 8 application. I am trying to get the grid to re-size based on the number of rows but also want to restrict the number of rows in the grid to 10 and then use pagination to display the next page.

To restrict the number of rows in the grid to 10 I am using gridHeight = '400px' which works fine for the pages which have 10 rows. But lets say I have 33 rows of data and I display 10 rows each on the first 3 pages and the remaining 3 rows on the last page, the last page still have a gridHeight of 400px. Is there a way to make this dynamic so that the grid re-sizes for the 3 rows.

I know we can use domLayout='autoHeight' but that does not work with gridHeight. Any suggestions?

Answer 1

instead of using gridHeight = '400px' to restrict the number of rows in the grid to 10 you should use paginationPageSize property and set it to 10.

And like you mentioned while defining your grid options define domLayout property to 'autoHeight'. this will auto adjust grid height whenever there are lesser number of records in the grid.

here is some code snippet to help you out.

  var gridOptions - {
  defaultColdDef : {
  ...
  ...
  },
  --bunch of properties goes here 
  ...
  pagination : true,
  //use pagination page size property to set height instead of using height style.
  paginationPageSize : 10,
  domLayout : 'autoHeight'
  ...
  ...
  }

and here is a working demo