AG Grid: How to stick the scrolling at bottom

Question

i'm using AG Grid Angular to create a log view, i will add a lot of entries per second to the grid, typically this type of view's has the newest entry at the bottom, so it would be great if there is a good way where the scrolling will stick at the bottom, so i can always see the latest entry. A bonus would be, if i can manually scroll up and the scrolling will stay at this position.

Answer 1

Here's one way to do it:

handle rowDataChanged in your markup:

<ag-grid-angular
  class="ag-dark"
  [rowData]="messages"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
  (bodyScroll)="handleScroll($event)"
  (rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>

In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:

  gridOptions: GridOptions = {
    suppressScrollOnNewData: true,
  }
  handleRowDataChanged(event) {
    const index = this.messages.length - 1;
    this.gridOptions.api.ensureIndexVisible(index, 'bottom');
  }

Demo: https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom

In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.