具有固定標題和列以及選擇性固定行的可滾動表格

Question

我需要如圖所示的表格。

的要求是：當我們開始向下滾動表

第一列是固定的，當我們開始水平滾動

• 標題行（非常第一模糊行）被固定
• 此外，當我們向下滾動時，黑色（我稱之爲row-group heading row） - 「標題1」和「標題2」 - 將變爲固定，在標題行下方， t屬於它的羣體。當我們向下滾動，當下一組行進入視圖時，前面的row-group heading row將消失，並且在它的位置（在固定主標題行的正下方），對應於當前視圖中的行的row-group heading row將被固定。

我們正在構建一個反應應用程序。我們檢出了：react-sticky-table，以及其他非反應性庫，如：Stickytable和Sticky-kit。

他們似乎沒有做我們想做的事。

有沒有一個JS（反應或不反應，最好是非jquery）庫這樣做？

如果不是，假設我們得到的第一行頭和第一列使用上面提到的庫中的任何一個固定，有沒有辦法使row-group heading rows固定/靜態基於滾動？

我也更喜歡使用<table>組件來構建表格，而不僅僅是div。但這不是一個嚴格的要求。

更新：剛剛發現這個插件，似乎是這樣做的：http://maslianok.github.io/stickyRows/multiplerows.html。這很好，但是爲pureJS或反應解決方案保留這個問題。

Answer 1

我已經在同一個用戶界面上工作過，但它是純JavaScript和jQuery的混合體，但不太關心前端庫，因爲它們中的大多數在某些要求或數據量的某個點失敗。 我建議去你自己的解決方案，我做了同樣的事情，自5年以來它是客戶可以接受的。 1.爲您的標題和內容創建單獨的表格。 2.給每個色塊完全相同的色譜柱寬度。例如。 ，<colspan width="50px"> 3.在LHS中放置一列單欄。 4.在javascript中編寫代碼，將您的LHS表與您的主表一起滾動。

道歉，因爲它很難給工作的例子。