Как совместить cdkVirtualScroll с cdkTable?

Поскольку я не смог найти реально работающее решение, я написал свой собственный «быстрый и грязный» код для фиксированного заголовка. Тем не менее, я надеюсь найти гораздо лучший способ в будущем. Возможно, следующий выпуск Cdk предложит решение.

Что я сделал сейчас, так это написал (более или менее хакерскую) директиву, которая клонирует таблицу изнутри cdk-virtual-scroll-viewport и размещает клонированный узел раньше. На следующем шаге visibility элемента table thead устанавливается на collapse.

Использование:

<cdk-virtual-scroll-viewport [itemSize] = "30" cloneThead>
    <table class = "table table-hover">
        <thead>
            ...
        </thead>
        <tbody>
            <tr *cdkVirtualFor = "let item of list">
                <td>...</td>
                ...
            </tr>
        </tbody>
    </table>
</cdk-virtual-scroll-viewport>

Директива cloneThead довольно проста:

import { Directive, AfterViewInit, ElementRef } from '@angular/core';

@Directive({
    selector: '[cloneThead]'
})

export class CloneDirective implements AfterViewInit{

    constructor(private el: ElementRef) {}

    ngAfterViewInit(){
        let cloned = this.el.nativeElement.cloneNode(true);

        let table = cloned.querySelector("table");
            table.style.position = 'sticky';
            table.style.top = '0';
            table.style.zIndex = '100';

        this.el.nativeElement.appendChild(table);
    }
}

Это работает очень хорошо, но все еще имеет одну большую проблему: клон создается после ngAfterViewInit, что приводит к тому, что строки таблицы cdkVirtualFor еще не созданы в DOM.

Это хорошо для самого клона, потому что он еще не содержит tr элементов tbody, НО вычисленные стили CSS для правильной ширины для th элементов также неизвестны.

Поэтому все элементы th должны иметь атрибут ширины CSS. В противном случае th ширина и td ширина могут отличаться - что выглядит некрасиво...

Может быть, у кого-то есть решение сделать «настоящий» клон после того, как cdk-virtual-scroll-viewport-таблица будет нарисована.

Вот обновленное решение

большая проблема предыдущего кода заключалась в том, что он не мог динамически вычислять ширину столбцов. Поэтому было необходимо указать with для каждого столбца.

Эта версия исправляет эту проблему.

@Directive({
  selector: '[cdkFixedHeader]'
})

export class FixedHeaderDirective implements AfterViewInit{

    constructor(private el: ElementRef, private renderer:Renderer2) {}

    ngAfterViewInit(){

        // get the viewport element
        let cdkViewport = this.el.nativeElement.closest("cdk-virtual-scroll-viewport");

        // check if table was already cloned
        let clonedHeader = cdkViewport.querySelectorAll('.cloned-header');

        // create a clone if not exists
        if (clonedHeader.length == 0)
        {
            let table = this.el.nativeElement.closest('table');
            let cloned = table.cloneNode(true);
                cloned.style.position = 'sticky';
                cloned.style.top = '0';
                cloned.style.zIndex = '100';

            // remove tbody with elements
            let tbody = cloned.querySelector('tbody');
            cloned.removeChild(tbody);

            // add a "helper" class
            this.renderer.addClass(cloned, "cloned-header");

            // append cloned object to viewport
            cdkViewport.appendChild(cloned);
        }       
        // 
        //  walk through all <tr> with their <td> and store the max value in an array
        //
        let width = [];
        let td = this.el.nativeElement.querySelectorAll("td");
        width = new Array(td.length).fill(0);

        td.forEach((item,index) => {
            const w = item.getBoundingClientRect().width;
            width[index] = Math.max(w, width[index]);
        })  
        // 
        //  get <th> elements and apply the max-width values
        //
        let th = cdkViewport.querySelectorAll('.cloned-header th');
        th.forEach((item,index) => {
            this.renderer.setStyle(item, "min-width", width[index] + 'px')
        })
    }
}

Использование:

Использование было немного изменено, потому что это было необходимо для вызова директивы при обработке *cdkVirtualFor.

<tr *cdkVirtualFor = "let item of list" cdkFixedHeader>
    ...
</tr>

Вот и все! Не очень красиво, но работает...