CODEWITHSUNDEEP
react-virtualized
Alex
Alex

Reputation: 2359

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

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 example builds a hierarchical list with hierarchically stacked ul elements - just as expected.

So if index x is scrolled to, this row contains the entire hierarchy that resides under this specific tree element.

In my case there are very few level one elements. But in level 3 there are up to 600 elements. So it is important to be able to scroll an element of level 3 into view.

The scrollToIndex can unfortunately not be used for this as all these 600 elements are contained in the same top level index.

The only way I can imagine this to work is by hierarchically creating entire react-virtualized List components instead of ul elements. Then in order to scroll an element into view scrollToIndex would be called from top down on every hierarchical level.

Somehow I feel there must be an easier / more feasible way to do this.

Any ideas?

update: I had this idea:

Only problem is: scrolltop is not applied :-(

This is the component I'm working on.

Upvotes: 3

Views: 2119

Answers (1)

bvaughn
bvaughn

Reputation: 13487

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/

Upvotes: 1

Related Questions