docs/TreeInput.md
<TreeInput> ComponentThis Enterprise Edition component allows to select one or several nodes from a tree.
<video controls autoplay playsinline muted loop> <source src="https://react-admin-ee.marmelab.com/assets/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/> Your browser does not support the video tag. </video>Use <TreeInput> in a react-admin form, and pass the possible choices as the data prop in the format of the data returned by dataProvider.getTree() method (i.e. an array of nodes with a children field).
import { TreeInput } from '@react-admin/ra-tree';
import { SimpleForm } from 'react-admin';
export const SimpleTreeForm = () => (
<SimpleForm>
<TreeInput source="category" data={[
{ id: 1, title: 'Clothing', isRoot: true, children: [2, 6] },
{ id: 2, title: 'Men', children: [3] },
{ id: 3, title: 'Suits', children: [4, 5] },
{ id: 4, title: 'Slacks', children: [] },
{ id: 5, title: 'Jackets', children: [] },
{ id: 6, title: 'Women', children: [7, 10, 11] },
{ id: 7, title: 'Dresses', children: [8, 9] },
{ id: 8, title: 'Evening Gowns', children: [] },
{ id: 9, title: 'Sun Dresses', children: [] },
{ id: 10, title: 'Skirts', children: [] },
{ id: 11, title: 'Blouses', children: [] },
]} />
</SimpleForm>
);
Tip: You can use the <TreeInput> component in a <ReferenceNodeInput> to automatically fetch the data from a reference resource.
<TreeInput> uses rc-tree's <Tree> component under the hood, and accepts all its props.
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
source | Required | string | - | The name of the source field. Required unless when used inside <ReferenceNodeInput> |
checkStrictly | Optional | boolena | true | Check node precisely, parent and children nodes are not associated |
data | Optional | array of objects | - | The tree data |
id | Optional | string | - | The input id |
hideRootNodes | Optional | boolean | false | Set to true to hide all root nodes |
margin | Optional | string | dense | The margin of the input, can be none, dense or normal (see MUI Input margins) |
multiple | Optional | boolean | false | Set to true to allow selecting multiple nodes |
size | Optional | string | small | The size of the input, can be small, medium or large (see MUI Input sizes) |
titleField | Optional | string | 'title' | The name of the field holding the node title |
variant | Optional | string | filled | The variant to use, e.g. standard, outlined or filled (see MUI Input variants) |
<TreeInput> also accepts the common input props and the rc-tree props.
checkStrictlyBy default, <TreeInput> uses the checkStrictly prop from rc-tree's <Tree> component to allow selecting leaf and parent nodes independently. If you want to disable this feature, you can set the checkStrictly prop to false:
<TreeInput
source="category"
data={treeData}
multiple
checkStrictly={false}
/>
dataThe list of possible choices must be passed as the data prop. It must be an array of nodes with a children field.
<TreeInput source="category" data={[
{ id: 1, title: 'Clothing', isRoot: true, children: [2, 6] },
{ id: 2, title: 'Men', children: [3] },
{ id: 3, title: 'Suits', children: [4, 5] },
{ id: 4, title: 'Slacks', children: [] },
{ id: 5, title: 'Jackets', children: [] },
{ id: 6, title: 'Women', children: [7, 10, 11] },
{ id: 7, title: 'Dresses', children: [8, 9] },
{ id: 8, title: 'Evening Gowns', children: [] },
{ id: 9, title: 'Sun Dresses', children: [] },
{ id: 10, title: 'Skirts', children: [] },
{ id: 11, title: 'Blouses', children: [] },
]} />
If you need to fetch the data, you're probably editing a relationship. In that case, you should use the <ReferenceNodeInput> component, which fetches the data from a reference resource on mount .
hideRootNodesUse the hideRootNodes prop to hide all root nodes:
<TreeInput
source="category"
data={treeData}
hideRootNodes
/>
multipleUse the multiple prop to allow selecting multiple nodes. In that case, <TreeInput> renders a tree with one checkbox per line.
import { SimpleForm } from 'react-admin';
import { TreeInput } from '@react-admin/ra-tree';
import treeData from './treeData';
export const SimpleTreeForm = () => (
<SimpleForm>
<TreeInput source="category" data={treeData} multiple />
</SimpleForm>
);
titleFieldUse the titleField prop to specify the name of the field holding the node title:
<TreeInput
source="category"
data={treeData}
titleField="name"
/>
You can use dataProvider.getTree() to fetch choices. For example, to fetch a list of categories for a product:
import { useGetTree, TreeInput } from '@react-admin/ra-tree';
const CategoryInput = () => {
const { isLoading, data: tree } = useGetTree('categories');
if (isLoading) return <Loading />;
return (
<TreeInput
source="category"
data={tree}
/>
);
};
The isLoading prop is used to display a loading indicator while the data is being fetched.
However, most of the time, if you need to populate a <TreeInput> with choices fetched from another resource, it's because you are trying to set a foreign key. In that case, you should use <ReferenceNodeInput> to fetch the choices instead (see next section).
If you use <TreeInput> to set a foreign key for a many-to-one or a one-to-one relationship, you’ll have to fetch choices, as explained in the previous section.
As this is a common task, react-admin provides a shortcut to do the same in a declarative way: <ReferenceNodeInput>:
import { Edit, SimpleForm, TextInput } from 'react-admin';
import { ReferenceNodeInput, TreeInput } from '@react-admin/ra-tree';
const ProductEdit = () => (
<Edit>
<SimpleForm>
<TextInput source="name" />
<ReferenceNodeInput source="category_id" reference="categories">
<TreeInput />
</ReferenceNodeInput>
</SimpleForm>
</Edit>
);