In the "Large Collection" example, this shows how react-virtualized can work with a large list to manage the DOM and render only the visible subset of list items. This works great for the presentation of the data. However, in a real-world application we don't generate 250,000 items in the client/browser, and we don't load a large set like this from a server in one request/response.

So, we need a way to manage subsets of data via scrolling/paging.

What's the support and suggested approach for handling this, in this react-virtualized-tree component? Is there any built-in support to allow us to do something like this?

• Load a root-level list of tree nodes.
• onExpand of a node, load a partial set (a page) of children of the node, a set that overflows the current viewport height.
• On scrolling near the boundary of the viewport, load a subsequent partial set (a page) of children of the node, which are concatenated onto the children[] list.
• Subsequent scrolling continues to load/concatenate more children.

This is basically "Infinite Scrolling". In our application, we have customers that may have millions of children in nodes, so we need an approach like this to handle the presentation of the nested child nodes. Do you have any advice on how to provide this in the component?

Thanks.

Hi @diogofcunha! I started using your library, but came across the following issue: FilteringContainerProps interface in index.d.ts file has all props set as required, despite some of them are marked as optional here https://diogofcunha.github.io/react-virtualized-tree/#/docs/filtering. Is it a bug?

Hi!
Great job with the tree viewer.
It is not clear to me how to use the favorite Renderer, or how to handle select at all.
The idea is to provide the tree picker with an array of selected nodes and to manage the change through the states. I see this is what you attempted to show with the Basic demo with the favorite Renderer, but I am not able to find it documented properly.

Do you have a concrete example / code snippet on how to handle select and change?

Just wanted to make sure that is it possible to load more data via an ajax call on expanding a node?

Add a new component to act as a container. It should handle node filtering and grouping.

#56 added an optional width prop to Tree and TreeContainer, but TreeContainer doesn't pass the prop to Tree. As a result, there's no way to enable horizontal scrolling.

react-virtualized-tree/index.d.ts
(36,21): Generic type 'RendererProps<T>' requires 1 type argument(s).

This is caused by incorrect change in commit f6fe1a4
f6fe1a4

- type onChange = (updateParams: NodeAction) => void;
+ type onChange = (nodes: Node[], node: Node) => Node[];

