{"id":26328666,"url":"https://github.com/flexiui-labs/flexi-treeview","last_synced_at":"2025-08-03T23:34:32.310Z","repository":{"id":281771435,"uuid":"946375730","full_name":"FlexiUI-labs/flexi-treeview","owner":"FlexiUI-labs","description":"A lightweight, customizable Angular component for displaying hierarchical data in a tree structure.","archived":false,"fork":false,"pushed_at":"2025-06-11T21:02:44.000Z","size":195,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-14T12:07:41.327Z","etag":null,"topics":["angular","treeview"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/stackblitz-starters-cezmebmc?file=package.json","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FlexiUI-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-11T03:29:27.000Z","updated_at":"2025-06-11T21:00:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"0ad44885-a01b-4fb7-a1e0-c28e1e77f3bd","html_url":"https://github.com/FlexiUI-labs/flexi-treeview","commit_stats":null,"previous_names":["flexiui-labs/flexi-treeview"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/FlexiUI-labs/flexi-treeview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-treeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-treeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-treeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-treeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FlexiUI-labs","download_url":"https://codeload.github.com/FlexiUI-labs/flexi-treeview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-treeview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268628457,"owners_count":24280966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","treeview"],"created_at":"2025-03-15T21:18:09.500Z","updated_at":"2025-08-03T23:34:32.278Z","avatar_url":"https://github.com/FlexiUI-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flexi Treeview\n\nFlexi 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.\n\n## Live Demo\n\n[![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://stackblitz.com/edit/stackblitz-starters-cezmebmc?file=src%2Fmain.ts)\n\n## Features\n\n- 🛠 **Dynamic Tree Structure** - Supports parent-child relationships with nested levels.\n- ✅ **Checkbox Selection** - Allows selecting individual nodes and handling indeterminate states.\n- 🔍 **Search Functionality** - Quickly find nodes within the tree.\n- 📏 **Customizable UI** - Adjust size, colors, and styling.\n- 🎨 **Dark \u0026 Light Mode Support** - Adapts to the selected theme.\n- 🔄 **Expand/Collapse All** - Expand or collapse all nodes easily.\n- 🖱 **Action Buttons** - Edit, delete, and detail buttons for nodes.\n- 🔄 **Live Refresh** - Refresh the tree dynamically.\n\n## Installation\n\n```sh\nnpm install flexi-treeview\n```\n\n## Usage\n\n### Import the Module\n\n```ts\nimport { FlexiTreeviewComponent } from 'flexi-treeview';\n\n@Component({\n  selector: 'app-root',\n  imports: [FlexiTreeviewComponent],\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.css'\n})\n```\n\n### Add to Template\n\n```html\n\u003cflexi-treeview\n    [data]=\"treeData\"\n    [treeviewTitle]=\"'Categories'\"\n    [themeClass]=\"'light'\"\n    [showCheckbox]=\"true\"\n    [showSearch]=\"true\"\n    [showDetailButton]=\"true\"\n    (onSelected)=\"handleSelectedNodes($event)\"\n    (onEdit)=\"handleEditNode($event)\"\n    (onDelete)=\"handleDeleteNode($event)\"\n    (onRefresh)=\"handleRefresh()\"\n    detailRouterLink=\"/products\"\u003e\n\u003c/flexi-treeview\u003e\n```\n\n### Define Tree Data\n\n```ts\ntreeData: FlexiTreeNode[] = [\n    {\n      id: '1',\n      name: 'Parent Node',\n      code: 'P1',\n      isMain: true,\n      indeterminate: false,\n      selected: false,\n      expanded: true,\n      description: '',\n      originalData: null,\n      children: [\n        {\n          id: '2',\n          name: 'Child Node 1',\n          code: 'C1',\n          isMain: false,\n          indeterminate: false,\n          selected: false,\n          expanded: true,\n          description: '',\n          originalData: null\n        },\n        {\n          id: '3',\n          name: 'Child Node 2',\n          code: 'C2',\n          isMain: false,\n          indeterminate: false,\n          selected: false,\n          expanded: true,\n          description: '',\n          originalData: null\n        }\n      ]\n    }\n  ];\n```\n\n```ts\nhandleSelectedNodes(selectedNodes: FlexiTreeNode[]) {\n  console.log('Selected Nodes:', selectedNodes);\n}\n\nhandleEditNode(node: FlexiTreeNode) {\n  console.log('Edit Node:', node);\n}\n\nhandleDeleteNode(node: FlexiTreeNode) {\n  console.log('Delete Node:', node);\n}\n\nhandleRefresh() {\n  console.log('Treeview refreshed');\n}\n```\n\n## API\n\n| Input Property      | Type                | Default | Description |\n|---------------------|--------------------|---------|-------------|\n| `data`             | `FlexiTreeNode[]`   | `[]`  | The tree node data array. |\n| `treeviewTitle`    | `string`            | `''`   | Title of the treeview. |\n| `showCheckbox`     | `boolean`           | `false` | Show checkboxes for node selection. |\n| `showEditButton`   | `boolean`           | `true`  | Show the edit button for each node. |\n| `showDeleteButton` | `boolean`           | `true`  | Show the delete button for each node. |\n| `showDetailButton` | `boolean`           | `false` | Show the detail button for each node. |\n| `showSearch`       | `boolean`           | `true`  | Enable search functionality. |\n| `showActions`      | `boolean`           | `true`  | Show action buttons for nodes. |\n| `width`           | `string`            | `'100%'` | Width of the treeview component. |\n| `height`          | `string`            | `'100%'` | Height of the treeview component. |\n| `fontSize`        | `string`            | `'13px'` | Font size of tree nodes. |\n| `btnSize`         | `FlexiButtonSizeType` | `'small'` | Size of action buttons. |\n| `checkboxSize`    | `string`            | `'1.4em'` | Size of checkboxes. |\n| `actionBtnPosition` | `'left' | 'right'` | `'right'` | Position of action buttons. |\n| `themeClass`      | `'light' | 'dark'`  | `'light'` | Theme of the treeview component. |\n| `loading`         | `boolean`           | `false` | Show loading indicator. |\n| `expend`         | `boolean`           | `true` | Expand all nodes initially. |\n| `detailRouterLink` | `string`           | `''` | Router link for detail view. |\n| `language`        | `'en' | 'tr'`       | `'en'` | Language setting for labels. |\n\n\n## Events\n\n| Event       | Output Type          | Description |\n|------------|--------------------|-------------|\n| `onSelected` | `FlexiTreeNode[]` | Emits when nodes are selected. |\n| `onEdit`     | `FlexiTreeNode`   | Emits when a node is edited. |\n| `onDelete`   | `FlexiTreeNode`   | Emits when a node is deleted. |\n| `onRefresh`  | `void`            | Emits when the refresh button is clicked. |\n\n## License\n\nMIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexiui-labs%2Fflexi-treeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflexiui-labs%2Fflexi-treeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexiui-labs%2Fflexi-treeview/lists"}