`<Tree>`

This Enterprise EditionReact Admin Enterprise Edition icon component renders a tree based on tree data.

Tree screenshot

It is a wrapper for rc-tree’s <Tree>, with Material Design style.

Usage

<Tree> expects a data prop containing a tree of nodes as returned by the dataProvider tree methods.

import { Tree } from '@react-admin/ra-tree';
// tree data format
const data = [
 { id: 1, name: 'Clothing', children: [2, 6] },
 { id: 2, name: 'Men', children: [3] },
 { id: 3, name: 'Suits', children: [4, 5] },
 { id: 4, name: 'Slacks', children: [] },
 { id: 5, name: 'Jackets', children: [] },
 { id: 6, name: 'Women', children: [7, 10, 11] },
 { id: 7, name: 'Dresses', children: [8, 9] },
 { id: 8, name: 'Evening Gowns', children: [] },
 { id: 9, name: 'Sun Dresses', children: [] },
 { id: 10, name: 'Skirts', children: [] },
 { id: 11, name: 'Blouses', children: [] },
];
const SimpleTree = () => <Tree data={data} titleField="name" />;

Props

The <Tree> component accepts the rc-tree’s <Tree> props but a few of them differ from the original.

Prop	Required	Type	Default	Description
`data`	Required	`TreeRecord[]`	-	The tree data to display in the format returned by the dataProvider.
`className`	Optional	`string`	-	The CSS class name to apply on the Root component.
`defaultExpandedKeys`	Optional	`Identifier[]`	-	An array of identifiers defining the records that should be expanded by default.
`defaultSelectedKeys`	Optional	`Identifier[]`	-	An array of identifiers defining the records that should be selected by default.
`expandedKeys`	Optional	`Identifier[]`	-	An array of identifiers defining the records that should be expanded (controlled mode).
`hideRootNodes`	Optional	`boolean`	`false`	A boolean indicating whether the root nodes should be hidden.
`motion`	Optional	`boolean`	`false`	To enable rc-tree’s `<Tree>` transitions
`nodeActions`	Optional	`ReactNode`	-	The React node to display at the end of each node.
`onCheck`	Optional	`function`	-	The function to execute when a node is checked or unchecked.
`onClick`	Optional	`function`	-	The function to execute when a node is clicked.
`onDrop`	Optional	`function`	-	The function to execute when a node is dropped on another.
`onExpand`	Optional	`function`	-	The function to execute when a node is expanded or collapsed.
`onSelect`	Optional	`function`	-	The function to execute when a node is selected.
`selectedKeys`	Optional	`Identifier[]`	-	An array of identifiers defining the records that should be selected (controlled mode).
`sx`	Optional	`SxProps`	-	Material UI shortcut for defining custom styles.
`titleField`	Optional	`string`	-	Set the record field to display in the tree.

`className`

The CSS class name to apply on the Root component.

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => <Tree data={data} className="my-class" />;

`data`

The tree data to display in the format returned by the dataProvider.

import { Tree } from '@react-admin/ra-tree';
// tree data format
const data = [
 { id: 1, name: 'Clothing', children: [2, 6] },
 { id: 2, name: 'Men', children: [3] },
 { id: 3, name: 'Suits', children: [4, 5] },
 { id: 4, name: 'Slacks', children: [] },
 { id: 5, name: 'Jackets', children: [] },
 { id: 6, name: 'Women', children: [7, 10, 11] },
 { id: 7, name: 'Dresses', children: [8, 9] },
 { id: 8, name: 'Evening Gowns', children: [] },
 { id: 9, name: 'Sun Dresses', children: [] },
 { id: 10, name: 'Skirts', children: [] },
 { id: 11, name: 'Blouses', children: [] },
];
export const SimpleTree = () => <Tree data={data} />;

`defaultExpandedKeys`

An array of identifiers defining the records that should be expanded by default.

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => <Tree data={data} defaultExpandedKeys={[0, 1]} />;

`defaultSelectedKeys`

An array of identifiers defining the records that should be selected by default.

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => <Tree data={data} defaultSelectedKeys={[0, 1]} />;

`hideRootNodes`

A boolean indicating whether the root nodes should be hidden.

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => <Tree data={data} hideRootNodes />;

`motion`

A boolean indicating whether to enable rc-tree’s <Tree> transitions.

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => <Tree data={data} motion />;