export interface RendererProps<T> {
  - onChange: onChange;
  + onChange: (updateParams: NodeAction) => void;

onChange param signature is still not matching between the type definition and the property, and on line # 36 this:

children: (props: RendererProps) => JSX.Element;
should be something like this:
children: (props: RendererProps<any>) => JSX.Element;

Is it possible to add Elements on top of the tree and at the same time Both the elements and the tree share one vertical scroll. A similar behavior when using react-virtualized WindowScroller + AutoSizer + List. I am having problem figuring out how to include the tree in a parent container with multiple elements and having only the parent container control the scrolling.

• Each node is set to expandable. Can be solved with a custom renderer, however, maybe if there is no children, the tabindex should be set to -1
• When using the ENTER key to open and close the tree branches, or select a leaf node, focus is completely lost. (See EDIT below)
• SPACEBAR should be supported as a secondary way to open and close branches.

EDIT: I think the focus is lost due to the use of the anonymous function that renders the custom node. So that probably isn't an issue with this library. I'll leave it here just for history.

When expanding Argentina, and then Leo Messi, the content are rendered like a mess.

After installing react-virtualized-tree in a clean project (with react, react-dom & react-virtualized installed), I get the following deprecation warnings:

npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: The major version is no longer supported. Please update to 4.x or newer

These warnings both come from the codecov.io dependency.

This dependency can't be seen in the dependencies of the package.json (which is still v2.0.2) but it is inside the build that's distributed on npm.
I get these warnings because this dependency has version 0.1.6, which is deprecated.

I think the new version of the package (codecov) should be used instead if we still want to have it there, 'cause I'm also not sure if this package is a normal dependency and think it should be moved to the devDependencies.

Either way: thanks for all your great work @diogofcunha!

I would like to ask a question, such as Extending behaviour, how can I get the id of the selected node?

Hi! First, thank you for working this great component!
2.0.0 has the left-margin customization feature, but it seems not published to NPM yet. So I tried to install this by this command:
yarn add [email protected]

The error message is like this while compiling:
Module not found: Can't resolve 'react-virtualized-tree'

Can you help me to fix the issue? Thanks.

I wanted to create custom expadable component based on the docs example.I have encountered typo in mentioned file.It is weird for me that i have different content inside of my node_module/react-virtualized-tree compare to github master branch.

I have installed it through npm by npm install react-virtualized-tree.And i can see that it is 1.2.5 version

You can check this codesandbox example for clarification.

Hi,

I'm trying to render tree structures having largen numbers of direct children (several thousands).
Rendering times are very slow then. I think the reason for this is the way getFlattenedTree is implemented.

When on the "Keyboard Navigation" example, none of the links to navigate away work any more.
Tested this in Firefox & Chrome.

Is it possible to use this tree without passing an ID with each node. Is there a way that tree can generate an automatic id for each node?

The demo source such like this:
import Tree from '../../../src/TreeContainer';
import Renderers from '../../../src/renderers';
import {createEntry, constructTree} from '../toolbelt';
import FilteringContainer from '../../../src/FilteringContainer';
import Favorite from '../../../src/renderers/Favorite';
So i have to copy each of those file and then each file have the dependencies file, So i have to go on find file and copy. Is this really demo source ?

Found this bug in a project im working on and noticed its present in the example code as well. When using the filtering container any action that triggers an onChange() call in a renderer that invokes updateNode() will remove any child nodes that had been filtered out by the filtering container.

You can replicate the issue like this.

• expand a tree to a node with multiple child nodes.
• enter a filter term that removes several of the child nodes.
• toggle/update the parent node
• remove the filter term

the child nodes that had been filtered out will not return once the filter term has been removed.

In Expandable renderer, user can pass a iconsClassNameMap property. In this even if i pass the lastChild class in the map the icon never appears.
The reason being icon only appears if the node has children. Logic @ https://github.com/diogofcunha/react-virtualized-tree/blob/master/src/renderers/Expandable.js#L32
This leads to the bug of no icon beside the leaf node.

Hi all,

I've just started exploring whether react-virtualized-tree might be a viable solution for my project, and so far it looks really good! Thanks for providing it :-)

But I'm working with TypeScript and so I bumped into some mismatches between the actual code and the typings. I hope you can get me sorted here.

1. ExpandableRenderProps is the type of the props that the Expandable renderer receives. The Expandable component clearly makes use of the children prop (see lines 16 and 38) but the type does not contain children. Is this an error in the typings? Or am I misunderstanding something here?

2. The onChange() handler of the Expandable renderer is supposed to receive a NodeAction as per the TS types, but it is always invoked with the full tree. I'd be very interested in getting a NodeAction for reasons of post-processing (so I am not forced to reverse-engineer the new tree to figure out what changed), but from looking at the code of Expandable.js it is not clear to me where I can get that from. Can you please point me in the right direction here?

Thank you,
Nicole

I was wondering if there was anyway to support animation with react virtualized tree upon expansion and collapsing to provide smooth transitions?

In index.d.ts, we can see:

export interface RendererProps {
  measure: () => void;
  onChange: onChange;
  node: FlattenedNode;
}

declare const Deletable: React.SFC<RendererProps>;
declare const Expandable: React.SFC<RendererProps>;

However, the renderer example shows the use of an 'iconsClassNameMap' property on the Expandable:

