Skip to content

Commit 3a8fc7f

Browse files
fzaninottofzaninotto
authored
Merge pull request marmelab#10398 from marmelab/update-tree-with-details-documentation
[Doc] Update `<TreeWithDetails>` documentation
2 parents 9b51047 + daf47b5 commit 3a8fc7f

File tree

1 file changed

+29
-15
lines changed

1 file changed

+29
-15
lines changed

‎docs/TreeWithDetails.md‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -72,22 +72,23 @@ Check [the `ra-tree` documentation](https://react-admin-ee.marmelab.com/document
7272

7373
## Props
7474

75-
| Prop | Required | Type | Default | Description |
76-
| -------------------- | -------- | ---------------------- | ------- |---------------------------------------------------------------------------------------------|
77-
| `addRootButton` | Optional | `ReactNode` or `false` | - | The create button to add a root node |
78-
| `allowMultipleRoots` | Optional | `boolean` | `false` | To allow trees with multiple roots |
79-
| `create` | Required | `ReactNode` | - | The create form of your resource |
80-
| `draggable` | Optional | `boolean` | `false` | To allow user to reorder nodes |
81-
| `edit` | Required | `ReactNode` | - | The edit form of your resource |
82-
| `hideRootNodes` | Optional | `boolean` | `false` | To hide all root nodes |
83-
| `lazy` | Optional | `boolean` | `false` | To load children only when they are expanded |
75+
| Prop | Required | Type | Default | Description |
76+
| -------------------- | -------- | ---------------------- | ------- |----------------------------------------------------------------------------------------------- |
77+
| `addRootButton` | Optional | `ReactNode` or `false` | - | The create button to add a root node |
78+
| `allowMultipleRoots` | Optional | `boolean` | `false` | To allow trees with multiple roots |
79+
| `create` | Required | `ReactNode` | - | The create form of your resource |
80+
| `draggable` | Optional | `boolean` | `false` | To allow user to reorder nodes |
81+
| `edit` | Required | `ReactNode` | - | The edit form of your resource |
82+
| `filter` | Optional | `object` | - | The permanent filter values |
83+
| `hideRootNodes` | Optional | `boolean` | `false` | To hide all root nodes |
84+
| `lazy` | Optional | `boolean` | `false` | To load children only when they are expanded |
8485
| `motion` | Optional | `boolean` | `false` | To enable [rc-tree's `<Tree>`](https://github.com/react-component/tree#tree-props) transitions |
85-
| `nodeActions` | Optional | `ReactNode` | - | To customize the default dropdown action |
86-
| `show` | Required | `ReactNode` | - | The show view of your resource |
87-
| `showLine` | Optional | `boolean` | `false` | Shows a connecting line |
88-
| `sx` | Optional | `SxProps` | - | Material UI shortcut for defining custom styles |
89-
| `title` | Optional | `string` | - | The title to display in the `<AppBar>` |
90-
| `titleField` | Optional | `string` | `title` | Set the record field to display in the tree |
86+
| `nodeActions` | Optional | `ReactNode` | - | To customize the default dropdown action |
87+
| `show` | Required | `ReactNode` | - | The show view of your resource |
88+
| `showLine` | Optional | `boolean` | `false` | Shows a connecting line |
89+
| `sx` | Optional | `SxProps` | - | Material UI shortcut for defining custom styles |
90+
| `title` | Optional | `string` | - | The title to display in the `<AppBar>` |
91+
| `titleField` | Optional | `string` | `title` | Set the record field to display in the tree |
9192

9293
`<TreeWithDetails>` also accepts the [rc-tree](https://tree-react-component.vercel.app/) props.
9394

@@ -244,6 +245,19 @@ If you want to allow user to reorder nodes in the tree, simply add the `draggabl
244245
export const CategoriesList = () => <TreeWithDetails draggable />;
245246
```
246247

248+
249+
### `filter`
250+
251+
You can choose to permanently filter the tree to display only a sub tree.
252+
253+
For instance, imagine you have one `employees` resource with a `department` field, and you want to display a tree for the Finance department. Use the `filter` prop to filter the tree:
254+
255+
```jsx
256+
export const EmployeeList = () => <TreeWithDetails filter={{ department: 'finance' }} />;
257+
```
258+
259+
**Note**: This only works if the filter field allows to extract a subtree with its own root node. If you use the `filter` prop to display a sparse selection of nodes (e.g. only the `male` employees), dragging nodes in this tree will not work as expected.
260+
247261
## `hideRootNodes`
248262

249263
Sometimes, a tree only has one root node for technical reasons and users should probably not see it at all. Use the `hideRootNodes` prop to hide all root nodes.

0 commit comments

Comments
 (0)