TreeView

The TreeView component is a versatile and customizable tree structure component built with React and Material-UI (MUI). It allows you to display hierarchical data in a tree-like structure, with support for checkboxes, custom icons, and various styling options

Author

• @author AkilaKalaiyarasan [email protected]

Link

Story Book Link SignUp

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_tree-view

Import component

import { TreeView } from '@licuido-ui/ui_tree-view';

Usage

import React from 'react';
import { TreeView } from '@licuido-ui/ui_tree-view';

const data = [
  {
    id: 'node-1',
    name: 'Parent Node 1',
    child: [
      {
        id: 'node-1-1',
        name: 'Child Node 1',
      },
      {
        id: 'node-1-2',
        name: 'Child Node 2',
      },
    ],
  },
  {
    id: 'node-2',
    name: 'Parent Node 2',
  },
];

function App() {
  return (
    <TreeView
      state={data}
      checkboxsection={true}
      defaultExpandIcon={<ExpandIcon />}
      defaultCollapseIcon={<CollapseIcon />}
    />
  );
}

export default App;

/>

Image

Props

| Prop | Type | Default | Description | | ------------------------- | --------------- | ----------------------------------------------- | ----------------------------------------------------------------------------- | | id | string | 'treeNode' | Unique Id for the node. | | nodes | object | {} | Data for the current node and its children. | | level | number | 0 | The level of nesting for the current node. | | defaultCollapseIcon | React.ReactNode | <ExpandIcon /> | Icon to represent collapsing a node. | | defaultExpandIcon | React.ReactNode | <CollapseIcon /> | Icon to represent expanding a node. | | checkboxWidth | string | '1.3rem' | Width of the checkbox element. | | checkboxHeight | string | '1.3rem' | Height of the checkbox element. | | checkboxBorderRadius | string | '4px' | Border radius of the checkbox element. | | disable | boolean | false | Boolean flag to disable interaction with the node. | | checkboxBgColor | string | '' | Background color for elements. | | rightSec | object | { breakpoints: { xs: 6, md: 6, sm: 4, lg: 6 } } | Configuration for the right section of the node. | | leftSec | object | { breakpoints: { xs: 6, md: 6, sm: 8, lg: 6 } } | Configuration for the left section of the node. | | permissionHeadingSx | object | {} | Styling for permission headings. | | checkboxsection | boolean | false | Boolean flag to include checkbox section. | | state | array | [] | State data for managing permissions. | | test | string | '' | A test flag indicating the type of node (e.g., 'parent', 'child'). | | parentIcon | React.ReactNode | <></> | Icon for a parent node. | | parentChildIcon | React.ReactNode | <></> | Icon for a parent-child node. | | labelStyle | object | {} | Styling for the node label. | | childrenLabelStyle | object | {} | Styling for children node labels. | | subChildLabelStyle | object | {} | Styling for sub-child node labels. | | handleDataChange | function | (updatedNodeSet) => undefined | Function to handle data changes. | | rootStyle | object | {} | Styling for the root element. | | entireGridContainerSx | object | {} | Styling for the entire grid container. | | leftSectionWrapperSx | object | {} | Styling for the left section wrapper. | | rightSecWrapperSx | object | {} | Styling for the right section wrapper. | | checkBoxStyle | object | {} | Styling for checkboxes. | | horizontalBorderSx | object | {} | Styling for horizontal borders. | | expandIconStyle | object | {} | Styling for expand icons. | | collapseIconStyle | object | {} | Divider is shown from a header bottom. | | dividerShown | boolean | {} | Styling for collapse icons. | | leftBorderStyle | boolean | false | Boolean flag indicating if the node is the last child. | | leftborderHalfLeft | boolean | false | Boolean flag indicating if the node is the last child. | | connectors | boolean | false | To show or hide connectors. | | lastIndex | boolean | false | Boolean flag indicating if the node is the last child. | | headerTextVariant | string | 'body2' | Variant for the header left text using a props name is headerTextVariant. | | headerLeftTextVariant | string | 'body2' | Variant for the header left text using a props name is headerLeftTextVariant. |