          <Expandable
            node={node}
            {...rest}
            iconsClassNameMap={{
              expanded: 'mi mi-folder-open',
              collapsed: 'mi mi-folder',
              lastChild: 'mi mi-insert-drive-file',
            }}
          >
            {node.name}
          </Expandable>

As a result of this, using the code from the example above causes a TS compilation error:

[ts] Property 'iconsClassNameMap' does not exist on type 'IntrinsicAttributes & RendererProps & { children?: ReactNode; }'.
(JSX attribute) iconsClassNameMap: {
    expanded: string;
    collapsed: string;
    lastChild: string;
}

I think the index.d.ts definition needs to be updated with:

export interface RendererProps {
  measure: () => void;
  onChange: onChange;
  node: FlattenedNode;
  iconsClassNameMap: any;
}

Hello there, I was hoping to get some insight on how to handle testing around react-virtualized-tree. I'm using JEST for testing and seem to be running into the following error when running unit tests.

src/components/App.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read property 'Expandable' of undefined

I was curious if you've seen this before and had perspective on how to handle.
For added clarity, it is behaving as expected in app. So I suspect this may be related to JEST.

A few screenshots and examples would go a long way.

I have problem when nodes with different height are rendered. The NodeRenderer component does not receive a measure prop as I expect. The problem maybe in initial parameters of CellMeasurerCache object, I supoose to use defaultHeight insteade of minHeight. Please, fix it.

Can I send a PR so user can set minHeight and rowHeight on cellMeasurer?

Hello,

first of all thank you for react-virtualized-tree, it's working well so far and I hope will fix the performance issues I saw with other tree modules.

I wanted to use bulma levels https://bulma.io/documentation/layout/level/ in my nodes but the output were not as great as expected:

After digging a bit,and with some helps, I figured out that by using padding instead of margin, the output will be the one expected and the content will not be cropped:

I ended up doing the modification in my fork branch: master...Lothiraldan:Lothiraldan-patch-1

I don't think I should make a PR as simply changing margin into padding would be too specific, I'm pretty sure some people might need margin and not padding.

Do you have an idea which API could we have for supporting both? Maybe having a styleFunction argument that can return the style for each node, what do you think?

import Tree from 'react-virtualized-tree';
import { renderers } from 'react-virtualized-tree';
import 'react-virtualized/styles.css';
const { Expandable } = renderers;

	constructor(props: IMainProps) {
		super(props);
		this.state = {
			nodes: Nodes
		};
	}

      <Tree nodes={this.state.nodes} onChange={this.handleChange}>
            {({ node, ...rest }) => (
                <Expandable node={node} {...rest}>
                    {node.name}
                </Expandable>
            )}
        </Tree>

