Combining sticky header/row functionality with child/detail rows functionality

Combining sticky header/row functionality with child/detail rows functionality

jonfreedjonfreed Posts: 5Questions: 2Answers: 0

Fixed/sticky header or row functionality is great.
Child/detail rows functionality is great.

But how about the following? Got any code for this?

  1. Outer table with a sticky header row. (Sticky = stays in view at the top of the relevant container.)
  2. Outer table also has a parent row that is sticky when user is scrolling through its child/detail row's contents. The sticky parent data row should not obscure the stick parent header row.
  3. If the child/detail row itself contains a table, its header could be similarly sticky.

So, in the end, the stickiness could continue ad infinitum through parent tables and child/detail rows containing child tables.

Presumably, this would be possible through a fixed-position block at the top of the browser window, and sticky items would need to be pushed on and popped off that block as appropriate while the user scrolls.

I just tried the Fixed-Headers extension with the Child-Row functionality and it did not go so well. The desired functionality does not appear possible out-of-the-box. Of the three rows that I want to be sticky, there isn't any option to make the outer table's parent row sticky, and the inner table's header row is getting displayed in weird places after I altered its z-index.

This seems like a generic and obvious use case, so it would be great functionality to have.

This discussion has been closed.