{"id":15735569,"url":"https://github.com/debabratapatra/angular-tree-grid","last_synced_at":"2025-04-14T22:13:21.837Z","repository":{"id":34690393,"uuid":"182482827","full_name":"debabratapatra/angular-tree-grid","owner":"debabratapatra","description":"Angular 10 Tree Grid","archived":false,"fork":false,"pushed_at":"2024-02-25T16:36:12.000Z","size":252,"stargazers_count":32,"open_issues_count":6,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T22:13:11.131Z","etag":null,"topics":["angular","angular-nested-grid","angular-sub-grid","angular-tree-component","angular-tree-grid","grid","nested-grid","opensource","sub-grid","tree-grid","tree-view"],"latest_commit_sha":null,"homepage":"https://curiouslinks.com/pages/angular-tree-grid/demo","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/debabratapatra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2019-04-21T03:01:00.000Z","updated_at":"2025-02-05T08:42:11.000Z","dependencies_parsed_at":"2024-02-24T18:30:32.417Z","dependency_job_id":"d734a78b-b5d9-40e4-ae47-b177ee623ef0","html_url":"https://github.com/debabratapatra/angular-tree-grid","commit_stats":{"total_commits":176,"total_committers":2,"mean_commits":88.0,"dds":0.005681818181818232,"last_synced_commit":"63842dafa866fb5f7edd2322e4c54a3aa4a0f071"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabratapatra%2Fangular-tree-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabratapatra%2Fangular-tree-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabratapatra%2Fangular-tree-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabratapatra%2Fangular-tree-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/debabratapatra","download_url":"https://codeload.github.com/debabratapatra/angular-tree-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248968917,"owners_count":21191162,"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","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","angular-nested-grid","angular-sub-grid","angular-tree-component","angular-tree-grid","grid","nested-grid","opensource","sub-grid","tree-grid","tree-view"],"created_at":"2024-10-04T01:14:05.569Z","updated_at":"2025-04-14T22:13:21.798Z","avatar_url":"https://github.com/debabratapatra.png","language":"TypeScript","readme":"# Angular Tree Component\n\nAngular Tree Grid to show hierarchical data. Basically if data has Parent-Child relationship. It also supports sub-grid/nested-grid. If data needs to be grouped by fields then check out this \u003ca href=\"https://github.com/debabratapatra/ngtreegrid\" target=\"_blank\"\u003engtreegrid\u003c/a\u003e Package. If header needs to be fixed/freezed and body needs to be scrollable then check out this \u003ca href=\"https://curiouslinks.com/pages/angular-fix-header-grid/demo\" target=\"_blank\"\u003eFix Header Grid\u003c/a\u003e Package.\n\n## Demo\n\nClick \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo\" target=\"_blank\"\u003ehere\u003c/a\u003e for demo. This readme is the documentation. Visit my \u003ca href=\"https://curiouslinks.com\" target=\"_blank\"\u003eWebsite\u003c/a\u003e to know other packages.\n\n\u003cdiv\u003e\n\u003cimg src=\"https://docs.curiouslinks.com/resources/images/cards/angular-tree-grid.png\" alt=\"Loading\" /\u003e\n\u003c/div\u003e\n\n## Donate :hearts:\n\nPlease consider a \u003ca href=\"https://curiouslinks.com/donate.html\" target=\"_blank\"\u003edonation\u003c/a\u003e if it is useful to you.\n\n## Version\n\nChoose the correct version for your application.\n\n| Angular | angular-tree-grid |\n| -------------- | ----------------- |\n| \u003c= 8 | 2.8.76 |\n| \u003e= 9 and \u003c= 12 | 5.0.2 |\n| \u003e= 12 | 7.0.0 |\n\n## Installation\n\n```bash\n npm i angular-tree-grid\n```\n\n## Usage\n\n### Import\n\nImport AngularTreeGridModule Module in your application module.\n\n```javascript\nimport { AngularTreeGridModule } from \"angular-tree-grid\";\n```\n\nAdd it to your imports array.\n\n```javascript\n @NgModule({\n imports: [\n AngularTreeGridModule\n ]\n })\n```\n\n### Data\n\nData should look like below. Data should have Unique field(id) and Parent field(parent) which is foreign key of the id. Ofcourse these fields are configurable. See below.\n\n```\n data= [\n { id: 1, name: 'Ashok', age: 60, parent: 0},\n { id: 2, name: 'Sam', age: 40, parent: 1},\n { id: 3, name: 'Sriya', age: 36, parent: 1},\n { id: 4, name: 'Prakash', age: 20, parent: 2},\n { id: 5, name: 'Sneha', age: 21, parent: 3},\n { id: 6, name: 'Pritam', age: 60, parent: 34},\n { id: 7, name: 'Roshan', age: 40, parent: 6},\n { id: 8, name: 'Suraj', age: 36, parent: 6},\n { id: 9, name: 'Swarup', age: 20, parent: 8},\n { id: 10, name: 'Aditya', age: 21, parent: 8},\n ];\n```\n\n### Configs\n\nBelow are configs that can be set\n\n#### Grid Configurations\n\n| Field | Type | Default | Description |\n| ----------------------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \\*id_field | string | n/a | It's a mandatory field. It is the primary key. |\n| \\*parent_id_field | string | n/a | It's a mandatory field. It is the foreign key. |\n| \\*parent_display_field | string | n/a | It's a mandatory field. It is the display field of the row that will be expanded. |\n| data_loading_text | string | 'Loading...' | Loading place holder. This will be displayed when data is empty. |\n| filter | boolean | false | It enables filter toolbar. Filter is customizable at column level. |\n| multi_select | boolean | false | It enables checkbox selection. |\n| rtl_direction | boolean | false | It is for right to left drawing. |\n| cascade_selection | boolean | false | It enables selection of children on selection of Parent and viceversa. |\n| pagination | boolean | false | It enables Pagination. |\n| per_page | number | 10 | Number of rows per page. |\n| row_draggable | boolean | false | It enables dragging and dropping of a row over another. See \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/drag_drop\"\u003eExample\u003c/a\u003e for more information. |\n| show_summary_row | boolean | false | It enables summary or footer row. Use summary_renderer at the column level |\n| load_children_on_expand | boolean | false | It enables dynamic children loading. It means children will be loaded on row-expand. See \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/dynamic_children\"\u003eExample\u003c/a\u003e for more information. |\n| subgrid | boolean | false | It enables subgrid feature. parent_id_field is not mandatory for subgrid. Add feature is disabled when it is true. See this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/subgrid\"\u003eExample\u003c/a\u003e for more information |\n| subgrid_config | Object | n/a | Configs for subgrid. See below table for this. |\n| show_parent_on_edit | boolean | true | Show Parent column On Edit. It is true by default. |\n| row_class_function | Function | n/a | Callback function for row class. A custom class can be returned which will be added to the row. |\n| row_edit_function | Function | n/a | Callback function for edit feature. Based on the return type(Boolean) of this function, edit can be enabled/disabled for a specific row. See \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/cond_row_edit\"\u003eExample\u003c/a\u003e for more information. |\n| row_delete_function | Function | n/a | Callback function for delete feature. Based on the return type(Boolean) of this function, delete can be enabled/disabled for a specific row. See \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/cond_row_edit\"\u003eExample\u003c/a\u003e for more information. |\n| actions | Object | n/a | Settings for Action column. See Below |\n| css | Object | n/a | Css class for icons. See Below |\n| columns | Array | n/a | It is an Array. If not provided all keys of the data Array will be used as Column Headers. Please find the description below |\n\n##### actions\n\n| Field | Type | Default | Description |\n| -------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| add | boolean | false | It enables add feature. |\n| edit | boolean | false | It enables edit feature. |\n| delete | boolean | false | It enables delete feature. |\n| resolve_add | boolean | false | Manually resolve add(after making call to server). It defaults to false. See \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/resolve_row_add\"\u003eexample\u003c/a\u003e for more information. |\n| resolve_edit | boolean | false | Manually resolve edit. |\n| resolve_delete | boolean | false | Manually resolve delete feature. |\n\n##### css\n\n| Field | Type | Default | Description |\n| ------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| expand_icon | string | plus | Icon for Expand icon. Font Awesome class can be given. See \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/add_edit_delete\"\u003eexample\u003c/a\u003e for more information. |\n| collapse_icon | string | minus | Icon for Collapse icon. Font Awesome class can be given. |\n| add_icon | string | plus | Icon for Add icon. Font Awesome class can be given. |\n| edit_icon | string | edit | Icon for Edit icon. Font Awesome class can be given. |\n| delete_icon | string | delete | Icon for Delete icon. Font Awesome class can be given. |\n| save_icon | string | save | Icon for Save icon. Font Awesome class can be given. |\n| cancel_icon | string | cancel | Icon for Cancel icon. Font Awesome class can be given. |\n| row_selection_class | string | n/a | CSS Class for selected row. |\n| header_class | string | n/a | CSS Class for header. |\n| table_class | string | n/a | CSS Class for Table. |\n\n##### columns\n\n| Field | Type | Default | Description |\n| --------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| name | string | n/a | key of the column. |\n| header | string | n/a | Header of the column that will be displayed in the table. |\n| width | string | n/a | Width of the column with unit(px/rem). |\n| css_class | string | n/a | Custom css class for the column. |\n| hidden | boolean | false | Show/Hide column. |\n| filter | boolean | true | Enable/Disable filter. |\n| filter_function | Function | n/a | Custom filter function. filter must be enabled for this. See this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/filter_column\"\u003eExample\u003c/a\u003e for more information. |\n| case_sensitive_filter | boolean | false | Case Sensitive/Insensitive Filter. |\n| editable | boolean | false | To make a specific column editable. By default columns are not editable. edit option needs to be true at **grid** level. |\n| renderer | Function | n/a | It is a method to render customized value for the column. See this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/basic_tree_grid\"\u003eExample\u003c/a\u003e. |\n| header_renderer | Function | n/a | It is a method to customize column header. |\n| type | string | '' | Set to 'custom' to have custom component for the column. Otherwise leave blank. |\n| component | Object | n/a | Custom View Component. Mandatory if type is custom.See this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/custom_view_component\"\u003eExample\u003c/a\u003e. |\n| editor | Object | n/a | Custom Editor Component. If given custom editor component will be used instead of default editor. See this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/custom_edit_component\"\u003eExample\u003c/a\u003e. |\n| on_component_init | Function | n/a | Callback function for the column on component init. |\n| summary_renderer | Function | n/a | Renderer for summary. See this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/summary_row\"\u003eExample\u003c/a\u003e for more information. |\n| sortable | boolean | false | Sort Column. Only available for subgrid feature. |\n\n##### subgrid_config\n\n| Field | Type | Default | Description |\n| ----------------- | ------- | ------------ | ------------------------------------------------------------------------------------ |\n| \\*id_field | string | n/a | It’s a mandatory field. It is the primary key of child data. |\n| data_loading_text | string | 'Loading...' | Loading place holder. This will be displayed when data is getting loaded. |\n| show_summary_row | boolean | false | To show summary row. It defaults to false. Use summary_renderer at the column level. |\n| columns | Array | n/a | See above columns table. |\n\n#### Example\n\n```\n configs: any = {\n id_field: 'id',\n parent_id_field: 'parent',\n columns: [\n {\n name: 'name',\n header: 'Name',\n },\n {\n name: 'age',\n header: 'Age',\n renderer: function(value) {\n return value + ' years';\n }\n }\n ]\n };\n```\n\n#### Events\n\n| Event | Arguments | Description |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| expand | **row_data:** Expanded Row \u003cbr/\u003e For Subgrid and Dynamic-Children-Loading:\u003cbr/\u003e **event** Consist of: \u003cul\u003e\u003cli\u003e **data:** Selected Row \u003c/li\u003e\u003cli\u003e **resolve:** Promise Object\u003c/li\u003e\u003c/ul\u003e | Event fires when parent is expanded. For Subgrid, see this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/subgrid\"\u003eExample\u003c/a\u003e. For Dynamic-Children-Loading, see this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/dynamic_children\"\u003eExample\u003c/a\u003e |\n| collapse | **row_data:** Collapsed Row | Event fires when parent is collapsed. |\n| cellclick | **event** Consist of: \u003cul\u003e\u003cli\u003e **row:** Selected Row \u003c/li\u003e\u003cli\u003e **column:** Selected Column\u003c/li\u003e\u003cli\u003e **event:** Selected Column\u003c/li\u003e\u003c/ul\u003e | Event fires when a child cell is clicked. |\n| rowselect | **event** Consist of: \u003cul\u003e\u003cli\u003e **data:** Selected Row \u003c/li\u003e\u003cli\u003e **event:** Event Object\u003c/li\u003e\u003c/ul\u003e | Event fires when a row is selected. |\n| rowdeselect | **event** Consist of: \u003cul\u003e\u003cli\u003e **data:** Selected Row \u003c/li\u003e\u003cli\u003e **event:** Event Object\u003c/li\u003e\u003c/ul\u003e | Event fires when a row is deselected. |\n| rowselectall | **event:** Event Object | Event fires when select-all checkbox is checked. |\n| rowdeselectall | **event:** Event Object | Event fires when select-all checkbox is unchecked. |\n| rowsave | **event** Consist of: \u003cul\u003e\u003cli\u003e **data:** Selected Row \u003c/li\u003e\u003cli\u003e **event:** Event Object\u003c/li\u003e\u003c/ul\u003e | Event fires when a row is saved. |\n| rowdelete | **event** Consist of: \u003cul\u003e\u003cli\u003e **data:** Selected Row \u003c/li\u003e\u003cli\u003e **event:** Event Object\u003c/li\u003e\u003c/ul\u003e | Event fires when a row is deleted. |\n| rowadd | **event** Consist of: \u003cul\u003e\u003cli\u003e **data:** Selected Row \u003c/li\u003e\u003cli\u003e **event:** Event Object\u003c/li\u003e\u003c/ul\u003e | Event fires when a row is added. |\n\n### HTML\n\nAdd below node to your html.\n\n```\n \u003cdb-angular-tree-grid [data]=\"data\" [configs]=\"configs\"\u003e\u003c/db-angular-tree-grid\u003e\n```\n\n#### Functions\n\nAngularTreeGridComponent has some very useful functions. Below is an example how to call.\n\n```\n @Component({\n selector: 'app-basic-tree-grid',\n template: `\n \u003cbutton (click)=\"collapseAll()\"\u003eCollapse All\u003c/button\u003e\u003cbutton (click)=\"expandAll()\"\u003eExpand All\u003c/button\u003e\n \u003cp\u003e\u003c/p\u003e\n \u003cdb-angular-tree-grid #angularGrid [data]=\"data\" [configs]=\"configs\"\u003e\u003c/db-angular-tree-grid\u003e\n `\n })\n export class BasicTreeGridComponent {\n @ViewChild('angularGrid') angularGrid: AngularTreeGridComponent;\n\n expandAll() {\n this.angularGrid.expandAll();\n }\n collapseAll() {\n this.angularGrid.collapseAll();\n }\n }\n```\n\n| Function | Arguments | Description |\n| ------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |\n| expandAll | None | Expands all rows |\n| collapseAll | None | Collapses all rows |\n| selectAll | None | Selects all rows |\n| deSelectAll | None | DeSelects all rows |\n| expandRow | \u003cul\u003e\u003cli\u003e id: Row id(Primary Key) \u003c/li\u003e\u003cli\u003e suppress_event: Suppress expand event. It defaults to false.\u003c/li\u003e\u003c/ul\u003e | Expands a specific row. see this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/specific_expand_collapse\"\u003eExample\u003c/a\u003e. |\n| collapseRow | \u003cul\u003e\u003cli\u003e id: Row id(Primary Key) \u003c/li\u003e\u003cli\u003e suppress_event: Suppress expand event. It defaults to false.\u003c/li\u003e\u003c/ul\u003e | Collapses a specific row. see this \u003ca href=\"https://curiouslinks.com/pages/angular-tree-grid/demo/examples/specific_expand_collapse\"\u003eExample\u003c/a\u003e. |\n| disableRowSelection | id: Row id(Primary Key) | Disables Row Selection for the specific Row id. |\n| enableRowSelection | id: Row id(Primary Key) | Enables Row Selection for the specific Row id. |\n| disableRowExpand | id: Row id(Primary Key) | Disables Row Expand for the specific Row id. |\n| enableRowExpand | id: Row id(Primary Key) | Enables Row Expand for the specific Row id. |\n| export | name: String | Exports table content to csv. |\n\n### Can I hire you guys?\n\nYes. Please contact us at \u003ca href=\"mailto:debabratapatra12@gmail.com\"\u003edebabratapatra12@gmail.com\u003c/a\u003e for any professional support. We will be happy to work with you!\n\n## License\n\nThis project is licensed under the MIT license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebabratapatra%2Fangular-tree-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdebabratapatra%2Fangular-tree-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebabratapatra%2Fangular-tree-grid/lists"}