[tree view] Add Sticky Headers to Rich Tree View

[SamuelTrew]

Summary

Depending on the position of the top-most item in the viewport, there should be sticky headers dynamically generated providing a nested sticky-ness. These headers would be the ancestors in the tree.

MUI Tables already have this implemented but it's fairly primitive in keeping only one row permanently at the top: https://mui.com/material-ui/react-table/#sticky-header

Whereas this would be dynamic, depending on which item is the top in the viewport.

This is currently possible with some CSS but due to MUI's default opacity styling, it causes visual bugs where the items overlay each other, requiring some maths and blurring to make it work to an okay level.

I would imagine this work as a top-level boolean prop for toggling this behaviour with the default being false.

Examples

Something like how VS-Code does it with code blocks: https://learn.microsoft.com/en-us/visualstudio/ide/editor-sticky-scroll?view=vs-2022

Motivation

For Tree Views, sticky headers can provide a massive UX benefit for keeping the appropriate headers in view for the items you currently have in the tree viewport.

This allows users to know the location of the item they might be selecting, which can be especially important if there are duplicates between different branches of the tree.

Search keywords: sticky headers

[michelengelen]

Hey @SamuelTrew ... this is actually fairly easy to achieve with pure CSS:

const StyledRichTreeView = styled(RichTreeView)`
  /* Make expanded items sticky with top value based on level */
  .${treeItemClasses.content}[data-expanded] {
    position: sticky;
    z-index: calc(100 - var(--TreeView-itemDepth));
    top: calc(var(--TreeView-itemDepth) * 32px);
  }

  .${treeItemClasses.content} {
    background-color: #f5f5f5; /* Light background for better visibility */

    &[data-selected] {
      background-color: #c7ceff; /* Light background for better visibility */
    }
  }
`;

The trick here is the usage of the --TreeView-itemDepth variable which can be used to calculate values for the items.

Does this help your use case?

@noraleonte should we add a small example to the docs for this?

[SamuelTrew]

Hey @michelengelen,

Thank you for the response. Awesome to know about --TreeView-itemDepth! And thank you very much for the example; I think it would be super useful to have in the docs.

The only issue is that it involves changing the background colour in a way that is not dependent on the MUI theme being used. To get it to work we had to do some colour blending of the extraged rgb values to convert something that has alpha to something that doesn't.

This was the main reason for suggesting it to be more integrated into the logic of the tree itself.

Thank you.

[noraleonte]

@michelengelen We definitely should add it to the docs! 🙏