Flexi Treeview

Flexi Treeview is a customizable and flexible Angular component for displaying hierarchical data in a tree structure. It supports selection, expansion, search, and actions like edit, delete, and refresh.

Live Demo

Features

• 🛠 Dynamic Tree Structure - Supports parent-child relationships with nested levels.
• ✅ Checkbox Selection - Allows selecting individual nodes and handling indeterminate states.
• 🔍 Search Functionality - Quickly find nodes within the tree.
• 📏 Customizable UI - Adjust size, colors, and styling.
• 🎨 Dark & Light Mode Support - Adapts to the selected theme.
• 🔄 Expand/Collapse All - Expand or collapse all nodes easily.
• 🖱 Action Buttons - Edit, delete, and detail buttons for nodes.
• 🔄 Live Refresh - Refresh the tree dynamically.

Installation

npm install flexi-treeview

Usage

Import the Module

import { FlexiTreeviewComponent } from 'flexi-treeview';

@Component({
  selector: 'app-root',
  imports: [FlexiTreeviewComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

Add to Template

<flexi-treeview
    [data]="treeData"
    [treeviewTitle]="'Categories'"
    [themeClass]="'light'"
    [showCheckbox]="true"
    [showSearch]="true"
    [showDetailButton]="true"
    (onSelected)="handleSelectedNodes($event)"
    (onEdit)="handleEditNode($event)"
    (onDelete)="handleDeleteNode($event)"
    (onRefresh)="handleRefresh()"
    detailRouterLink="/products">
</flexi-treeview>

Define Tree Data

treeData: FlexiTreeNode[] = [
    {
      id: '1',
      name: 'Parent Node',
      code: 'P1',
      isMain: true,
      indeterminate: false,
      selected: false,
      expanded: true,
      description: '',
      originalData: null,
      children: [
        {
          id: '2',
          name: 'Child Node 1',
          code: 'C1',
          isMain: false,
          indeterminate: false,
          selected: false,
          expanded: true,
          description: '',
          originalData: null
        },
        {
          id: '3',
          name: 'Child Node 2',
          code: 'C2',
          isMain: false,
          indeterminate: false,
          selected: false,
          expanded: true,
          description: '',
          originalData: null
        }
      ]
    }
  ];

handleSelectedNodes(selectedNodes: FlexiTreeNode[]) {
  console.log('Selected Nodes:', selectedNodes);
}

handleEditNode(node: FlexiTreeNode) {
  console.log('Edit Node:', node);
}

handleDeleteNode(node: FlexiTreeNode) {
  console.log('Delete Node:', node);
}

handleRefresh() {
  console.log('Treeview refreshed');
}

API

| Input Property | Type | Default | Description | |---------------------|--------------------|---------|-------------| | data | FlexiTreeNode[] | [] | The tree node data array. | | treeviewTitle | string | '' | Title of the treeview. | | showCheckbox | boolean | false | Show checkboxes for node selection. | | showEditButton | boolean | true | Show the edit button for each node. | | showDeleteButton | boolean | true | Show the delete button for each node. | | showDetailButton | boolean | false | Show the detail button for each node. | | showSearch | boolean | true | Enable search functionality. | | showActions | boolean | true | Show action buttons for nodes. | | width | string | '100%' | Width of the treeview component. | | height | string | '100%' | Height of the treeview component. | | fontSize | string | '13px' | Font size of tree nodes. | | btnSize | FlexiButtonSizeType | 'small' | Size of action buttons. | | checkboxSize | string | '1.4em' | Size of checkboxes. | | actionBtnPosition | 'left' | 'right' | 'right' | Position of action buttons. | | themeClass | 'light' | 'dark' | 'light' | Theme of the treeview component. | | loading | boolean | false | Show loading indicator. | | expend | boolean | true | Expand all nodes initially. | | detailRouterLink | string | '' | Router link for detail view. | | language | 'en' | 'tr' | 'en' | Language setting for labels. |

Events

| Event | Output Type | Description | |------------|--------------------|-------------| | onSelected | FlexiTreeNode[] | Emits when nodes are selected. | | onEdit | FlexiTreeNode | Emits when a node is edited. | | onDelete | FlexiTreeNode | Emits when a node is deleted. | | onRefresh | void | Emits when the refresh button is clicked. |

License

MIT License.