Сделать заголовки столбцов ag-Grid "липкими" под заголовком страницы Ionic-3?

Question

Я пробую ag-Grid и пытаюсь поместить простую сетку на страницу. Я не могу понять, как закрепить заголовки столбцов в верхней части страницы, когда происходит прокрутка (по умолчанию, ion-content прокручивает все).

Пытался

а) Я пытался обернуть сетку в

<div ion-fixed>

но это приводит к сетке, которая не может быть прокручена вообще (вверх / вниз или влево / вправо).

б) Моя последняя попытка - получить прямой доступ к DOM и установить атрибут стиля 'top' напрямую в зависимости от количества окон scrollTop.

Это работает, но страдает низкой производительностью на iOS. Я думаю, что Android будет еще хуже. Если есть более элегантный и / или производительный способ сделать это, я бы с удовольствием его изучил.

1. Я добавил обработчик события ionScroll и перенаправил события прокрутки в соответствующий компонент (не удалось запустить обработчики прокрутки HostListener).
2. Затем...

,

ngAfterViewInit() {
    this.agHeader = document.querySelector('.ag-header');
    console.log(`Our header is: ${this.agHeader}`);
}

windowScrolled(event) {
    if (this.agHeader) {
        this.agHeader.style.top = `${event.scrollTop - 1}px`;
        this.agHeader.style.position = 'absolute';
    }
}

Просто установите позицию непосредственно на элемент контейнера "ag-header". Кажется, работает, но не знаю, будет ли он падать с разных устройств. Время проверить!

Код

https://github.com/scornflake/agGridIonic3Test.git

Я предполагаю, что это что-то "простое" сделать с помощью CSS? Или, может быть, пользовательский компонент заголовка?