feat: implement sticky headers in Tree component

Author: alfredxio

src/Tree.js

@@ -6,6 +6,15 @@ import {FlattenedNode} from './shapes/nodeShapes';
 import TreeState, {State} from './state/TreeState';
 
 export default class Tree extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      stickyHeaders: [], // To track all visible group headers
+      topStickyHeader: null, // The header that should be sticky
+    };
+    this._listRef = React.createRef();
+  }
+
   _cache = new CellMeasurerCache({
     fixedWidth: true,
     minHeight: 20,
@@ -35,8 +44,101 @@ export default class Tree extends React.Component {
       : nodes[index];
   };
 
+  // Determine if a node is a group header
+  isGroupHeader = node => {
+    // Group headers are typically parent nodes with children
+    // and deepness of 0 (root level)
+    return node.children && node.children.length > 0 && node.deepness === 0;
+  };
+
+  componentDidMount() {
+    // Initial check for headers after mounting
+    if (this._listRef.current) {
+      const list = this._listRef.current;
+      const grid = list && list.Grid;
+      if (grid) {
+        this.handleScroll({
+          scrollTop: grid.state.scrollTop,
+          scrollHeight: grid.state.scrollHeight,
+          clientHeight: grid.props.height,
+        });
+      }
+    }
+  }
+
+  // Get all headers in the current data
+  getAllHeaders = () => {
+    const rowCount = this.getRowCount();
+    const headers = [];
+
+    for (let i = 0; i < rowCount; i++) {
+      const node = this.getNode(i);
+      if (this.isGroupHeader(node)) {
+        // Calculate the position by summing heights of all rows before this one
+        let top = 0;
+        for (let j = 0; j < i; j++) {
+          top += this._cache.rowHeight({index: j});
+        }
+
+        headers.push({
+          node,
+          index: i,
+          top,
+        });
+      }
+    }
+
+    return headers;
+  };
+
+  // Handle scroll events to update sticky headers
+  handleScroll = ({scrollTop, scrollHeight, clientHeight}) => {
+    if (!this._listRef.current) return;
+
+    // Get all headers in the tree
+    const allHeaders = this.getAllHeaders();
+
+    // Find headers that should be visible based on scroll position
+    const visibleHeaders = allHeaders.filter(header => {
+      // Calculate the bottom position of this header row
+      const headerHeight = this._cache.rowHeight({index: header.index});
+      const headerBottom = header.top + headerHeight;
+
+      // Header is visible if:
+      // 1. Its top is between scrollTop and scrollTop + clientHeight, OR
+      // 2. Its bottom is between scrollTop and scrollTop + clientHeight, OR
+      // 3. It starts before scrollTop and ends after scrollTop + clientHeight
+      return (
+        (header.top >= scrollTop && header.top <= scrollTop + clientHeight) ||
+        (headerBottom >= scrollTop && headerBottom <= scrollTop + clientHeight) ||
+        (header.top <= scrollTop && headerBottom >= scrollTop + clientHeight)
+      );
+    });
+
+    // Find the header that should be sticky
+    // It's the last header whose top position is less than or equal to scrollTop
+    const headersBeforeViewport = allHeaders.filter(h => h.top <= scrollTop);
+    const topStickyHeader =
+      headersBeforeViewport.length > 0 ? headersBeforeViewport[headersBeforeViewport.length - 1] : null;
+
+    // Only update state if something has changed
+    const currentStickyId = this.state.topStickyHeader && this.state.topStickyHeader.node && this.state.topStickyHeader.node.id;
+    const newStickyId = topStickyHeader && topStickyHeader.node && topStickyHeader.node.id;
+
+    if (currentStickyId !== newStickyId || this.state.stickyHeaders.length !== visibleHeaders.length) {
+      this.setState({
+        stickyHeaders: visibleHeaders,
+        topStickyHeader,
+      });
+    }
+  };
+
   rowRenderer = ({node, key, measure, style, NodeRenderer, index}) => {
     const {nodeMarginLeft} = this.props;
+    const isHeader = this.isGroupHeader(node);
+
+    // Add a class to identify group headers
+    const className = isHeader ? 'tree-group-header' : '';
 
     return (
       <NodeRenderer
@@ -47,14 +149,49 @@ export default class Tree extends React.Component {
           userSelect: 'none',
           cursor: 'pointer',
         }}
+        className={className}
         node={node}
         onChange={this.props.onChange}
         measure={measure}
         index={index}
+        isGroupHeader={isHeader}
       />
     );
   };
 
+  // Render the sticky header
+  renderStickyHeader = () => {
+    const {topStickyHeader} = this.state;
+    if (!topStickyHeader) return null;
+
+    const {NodeRenderer, nodeMarginLeft} = this.props;
+    // Always use the current node from the tree to ensure we have the latest state
+    const index = topStickyHeader.index;
+    const currentNode = this.getNode(index);
+
+    return (
+      <div className="tree-sticky-header">
+        <NodeRenderer
+          key={`sticky-header-${currentNode.id}`}
+          style={{
+            marginLeft: currentNode.deepness * nodeMarginLeft,
+            userSelect: 'none',
+            cursor: 'pointer',
+            width: '100%',
+            background: '#fff', // Background to ensure visibility
+            zIndex: 10,
+          }}
+          className="tree-group-header tree-sticky"
+          node={currentNode}
+          onChange={this.props.onChange}
+          index={index}
+          isGroupHeader={true}
+          isSticky={true}
+        />
+      </div>
+    );
+  };
+
   measureRowRenderer = nodes => ({key, index, style, parent}) => {
     const {NodeRenderer} = this.props;
     const node = this.getNode(index);
@@ -66,25 +203,64 @@ export default class Tree extends React.Component {
     );
   };
 
+  componentDidUpdate(prevProps) {
+    // If nodes change, reset the cache
+    if (prevProps.nodes !== this.props.nodes) {
+      this._cache.clearAll();
+      if (this._listRef.current) {
+        this._listRef.current.recomputeRowHeights();
+      }
+      
+      // Force rerender of sticky header when nodes change
+      this.forceUpdate();
+    }
+  }
+
   render() {
     const {nodes, width, scrollToIndex, scrollToAlignment} = this.props;
+    const {topStickyHeader} = this.state;
+
+    // Calculate the height of the sticky header to properly offset the list
+    const stickyHeaderHeight = topStickyHeader ? this._cache.rowHeight({index: topStickyHeader.index}) : 0;
 
     return (
-      <AutoSizer disableWidth={Boolean(width)}>
-        {({height, width: autoWidth}) => (
-          <List
-            deferredMeasurementCache={this._cache}
-            ref={r => (this._list = r)}
-            height={height}
-            rowCount={this.getRowCount()}
-            rowHeight={this._cache.rowHeight}
-            rowRenderer={this.measureRowRenderer(nodes)}
-            width={width || autoWidth}
-            scrollToIndex={scrollToIndex}
-            scrollToAlignment={scrollToAlignment}
-          />
+      <div className="tree-container" style={{position: 'relative', height: '100%'}}>
+        {/* Sticky header container */}
+        {topStickyHeader && (
+          <div
+            className="tree-sticky-header-container"
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              zIndex: 100,
+              height: `${stickyHeaderHeight}px`,
+            }}
+          >
+            {this.renderStickyHeader()}
+          </div>
         )}
-      </AutoSizer>
+
+        <AutoSizer disableWidth={Boolean(width)}>
+          {({height, width: autoWidth}) => (
+            <List
+              deferredMeasurementCache={this._cache}
+              ref={this._listRef}
+              height={height}
+              rowCount={this.getRowCount()}
+              rowHeight={this._cache.rowHeight}
+              rowRenderer={this.measureRowRenderer(nodes)}
+              width={width || autoWidth}
+              scrollToIndex={scrollToIndex}
+              scrollToAlignment={scrollToAlignment}
+              onScroll={this.handleScroll}
+              // Important: adds overscan to ensure we load enough rows to find headers
+              overscanRowCount={20}
+            />
+          )}
+        </AutoSizer>
+      </div>
     );
   }
 }

src/main.css

@@ -59,3 +59,34 @@
   font-weight: 700;
   padding: 0.7em 1em;
 }
+
+/* Sticky header styles */
+.tree-container {
+  position: relative;
+}
+
+.tree-sticky-header-container {
+  background: #fff;
+  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
+  transition: box-shadow 0.2s ease;
+}
+
+.tree-group-header {
+  font-weight: bold;
+}
+
+.tree-group-header.tree-sticky {
+  background: #f8f9fa;
+  padding: 8px 0;
+}
+
+/* Add a slight visual indication when a header becomes sticky */
+.tree-sticky-header .tree-group-header {
+  background-color: #f8f9fa;
+  transition: background-color 0.3s ease;
+}
+
+/* Optional: Add a hover effect for sticky headers */
+.tree-sticky-header .tree-group-header:hover {
+  background-color: #eaecef;
+}