具有固定标题和列以及选择性固定行的可滚动表

Question

I need a table as shown in the image.

The requirements are:

• the header row (very first blurred row) is fixed when we start scrolling down the table
• the first column is fixed when we start horizontal scrolling
• additionally, as we scroll down, the colspanned rows in black color (I'll call it the row-group heading row ) - "Title 1" and "Title 2" - will become fixed, below the header row, when all rows that belong to its group are in view. And when we scroll further down, and when the next group of rows come into view, the previous row-group heading row will go away and in its place (right below the fixed main header row) the row-group heading row that corresponds to the rows in current view will be fixed.

We're building a react app. We checked out: react-sticky-table , and other non-react libraries like: Stickytable and Sticky-kit .

None of them seem to be doing what we want.

Is there a JS (react or non-react and preferably non-jquery) library that does this?

If not, assuming that we get the first-row header and the first column fixed using any of the above mentioned libraries, is there a way to make the row-group heading row s fixed/static based on scrolling?

I also prefer the table be built using <table> group of elems, and not just divs. But it's not a strict requirement.

UPDATE: Just found this plugin that seems to be doing this: http://maslianok.github.io/stickyRows/multiplerows.html . It's great, but keeping this question open for pureJS or react solution.

Answer 1

I have worked on the same UI but it was the mixture of pure javascript and jQuery, however less concerned about the front end library, as most of them fail at certain point of requirement or amount of data. I suggest go with your own solution I did the same it is acceptable to clients since 5 years. 1. Create a separate tables for your header and content. 2. Give each cloumn exactly same column span width. Eg , <colspan width="50px"> 3. Place a separate table with one column in LHS. 4. Write a code in javascript which scrolls your LHS table along with your main table.

Apologies as it is hard to give working example.