凡是參與大型項目開發，或者是企業級的系統，經常會遇到數據複雜，數據量大的問題。通常需要前端呈現大量的數據，而我們通常都會使用table去呈現。一目瞭然。可能很多人會問，現在的組件庫不是很成熟了嗎，各種各樣的組件都有，功能強大且性能優越，如(element UI，anti design）。

但不是自己的，永遠不是最適合自己的，就像你開着別人的法拉利，但是感覺卻不如自己的麪包車。

言歸正傳，其實是本人公司使用的組件庫是公司內部自行研發的庫，不使用網上流行的，這個什麼原因我也不懂，我也不敢問。就有一個問題了，公司的table組件沒有固定頭和列的功能呀，怎麼辦，自己寫一個唄。

紅色部分通常需要固定，資料多的時候，會比較方便。

point

css positon屬性sticky，
RXJS

Now

1. design你的table。

在實現table的功能和呈現方式時，記得要注意，把head和body兩部分分別用一個table來contain，即需要兩個table。

<div class="table-responsive">
        <div #tableHeaderElement class="table-head-container">
            <table class="table">
                <thead>
                </thead>
            </table>
        </div>
        <div #tableBodyElement class="table-body-container">
            <table class="table">
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

1. 添加CSS屬性（固定列）。

很簡單隻需要給需要固定的列（即td）加上

.table-fix {
    position: sticky;
    z-index: 1;
    left:0;
}

sticky粘性定位，
left設置你需要fix的列在table中的哪個位置。

3.Rxjs監控scoll事件（使head與body的scoll位置一致）

ngAfterViewInit() {
        this.ngZone.runOutsideAngular(() => {
            Observable.merge<MouseEvent>(
                this.tableHeaderNativeElement ? Observable.fromEvent<MouseEvent>(this.tableHeaderNativeElement, 'scroll') : Observable.empty(),
                this.tableBodyNativeElement ? Observable.fromEvent<MouseEvent>(this.tableBodyNativeElement, 'scroll') : Observable.empty()
            )
                .takeUntil(this.destroy$)
                .subscribe((data: MouseEvent) => {
                    this.syncScrollTable(data);
                });
        });
    }

syncScrollTable方法設置head和body的scrollLeft一致就OK了。
使用ngZone.runOutSideAngular方法是為了scoll事件脱離angular的變動檢測機制(scoll事件的非常頻繁，每一次scroll觸發一次angular變更機制，必然對性能消耗巨大)。

好了現在可以試試，看看能不能跟excel一樣，固定表頭和列。