https://github.com/flexiui-labs/flexi-treeview
A lightweight, customizable Angular component for displaying hierarchical data in a tree structure.
https://github.com/flexiui-labs/flexi-treeview
angular treeview
Last synced: 11 months ago
JSON representation
A lightweight, customizable Angular component for displaying hierarchical data in a tree structure.
- Host: GitHub
- URL: https://github.com/flexiui-labs/flexi-treeview
- Owner: FlexiUI-labs
- Created: 2025-03-11T03:29:27.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-11T21:02:44.000Z (about 1 year ago)
- Last Synced: 2025-07-14T12:07:41.327Z (11 months ago)
- Topics: angular, treeview
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/stackblitz-starters-cezmebmc?file=package.json
- Size: 190 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
[](https://stackblitz.com/edit/stackblitz-starters-cezmebmc?file=src%2Fmain.ts)
## 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
```sh
npm install flexi-treeview
```
## Usage
### Import the Module
```ts
import { FlexiTreeviewComponent } from 'flexi-treeview';
@Component({
selector: 'app-root',
imports: [FlexiTreeviewComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
```
### Add to Template
```html
```
### Define Tree Data
```ts
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
}
]
}
];
```
```ts
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.