Combining sticky header/row functionality with child/detail rows functionality
Combining sticky header/row functionality with child/detail rows functionality
Fixed/sticky header or row functionality is great.
Child/detail rows functionality is great.
But how about the following? Got any code for this?
- Outer table with a sticky header row. (Sticky = stays in view at the top of the relevant container.)
- 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.
- 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.