	public handleChange = (nodes: any) => {
		this.setState({ nodes });
	};

There are errors in the picture in typescript , but my data is created using the methods in your demo. I don't know why I will report an error. Please help me.

It would be nice to have a customizable or not feature to handle overflow on vertical. Now it seems overflow is hidden, which is not what usually people want:

I tried to override the component's overflow property to scroll, but then I also need the height to take all the viewport height, but that seems impossible as the tree needs a fixed size, or no size to be displayed correctly (I might be wrong, but at least with my setup). The point here is not to have a scroll in the middle of the screen, if the tree is just half a screen.

Hey, I would love to pass minHeight as a prop to <TreeContainer ../> which can later be fed into CellMeasurerCache of <Tree .. />, because minHeight of the tree node varies from to tree to tree in my application.. Would you like if I do that and raise a PR?

Idea

Have an extensible and quick way to check the exported renderers and reorder them dynamically in order to display nodes as required.

Possible solution

Have all the renderers available in a box and adding them to a container where they can be dragged in the desired order, the drag container can be something like:

It's also important, they the code generated by the ordering of the renderers is shown to the person interacting with it.

is it just me or does the scroll handle on the large dataset not follow the mouse?
https://diogofcunha.github.io/react-virtualized-tree/#/examples/large-collection

note the the behavior gets better as you scroll from the very top to bottom and back a few times, like its learning something along the way?

on a larger dataset, I have problems where the scroll handle will run up to the top of the tree and flicker whenever I scroll around?

Motivation

While Delete and update should cover most use cases and shouldn't need any override for 90% of the use cases no one should be blocked from overriding this actions or even create a custom action to handle a certain requirement specific to a custom renderer behavior.

Solution

1. export current consts in the package
2. Add a new prop to the entry point of the package that will serve any future extensions

extensions  = {
   updateTypes: { [updateType: number]: (nodes: Node[], updatedNode: Node) => Nodes[] }
}

3. Create a getter under TreeContainer component that merges updateTypeMap static field with the values comming from the extensions
4. Document it in a new md
5. Add an example with a use case

Is there a way to access react-virtualized's WindowScroller functionality or something like that?
In case i have an id of one of the nodes that were sent to the Tree component, is there a way to use a method that will scroll that node in to view?

Like in this example:
https://bvaughn.github.io/react-virtualized/#/components/WindowScroller

Thanks!

Why node's id must be number?

Hello!
I think this is wrong declaration.
It should be something like this:
type onChange = (nodes: Node[], node: Node) => Node[];

Hi,

thanks for this nice component! I'm testing it and works really well. I've got one question about the expanding of nodes: can we expand all/ expand single nodes programmatically? There are cases where I want to render the full tree expanded at the beginning but I can only see the root node. Maybe I'm missing something but I couldn't figure out how to achieve this with the current API or documentation.

Thanks in advance!

Hi @diogofcunha !

I have spent the last two days dealing with performance with many nested rows. As a result, I also found react-virtualized. But another research showed that it doesn't work with tree's. Then I found your repository, a plugin for react-virtualized that allows to virtualize tree's.

Over the last year I have created my own implementation of a complete React Tree Component solution (expect virtualization). This component is currently private-only accessible (not published on GitHub) because it isn't that good documentated atm. I am using it within my WordPress plugin... I'll just show you the component:

On the left you can see the tree component. My question is now, is it possible to use your virtualization methodic within another React Tree Component. Just to give a brief insight, so my tree is built like this:

/**
 * Render a tree.
 * 
 * @param {object[]} tree The tree
 * @param {boolean} [displayChildren=true] If true the first nodes can have childNodes
 * @param {object} [createRoot] Shows an additional node after the last one with an input field
 * @param {string('tree','static','search')} [context='tree'] The tree context
 * @method
 */
renderTree = (tree, displayChildren = true, createRoot = undefined, context = 'tree') => {
    const nodeAttr = { renderItem, onRenameClose, onAddClose, onSelect, onNodePressF2, renameSaveText, renameAddText } = this.props,
        { isTreeLinkDisabled, rootId, toggleExpandAll } = this.props,
        resultSelectedNodeIdx = this.state.resultSelectedNodeIdx,
        resultTreeLength = typeof resultSelectedNodeIdx === "number" && this.state.resultTree.length,
        expandedState = this.storage.getItem('expandNodes') || {},
        className = classNames({
            'aiot-disable-links': isTreeLinkDisabled,
            'aiot-sortable-one': tree.length === 1
        }, 'aiot-context-' + context);
    let i = -1, anyNodeHasChildren = tree.some(n => n.childNodes?.length > 0);
    
    return [
        // "All" expander
        context === 'tree' && anyNodeHasChildren && ( <div key="all-expander" onClick={ this.handleToggleAll }
            className={ classNames('aiot-expander', 'aiot-expander-all', { 'aiot-open': this.getExpandedNodes(expandedState).length }) } /> ),
        // List view
        <ul key="list-view" className={ className } data-childs-for={ rootId } ref={ displayChildren ? this.handleSortableTree : undefined }>
        { tree.map(node => {
            i++;
            const searchSelected = i % resultTreeLength === resultSelectedNodeIdx % resultTreeLength && !displayChildren,
                propSearchSelected = context === 'search' ? searchSelected : undefined;

            const createTreeNode = () => (<TreeNode key={ node.id } searchSelected={ propSearchSelected } {...node} onExpand={ this.handleNodeExpand }
                expandedState={ expandedState } {...nodeAttr} onUlRef={ displayChildren ? this.handleSortableTree : undefined } displayChildren={ displayChildren } onPaging={ this.handlePaging } />);
                
            if (renderItem) {
                /**
                 * This function is called when a node item gets rendered.
                 * 
                 * @callback module:react-aiot~Tree~renderItem
                 * @param {function} createTreeNode A function that creates the default tree node (helpful for wrapper functions)
                 * @param {module:react-aiot/components/TreeNode} TreeNode The ReactJS element
                 * @param {object} node The node item
                 * @returns {module:react-aiot/components/TreeNode}
                 */
                return renderItem(createTreeNode, TreeNode, node);
            }else{
                return createTreeNode();
            }
        } ) }
        { !!createRoot && <TreeNode $_create onRenameClose={ onAddClose } renameSaveText={ this.props.renameAddText } {...createRoot} /> }
    </ul> ];
}

Don't be scared, but basically the top tree is just rendered and within TreeNode a new tree is built recursively. The TreeNode is a simple <li>. I hope I don't overwhelm you, but right now I'm a bit desperate about virtualization with nested trees. If my component is also able to virtualize, I think about making it open source.

Best regards,
Matthew :-)

