Skip to main content

Tree view

Tree view in Storybook

Examples​

Check out the Usage section for details about how to design a tree view properly, and the different configuration options we provide.

Basic example​

A basic tree view is a TreeView component that wraps one or more TreeNode components. Each tree node can also contain its own nested TreeNode components.

<TreeView>
  <TreeNode
    id="1"
    label="Fruit">
    <TreeNode
      id="2"
      label="Banana"
    />
    <TreeNode
      id="3"
      label="Apple"
    />
  </TreeNode>
  <TreeNode
    id="4"
    label="Vegetables (coming soon!)"
  />
</TreeView>

Nodes prop example​

You can use the nodes property to pass the nodes for the tree view as an array of objects. See the tree node properties table for more information about the values that can be passed to this property.

const foods = [
  {
    id: 'fruit',
    label: { id: 'foods.Fruit', defaultMessage: 'Fruit' },
    nodes: [
      {
        id: 'banana',
        label: { id: 'foods.Banana', defaultMessage: 'Banana' },
      },
      {
        id: 'apple',
        label: { id: 'foods.Apple', defaultMessage: 'Apple' },
      },
    ],
  },
  {
    id: 'vegetables',
    label: { id: 'foods.Vegetables', defaultMessage: 'Vegetables (coming soon!)' },
  },
];

<TreeView nodes={foods} />;

Render nodes example​

If you want to override something about your nodes when using the nodes props, you can do it with the renderNodes property.

The props object of renderNodes contains the following:

  • nodeId - the id assigned to the tree node
  • nodes - the nodes object passed to the tree node

The nodes object contains nested tree nodes, so you need to iterate recursively to render the entire tree.

For example, if you want to apply some styles to each node you can create a custom component that takes the list of nodes and renders them as tree nodes recursively while applying the style to each one.


const foods = [ ... ]

const TomatoNodes = ({ nodes }) => {
  return (
    <>
      {nodes.map(({ id, label, nodes: childNodes }) => (
        <TreeNode
          id={id}
          label={label}
          style={{
            backgroundColor: 'tomato',
            color: 'blue',
            border: '1px solid yellow',
          }}>
          {childNodes && <TomatoNodes nodes={childNodes} />}
        </TreeNode>
      ))}
    </>
  );
};

<TreeView
  nodes={foods}
  renderNodes={TomatoNodes}
/>

Filter example​

If you want to include a filter field in your tree view, add the showFilter prop. The field uses a default filtering function, and if you want to override it, use the filterCallback prop.

The filterCallback function takes two arguments:

  • the translated label of the tree element
  • the filtering query that the user entered in the filter field

The function needs to return an array of indices that show ranges where the label matches the query, for example [{ start: 2, end: 4 }, { start: 7, end: 9 }].

If the query does not match, the function needs to return null.

The example below matches items only if the label starts with the query (case sensitive).

const foods = [ ... ]

const filterFunction (value, query) => {
    if (value.startsWith(query)) {
      return [{ start: 0, end: query.length }];
    }

    return null;
  }

<TreeView
  showFilter
  nodes={foods}
  filterCallback={filterFunction}
/>

Filter with props example​

The filter field is a standard Jutro text input. You can pass additional props using the filterProps property.

const foods = [ ... ]

const filterFunction (value, query) => { ... }

<TreeView
  showFilter
  filterCallback={filterFunction}
  filterProps={{
    placeholder: 'Item starts with...',
  }}
/>