ag-grid: is it possible to have fixed headers when using domLayout='autoHeight'?

Question

ag-grid has a setting that lets you disable the default iframe-like behaviour (the grid having its own scrollbars) and instead just display the entire height of grid in the main page content. You can then use the main page vertical scrollbar to look down the grid.

Documented here... https://www.ag-grid.com/javascript-grid-width-and-height/#autoHeight

When using this autoHeight feature, the headers at the top of each column no longer stick to the top when you scroll down.

Is it possible to still have the headers stick to the top of the screen when the user scrolls down when using autoHeight?

Answer 1

I solved this problem using ngStyle and window.innerHeight:

HTML:

<div style="padding:10px 10px 0px 10px;  ">

  <div style="font-size: x-large; font-weight: bold; 
      border: 2px solid black;border-radius: 5px;
      padding: 10px 10px 10px 10px; margin-bottom: 15px;
      ">
    ag-grid domLayout autoheight work-around for scrolling 
  <div>

  <!-- there is no scroll bar when using domLayout autoHeight  -->  
  <!-- 
    <ag-grid-angular  style="width: 100%;" 
      domLayout='autoHeight' 
      class="ag-theme-balham" 
      [rowData]="rowData"
      [columnDefs]="columnDefs">
    </ag-grid-angular>
    -->  

    <!-- but you can use ngStyle and window.innerHeight instead  -->
    <ag-grid-angular  style="width: 100%;" 
                      [ngStyle]=gridStyle
                      class="ag-theme-balham" 
                      [rowData]="rowData"
                      [columnDefs]="columnDefs">
    </ag-grid-angular>

  </div>
</div>

Angular:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'ag-grid domLayout autoheight work-around for scrolling ';

    columnDefs = [
        {headerName: 'Row', field: 'row' } 
    ];
    rowData: any[] = [];
    gridStyle:any; 

    ngOnInit() {

        // set the height dynamically to the current window height
        let windowHeight:string = window.innerHeight + 'px'; 


        this.gridStyle = {'height': windowHeight}; 
        for (let row = 1; row <= 100; row++) {
            this.rowData.push({'row': 'Row: ' + row });
        }
    }
}

Answer 2

Using the below css, we can have the header fixed and have the browser scrolling in ag grid.

CSS

.ag-theme-alpine .ag-header {
    top: 0;
    position: fixed;
    width: auto;
    display: table;
    z-index: 99;
}
.ag-theme-alpine .ag-root-wrapper {
     border: none!important; 
}

Refer the code attached: Plunker