npm package: @licuido-ui/ui_tree-view
Description: 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 o
Latest version: 5.0.4

# 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 <akila@crayond.co>

## Link

[Story Book Link SignUp](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_tree-view
```

## Import component

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

## Usage

```jsx
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

![alt text](./treeView.png)

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