how to scroll to index in deeply hierarchical list in react-virtualized

Question

The List component of react-virtualized offers a property scrollToIndex to enable scrolling to a list item that is currently not visible.

The official tree

Answer 1

Your intuition is correct here. You can't use the scrollToIndex to scroll within a large row in the way you're describing. However you could use the scrollTop property instead. (Internally Grid is just converting the index to a scroll offset anyway.)

function render ({ scrollToIndex, ...rest }) {
  // Convert scrollToIndex to scrollStop
  const scrollTop =
    rowOffset + // Position of row within List
    innerOffset // Position of inner target within row

  return (
    <List
      scrollTop={scrollTop}
      {...rest}
    />
  )
}

PS: This is a pretty cool tree component built on top of react-virtualized. Thought you may find it interesting: https://fritz-c.github.io/react-sortable-tree/