With a custom motion:

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
const motion = {
 motionName: 'node-motion',
 motionAppear: false,
 onAppearStart: node => {
 console.log('Start Motion:', node);
 return { height: 0 };
 },
 onAppearActive: node => ({ height: node.scrollHeight }),
 onLeaveStart: node => ({ height: node.offsetHeight }),
 onLeaveActive: () => ({ height: 0 }),
};
export const SimpleTree = () => (
 <Tree data={data} motion={motion} sx={{
 '& .rc-tree-child-tree': {
 display: 'block'
 }
 '& .node-motion' {
 transition: 'all .3s',
 overflowY: 'hidden',
 }
 }} />
);

`nodeActions`

The React node to display at the end of each node.

import { DeleteMenuItem, NodeActions, Tree } from '@react-admin/ra-tree';
import { data } from './data';
const MyCustomActionMenuItem = forwardRef(
 ({ record, resource, parentId }, ref) => {
 const handleClick = () => {
 // Do something with dataProvider ?
 };
 return (
 <MenuItem ref={ref} onClick={handleClick}>
 Do something
 </MenuItem>
 );
 }
);
const MyActions = () => (
 <NodeActions>
 <MyCustomActionMenuItem />
 <DeleteMenuItem />
 </NodeActions>
);
export const SimpleTree = () => <Tree data={data} nodeActions={<MyActions />} />;

`onCheck`

The function to execute when a node is checked. It receives the event and an array of the checked TreeRecord. It receives the following parameters:

event: the original MouseEvent
selectedRecords: an array of the currently selected TreeRecord objects
record: the TreeRecord that has just been selected or unselected
isSelected: a boolean indicating whether the record is now selected or not

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => (
 <Tree
 data={data}
 onCheck={(event, selectedRecords, record, isSelected) => console.log({ selectedRecords })}
 />
);

`onClick`

The function to execute when a node is clicked. It receives the event and the clicked TreeRecord.

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => <Tree data={data} onClick={(event, record) => console.log({ record })} />;

`onDrop`

The function to execute when a node is dropped on another. It receives the event and an object with the following properties:

source: the TreeRecord that has been dropped
destination: the TreeRecord onto which the node has been dropped
position: the position at which the node has been dropped
type: a value indicating whether the node should be moved as a sibling or a child of the TreeRecord in destination.

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => (
 <Tree
 data={data}
 onDrop={(event, { source, destination, position, type }) => {
 console.log(`Node ${source.id} has been moved as a ${type} of node ${destination.id} at position ${position}`)
 }}
 />
);

`onExpand`

The function to execute when a node is expanded or collapsed. It receives the event and an array of the expanded TreeRecord. It receives the following parameters:

event: the original MouseEvent
expandedRecords: an array of the currently expanded TreeRecord objects
record: the TreeRecord that has just been expanded or collapsed
isExpanded: a boolean indicating whether the record is now expanded or collapsed

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => (
 <Tree
 data={data}
 onExpand={(event, expandedRecords, record, isExpanded) => console.log({ expandedRecords })}
 />
);

`onSelect`

The function to execute when a node is expanded or collapsed. It receives the event and the selected TreeRecord. It receives the following parameters:

event: the original MouseEvent
selectedRecord: The currently selected TreeRecord or undefined
record: the TreeRecord that has just been selected or unselected
isSelected: a boolean indicating whether the record is now selected or not

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => (
 <Tree
 data={data}
 onSelect={(event, selectedRecord, record, isSelected) => console.log({ record })}
 />
);

`selectedKeys`

An array of identifiers defining the records that should be selected (controlled mode).

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => <Tree data={data} selectedKeys={[0, 1]} />;

`sx`

Material UI shortcut for defining custom styles.

import { Tree } from '@react-admin/ra-tree';
import { data } from './data';
export const SimpleTree = () => (
 <Tree data={data} sx={{
 '&': {
 border: 'solid 1px red'
 }
 }} />
);

`titleField`

The default node title uses the recordRepresentation of the resource. Use the titleField prop to specify the name of the field holding the node title:

import { Tree } from '@react-admin/ra-tree';
const data = [
 { id: 1, name: 'Clothing', children: [2, 6] },
 { id: 2, name: 'Men', children: [3] },
 { id: 3, name: 'Suits', children: [4, 5] },
 { id: 4, name: 'Slacks', children: [] },
 { id: 5, name: 'Jackets', children: [] },
 { id: 6, name: 'Women', children: [7, 10, 11] },
 { id: 7, name: 'Dresses', children: [8, 9] },
 { id: 8, name: 'Evening Gowns', children: [] },
 { id: 9, name: 'Sun Dresses', children: [] },
 { id: 10, name: 'Skirts', children: [] },
 { id: 11, name: 'Blouses', children: [] },
];
export const SimpleTree = () => <Tree data={data} titleField="name" />;