Add an example to show the component is performant for big data sets

Filtering containter accepts nodes as props but this is not included in the typings file
https://github.com/diogofcunha/react-virtualized-tree/blob/master/index.d.ts#L97
Also FilteringContainter return node as an object to the render prop method but this is defined as children: (nodes: Node[]) => JSX.Element; in the typings file

Hi, we started using the library in our project and stumble on a proptype problem.

When we use Expandable we do not pass it onMeasure & onChange and these two props are required.
In addition, the shape of our node does not contain the name prop and this is also a requires prop in nodeShape.js.

How can we override these proptypes in our different uses of this library all over our app?
Thanks

Launching the documentation page via npm install && npm start results in several errors related to the Expandable renderer at http://localhost:3000/#/examples/basic-tree:

Warning: Failed prop type: The prop `onChange` is marked as required in `Expandable`, but its value is `undefined`.

Warning: Failed prop type: The prop `node.deepness` is marked as required in `Expandable`, but its value is `undefined`.

Warning: Failed prop type: The prop `index` is marked as required in `Expandable`, but its value is `undefined`.

It seems that onChange should be marked optional, but I don't know what to make of the other two missing props.

.findIndex is not supported in IE 11. Works everywhere else, but since findIndex is not supported on IE, the component doesnt work.

Hello,
I'm trying to create a simple tree, but I don't need auto sizing at node level. So I'm trying to change the auto height using:

<div style={style} className={classes.dividerStyle}> <div className={'tree'} style={{ height: this.setHeight(rowIndex), maxHeight: 600 }}> <Tree nodes={this.state.data} onChange={this.handleChange} > {({ style, ...p }) => <div style={{height: 40, left: style.left, position: 'absolute', top: 40 * p.index, width: style.width, marginLeft: style.marginLeft, cursor: style.cursor, userSelect:style.userSelect} }>{ createNodeRenderer([Expandable], p, columnIndex) } </div> } </Tree> </div> </div>

but looks like the top: 40 * p.index. is not working on scrolling the tree, because I set a max height, my question is there is a way to set the a static node height?

Thanks,

Re-render component problems....

tree stay empty after show tree again :(

example =>
show tree, do some logic => hide tree, do some logic =>show tree ==== tree is empty / blank

Add the ability to re-order nodes using drag and drop.

Hi! We want to use your react tree implementation in our filemanager and maybe for some of other react components.

You made a great job!

We documenting our react components using react-showroom

It allows us to play with code sandbox in real-time. Sometimes it useful for better understand what each component property do.

How do you think, it would be useful to use react-showroom or some similar tool for your project or not?