Help creating a custom tree data provider

[PetervdHemel]

Hi there. I'm quite new to using react, and especially typescript. I've been working (and learning while doing so) on a project that requires the eventual implementation of an interactive and dynamic 'item tree' and this package seemed really promising for that.

The biggest issue I have is that the data I'm using (and receiving from my API) does not work with or translate well to the StaticTreeDataProvider that is used for getting started. I've concluded that making a custom data provider would seem to be the best solution, but I have near to no experience creating something like this.

The basic structure of the data I receive from my API is something like this:

[
  {
    item_id: {
      uuid: string,
      name: string,
    },
    item_type: string,
    children: [],
  },
]

Where children is an optional field that contains full items (either node or leaf which is specified by item_type), the array can contain any number of items.

Basically I want the generated tree to consist of each item in the array, where the entry name is the item_id.name, and when either the item_type is 'node' or the item contains children it means it is a 'folder'.

The main thing I'm struggling with here is the lack of examples for TreeDataProvider which allows me to make something functionally different from StaticTreeDataProvider which is required in this case.

Big thanks if someone can help or give pointers here. Examples would be hugely appreciated!

[natetewelde]

I would like to see documentation around a basic example of this as well.

[lukasbach]

Edit: I expanded the docs on static data providers and on custom data providers, which right now is the best entry point with details on how to approach this.

A simple example is actually the implementation of the StaticTreeDataProvider itself, it implements all methods of a tree data provider, and with 50 LOC it's pretty manageable to understand: https://github.com/lukasbach/react-complex-tree/blob/main/packages/core/src/uncontrolledEnvironment/StaticTreeDataProvider.ts

The gist is to implement a getTreeItem(itemId: string | number): Promise<Item> method that allows RCT to retrieve item data for item IDs. All other methods are pretty much additional features. If you expect your items to change outside of the tree and want RCT to rerender in that case, implement onDidChangeTreeData to allow RCT to subscribe to changes to tree items. RCT in turn will notify of item changes via onChangeItemChildren if the user dragged items from one parent to another. If renaming is enabled, and the user renames an item, RCT will notify you via onRenameItem. That's pretty much the idea.

I agree that some proper examples would benefit the current docs. I don't have the time to add some at the moment, but I'll create an issue from this discussion to keep track of this.