Ag-grid autoheight and fixed header

I am displaying a grid with domLayout: 'autoheight' and I need a fixed header on top. With the querySelector I select the header and add it a fixed position.

const agheader: HTMLElement = document.querySelector('.ag-header')!;
agheader!.style.position = 'fixed';
agheader!.style.top = '0';
agheader!.style.zIndex = '100';


The header is placed correctly on top.

When I scroll horizontally the header is aligned with the body. Now i only add a container to the ag grid width a padding of 2rem

<div style="padding: 2rem">
<div>
<ag-grid-angular
class="ag-theme-quartz"
style="height: 500px;"
[gridOptions]="gridOptions"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/>
</div>
</div>


I scroll horizontally again the table from the start the header and the body are not aligned but I have just added a padding. Full repro here https://stackblitz.com/edit/stackblitz-starters-cxeq2u?file=src/app/app.component.html

Continue reading...