Ag-grid липкий заголовок

Question

Таким образом, моя ag-grid изменяет свой размер, потому что моя высота строки также является динамической c. Поэтому для высоты я использую [style.height.px]="beta" и this.beta = document.getElementsByClassName('ag-full-width-container')["0"].offsetHeight + 139, а для pagination установлено значение 100.

. Я не могу использовать autoHeight, потому что у меня более 10k строк. Поэтому я хочу, чтобы мой заголовок был липким. У меня есть контент перед ag-grid в DOM. Когда я прокручиваю, я хочу, чтобы мой заголовок ag-grid придерживался вершины. Я использую top:0;position:sticky;z-index:1000 Он работает для каждого тега div, кроме тега ag-gird * div. Так есть ли способ создать липкий заголовок в ag-grid?

Answer 1

В функции onGridViewChanged() Я реализовал следующую логику c. Таким образом, в этой логике c HTML выше ag-gird в DOM следует учитывать для top, потому что заголовок ag-grid top был 0 для меня. А затем добавьте некоторое значение в соответствии с вашими требованиями (калибровка). Затем для тела строки добавьте немного margin (калибровка).

    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");
            }
        });
    }

Answer 2

Я бы предложил исключить полосы прокрутки, которые находятся за пределами сетки, и сделать сетку вписывающейся в окно. Вы можете использовать flexbox для этого. Вы должны убедиться, что родительские элементы используют display: flex и имеют высоту 100%. А затем установите сетку на flex-grow: 1.

На родительском элементе (ах):

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

На сетке:

flex-grow: 1;

https://stackblitz.com/edit/angular-ag-grid-full-height?embed=1&file=src / приложение / app.component. html