Material Tree

Material Tree is an enrichment to React Tree component.

It is based on basic React Tree logic and allows a user to display and manage a hierarchical structure of items using Material-UI components.

Examples can be found - here

Installation

Since Material Tree is based on React Tree< logic, you need to install both @kenshooui/react-tree and @kenshooui/material-tree.

Dependencies to @material-ui/core and @material-ui/icons are needed only if they don't exist in your project.

Installation using npm:

 npm install --save @kenshooui/react-tree @kenshooui/material-tree

 npm install --save @material-ui/core @material-ui/icons

Installation using Yarn:

 yarn add @kenshooui/material-tree @kenshooui/react-tree

 yarn add @material-ui/core @material-ui/icons

Technologies

• React 16
• @material-ui/core
• @material-ui/icons

How to use

import MaterialTree from "@kenshooui/material-tree";

const structure = [
  ["Profiles", "Performance", "Clicks"],
  ["Profiles", "Performance", "Imp"],
  ["Profiles", "Attribute", "Agency"],
  ["Profiles", "Attribute", "Progress"],
  ["Profiles", "Attribute", "Create Date"],
  ["Campaigns", "Performance", "Clicks"],
  ["Campaigns", "Performance", "Cost"],
  ["Campaigns", "Performance", "CTR"],
  ["Campaigns", "Attribute", "campaign name"],
  ["Ad Groups", "Attribute", "Ad Group Name"]
];

<MaterialTree
  structure={structure}
  title={"Add filter criteria"}
  onSelect={() => {}}
/>;

Props

Can be found - here

Customization

Renderers

You can replace the renderers of the following components:

Container

Use the treeContainerRenderer to replace the default component.

Each treeContainer receives the following props:

containerRef - Holds a reference to the tree container component

children - Holds all sub components (like header, input, items, etc..)

width - The width of the tree component

height - The height of the tree component

Header

Use the headerRenderer to replace the default component.

Each header receives the following props:

headerRef - Holds a reference to the header component

parents - Holds the parents of the current depth.
For example for the following structure: ["Profiles", "Performance", "Clicks"]

• In the first depth the parents are: [""]
• In the second depth the parents are: ["Profile"]
• In the third depth the parents are: ["Profile, "Performance"]

onClick - Triggers the back event on click

title - The title of the header. Displayed on the first depth.

backIconRenderer - Use the backIconRenderer to replace the default back button component.

Input

Use the inputRenderer to replace the default component.

Each header receives the following props:

inputRef - Holds a reference to the input component

searchTerm - Holds the searched value

onInputChange - Triggers set searchTerm event on change

inputIconRenderer - Use the inputIconRenderer to replace the default input icon component.

clearIconRenderer - Use the clearIconRenderer to replace the default clear input icon component.

Items

Use the itemsRenderer to replace the default component.

Each header receives the following props:

children - All items

height - The height of the items list

Item

Use the itemRenderer to replace the default component.

Each header receives the following props:

searchTerm - Holds the searched value

item - Represents an item from the given structure.

onClick - Is called when clicking on an item

forwardIconRenderer - Use the forwardIconRenderer to replace the default forward icon component.

selectedItem - Represents the current selected item. Is relevant when markSelectedItem = true.

No Results

Use the noResultsRenderer to replace the default component.

text - Displayed when there are no results

height - The height of the items list

noResultsIconRenderer - Use the noResultsIconRenderer to replace the default no results warning icon component.