<TreeInput> Component

This Enterprise EditionReact Admin Enterprise Edition icon component allows to select one or several nodes from a tree.

Usage

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.

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.

checkStrictly

By 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} 
/>

data

The 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 .

hideRootNodes

Use the hideRootNodes prop to hide all root nodes:

<TreeInput 
    source="category" 
    data={treeData} 
    hideRootNodes
/>

multiple

Use 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>
);

titleField

Use the titleField prop to specify the name of the field holding the node title:

<TreeInput 
    source="category" 
    data={treeData} 
    titleField="name" 
/>

Fetching Choices

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).

Selecting a Foreign Key

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>
);