epam / epam/UUI

[useTree]: Add possibility to filter and search over the showSelectedOnly useTree results

Open
#2,996 0 comments 0 reactions 1 assignee Claimed by @Kuznietsov View on GitHub
Datasources improvement
Dominant language
TypeScript
Stars
247
Forks
78
Avg merge
14h 27m
Merged PRs (30d)
15

Description

## Now

Currently, a tree, which contains only checked rows (as a result of `showSelectedOnly`), passed through `useFilterTree`/`useSearchTree`, will result into showing loading placeholders from `useDataRows`.

```ts
const { tree: fullTree, ...restProps } = useTree(
{
type: 'sync',
getId: (item) => item.id,
dataSourceState,
setDataSourceState,
items,
showSelectedOnly: true,
},
[],
);

const treeWithSearch = useSearchTree(
{
tree: fullTree,
dataSourceState,
getSearchFields,
},
[fullTree],
);

const tree = useFilterTree(
{
tree: treeWithSearch,
dataSourceState,
getFilter,
},
[treeWithSearch],
);

const { rows, listProps } = useDataRows({
tree,
...restProps,
});
```

## To Do

`useDataRows` should return rows which are matching search/filter criteriaes.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.