How to use custom data provider?

[jeevasusej]

Hi,

How to use custom data provider? I don't find any example to use that? https://rct.lukasbach.com/docs/guides/custom-data-provider

[williammyuan]

const customData: TreeDataProvider<any> = { getTreeItem: (itemId: TreeItemIndex) => { return new Promise<TreeItem<any>>((resolve, reject) => { const item: TreeItem<string> = { index: 'root', hasChildren: true, children: ['child1', 'child2'], data: 'Root item' } resolve(item) }) }, getTreeItems: (itemIds: TreeItemIndex[]) => { console.log('itemIds:', itemIds) return new Promise((resolve) => { const items: TreeItem[] = [{ index: 'root', hasChildren: true, children: ['child1', 'child2'], data: 'Root item' }, { index: 'child1', children: [], data: 'Child item 1' }, { index: 'child2', hasChildren: true, children: ['child3'], data: 'Child item 2' }, { index: 'child3', children: [], data: 'Child item 3' }] resolve(items) }) } }

[lukasbach]

You need to implement the interface specified in the page you posted, for example like @williammyuan suggested. Alternatively you can use the provided StaticTreeDataProvider.

You can look into the implementation of StaticTreeDataProvider for a more elaborate example: https://github.com/lukasbach/react-complex-tree/blob/main/packages/core/src/uncontrolledEnvironment/StaticTreeDataProvider.ts