Ag-grid sticky header

Question

So my ag-grid resize itself because my row height is also dynamic. So for height I am using [style.height.px]="beta" and this.beta = document.getElementsByClassName('ag-full-width-container')["0"].offsetHeight + 139 And the pagination is set to 100.

I cannot use autoHeight because I have more than 10k rows. So I want my header to be sticky. I have some content before ag-grid in DOM. As I scroll I want my ag-grid header to stick to the top. I am using top:0;position:sticky;z-index:1000 It's working for every div tag except ag-gird's div tag. So is there a way to have a sticky header in ag-grid?

Enclitic

Negative vote but now comment ? – Eviscerate

@Eviscerate What? – Enclitic

someone gave you a negative comment but he did not give a reason. – Eviscerate

Yeah, the question was beyond their level of understanding. – Enclitic

@Shlok Nangia Hey, i want to make a scrollable but horizonatally, for group header text, when i scroll right the text group it shows the next header group text is first. a kind of gradient, but not for color for header group text. – Oraorabel

@Racal are you looking for something called column pinning? – Enclitic

@NamanJain yes but for horizontal scroll, how could i do that ? In angular of course. – Oraorabel

@Racal I hope this is what you are looking for ag-grid.com/javascript-data-grid/column-pinning – Enclitic

@NamanJain something like, but for group ag-grid.com/javascript-data-grid/… – Oraorabel

Answer 1

On onGridViewChanged() function I implemented the following logic. So in this logic the HTML above ag-gird in DOM should be consider for top because ag-grid header top was 0 for me. And then add some value according to your requirement (calibration). Then for the row body add some margin (calibration).

    onGridViewChanged() {
        let header = $('.ag-header')
        let headerPos = $('.btn-row').position().top + 50
        $(window).on("scroll", function () {
            if ($(window).scrollTop() > headerPos) {
                header.css("position", "fixed").css("top", 0).css("z-index", "99");
                $('.ag-body-viewport.ag-layout-normal').css("margin-top", "88px");
            }
            else {
                header.css("position", "static");
                $('.ag-body-viewport.ag-layout-normal').css("margin-top", "0px");
            }
        });
    }

Enclitic

Answer 2

Solution using position: sticky

.make-ag-grid-header-sticky .ag-header {
    position: sticky;
    top: 0px;
    z-index: 5;
}

.make-ag-grid-header-sticky .ag-root-wrapper,
.make-ag-grid-header-sticky .ag-root-wrapper-body,
.make-ag-grid-header-sticky .ag-root {
    display: unset;
}

Each of parent element of .ag-header needs to be set to display: unset;.

This will enable .ag-header to implement position: sticky

To use the above CSS

Wrap your ag-grid element with an element that uses the class: .make-ag-grid-header-sticky

Good luck out there.

Doorkeeper

Answer 3

I would suggest eliminating the scrollbars that are outside of the grid, and make the grid fit within the window. You can use flexbox to do that. You need to make sure the parent elements are using display: flex and have 100% height. And then set the grid to be flex-grow: 1.

On the parent element(s):

height: 100%;
display: flex;
flex-direction: column;

On the grid:

flex-grow: 1;

https://stackblitz.com/edit/angular-ag-grid-full-height?embed=1&file=src/app/app.component.html

Joy

The content above the grid is very big so I can't eliminate the mainpage scrollbar. – Enclitic

@Naman I understand your situation now. And I'm guessing you don't want to have a hardcoded height on the grid, because then there will be multiple scrollbars on the page? If that is the case then sorry but I don't know of a good solution. – Joy

Yeah. Grid's height is dynamic. I just want to know why position:sticky;top:0;z-index:9999 is not working – Enclitic

Answer 4

I tried so many things but this worked for me. Here .grid-table is my custom class. Also this solution will not work if you have externally given overflow to the class.

::ng-deep .grid-table .ag-body-viewport {        
        overflow: auto;               
    }

Sophocles