Bidirectional Scrollable Table with Fixed Header — Part 1

後來,我又繼續在做公司內部給非 RD Team 的同事們使用的工具網站了。

工具網站總會需要許多表格,而我目前遇過最麻煩的表格之一,就是要能同時擁有 horizontal scroll + vertical scroll + fixed header 的表格了。

當然有很多 library 可以直接使用,例如 Facebook 的 FixedDataTable 就是,不過在使用這種別人的極致工藝之前,還是會想用最簡單的方法自己實做一次試試。

// Bidirectional Scrollable Table with Fixed Header (with React)
//
componentDidMount() {
this._tableBodyWrapper.addEventListener('scroll', e => {
this._tableHeaderWrapper.scrollLeft = e.target.scrollLeft;
})
this._tableHeaderWrapper.addEventListener('scroll', e => {
this._tableBodyWrapper.scrollLeft = e.target.scrollLeft;
})
}
//
<div>
<div className={cx('table-wrapper')}>
<div className={cx('table-header-wraper')}>
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
</table>
</div>
<div className={cx('table-body-wrap')}>
<table>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</div>
</div>
</div>

大致上的做法是把 table 的 header 和 body 分成兩個 table 分別實作 overflow,再組合起來,然後用 javascript 把兩者的 scroll event 綁起來做到 horizontal scroll 的同步(css styling 的細節下次說)。

概念上是這樣啦,可惜試了幾天後還是有個問題無法搞定。

利用 scroll event + scrollLeft 的同步總是怪怪的…

像下面這樣

沒錯,會 Lag…

阿,這就是卡住的點囉,希望 Part 2 的時候可以解決才好。

Like what you read? Give yes a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.