Please add an example that demonstrates how to remove an item.

[1c7]

It seems like removeItemsFromParents is the proper way to remove item.

I am using Async Data Loader，do I need to call：

const item = tree.getItemInstance("item1");
item.invalidateItemData();
item.invalidateChildrenIds();

Adding a dedicated doc and example would be great.

[1c7]

Great work! I looked into over 20 tree component libraries, and Headless Tree seems to be the best one.

[1c7]

Would be great to add two new documents and a Storybook example to show:

creating a new item (via the "Add" button → insertItemsAtTarget()),

removing an item (via context menu "Delete" or Backspace key).

[lukasbach]

Thanks for the feedback (and the support 🙂)! I'll look into improving the docs on this. The gist is that the library consumer is responsible for making changes to the underlying data structure, but using the async data loader will cause HT to internally cache data, so that cache needs to be updated to reflect that change. This can be done with invalidateChildrenIds() to trigger a refetch of the children on the parent where an item was removed, or directly remove the deleted child from the parent by updating the cache directly with updateCachedChildrenIds.

removeItemsFromParents is a utility function that encapsulates the removal logic and determines on which items to call updateCachedChildrenIds with the updated children.

[laurent512]

Yes, please... A simple exactly like press on a button and it adds for example a folder on top ... and same for removal please

[lukasbach]

I have now expanded the docs on how to handle external state upates and added some specific samples for sync data loaders, async data loaders and also cases where state is persisted in a react state: https://headless-tree.lukasbach.com/recipe/external-state-updates