{"id":15735306,"url":"https://github.com/debabratapatra/ngtreegrid","last_synced_at":"2025-05-06T20:41:52.021Z","repository":{"id":65458375,"uuid":"170292684","full_name":"debabratapatra/ngtreegrid","owner":"debabratapatra","description":"Angular Tree Grid","archived":false,"fork":false,"pushed_at":"2024-03-03T06:23:19.000Z","size":245,"stargazers_count":22,"open_issues_count":1,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-28T09:03:34.141Z","etag":null,"topics":["angular","angular-tree","angular-tree-component","angular4","angular5","angular6","angular7","grid","grid-grouping","opensource","tree-grid","tree-grid-directive","tree-view"],"latest_commit_sha":null,"homepage":"https://debabratapatra.github.io/pages/ngtreegrid/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-02-12T09:46:50.000Z","updated_at":"2023-03-01T07:09:26.000Z","dependencies_parsed_at":"2024-06-21T17:50:51.921Z","dependency_job_id":"785da48d-9208-49bb-89fc-71daab77a9a6","html_url":"https://github.com/debabratapatra/ngtreegrid","commit_stats":{"total_commits":272,"total_committers":2,"mean_commits":136.0,"dds":0.003676470588235281,"last_synced_commit":"c9cb79331f9263d38f71b6f7c76d4e9a25b78c74"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabratapatra%2Fngtreegrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabratapatra%2Fngtreegrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabratapatra%2Fngtreegrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debabratapatra%2Fngtreegrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/debabratapatra","download_url":"https://codeload.github.com/debabratapatra/ngtreegrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252768308,"owners_count":21801367,"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-tree","angular-tree-component","angular4","angular5","angular6","angular7","grid","grid-grouping","opensource","tree-grid","tree-grid-directive","tree-view"],"created_at":"2024-10-04T01:12:10.129Z","updated_at":"2025-05-06T20:41:51.996Z","avatar_url":"https://github.com/debabratapatra.png","language":"TypeScript","readme":"# ngtreegrid\n\nAngular 17 Multi level Tree Grid. Simple, Light Weight and dependency free. Basically it groups data by a field or multiple fields. For hierarchical data (where there is a Parent-Child relationship), check out this\n\u003ca href=\"https://github.com/debabratapatra/angular-tree-grid\"\u003eAngular Tree Grid\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\"\u003eAngular Fix Header Grid\u003c/a\u003e Package.\n\n## Demo\n\nClick \u003ca href=\"https://curiouslinks.com/pages/ngtreegrid/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/ngtreegrid.png\" alt=\"Angular Tree Grid\" /\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 | ngtreegrid |\n| ------- | ---------- |\n| \u003c= 8 | 3.3.8 |\n| \u003e= 9 | 4.0.5 |\n| \u003e= 12 | 6.0.0 |\n\n## Installation\n\n```bash\n npm i ngtreegrid\n```\n\n## Usage\n\n### Import\n\nImport NgtreegridModule Module in your application module.\n\n```javascript\nimport { NgtreegridModule } from \"ngtreegrid\";\n```\n\nAdd it to your imports array.\n\n```javascript\n @NgModule({\n imports: [\n NgtreegridModule\n ]\n })\n```\n\n### Data\n\nFormat of the data should be like below.\n\n```\n products: any[] = [\n { product_type: 'Book', name: 'Angular', price: 90 },\n { product_type: 'Book', name: 'Python', price: 70 },\n { product_type: 'Book', name: 'PHP', price: 80 },\n { product_type: 'Book', name: 'Java', price: 50 },\n { product_type: 'Electronic', name: 'Mouse', price: 50 },\n { product_type: 'Electronic', name: 'Earphone', price: 20 },\n { product_type: 'Electronic', name: 'Speaker', price: 45 },\n { product_type: 'Electronic', name: 'Hard Drive', price: 55 }\n];\n```\n\n### Configs\n\n#### Grid Configurations\n\n| Field | Type | Default | Description |\n| ------------------- | ------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \\*group_by | string/Array | n/a | t's a mandatory field. It is a column key. It can be an array of columns for multilevel group_by. |\n| group_by_header | string/Array | n/a | Header for the GroupBy Column. It can be an array of Column Headers. |\n| group_by_width | string/Array | 'auto' | Width of the GroupBy Column. It can be an array of GroupBy Column widths. |\n| action_column_width | string | 50px | Width of the Action Column. |\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| multi_select_width | string | 'auto' | Width of multi-select column. |\n| row_select_function | Function | n/a | Callback function for row Selection. Based on the return type(Boolean) of this function, Selection can be enabled/disabled for a specific row. |\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/ngtreegrid/demo/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/ngtreegrid/demo/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 | Object | 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/ngtreegrid/demo/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_class | string | plus | Icon class for Expand icon. Font Awesome class can be given. |\n| collapse_class | string | minus | Icon class for Collapse icon. Font Awesome class can be given. |\n| add_class | string | plus | Icon class for Add icon. Font Awesome class can be given. |\n| edit_class | string | edit | Icon class for Edit icon. Font Awesome class can be given. |\n| delete_class | string | delete | Icon class for Delete icon. Font Awesome class can be given. |\n| save_class | string | save | Icon class for Save icon. Font Awesome class can be given. |\n| cancel_class | string | cancel | Icon class 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| parent_class | string | n/a | Class for parent(group by) row. |\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| hidden | boolean | false | Show/Hide column. |\n| filter | boolean | true | Enable/Disable 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| sortable | boolean | false | To make a specific column sortable. |\n| renderer | Function | n/a | It is a method to render customized value for the column. See this \u003ca href=\"https://curiouslinks.com/pages/ngtreegrid/demo/basic_tree_grid\"\u003eExample\u003c/a\u003e. |\n| group_aggregator | Function | n/a | It is a method which can be used to show data at the parent level for the corresponding column. (See \u003ca href=\"https://curiouslinks.com/pages/ngtreegrid/demo\"\u003eExample\u003c/a\u003e. for better understanding). This field for the parent will be left blank if not provided. |\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/ngtreegrid/demo/custom_view_component\"\u003eExample\u003c/a\u003e. |\n| group_component | Object | n/a | Custom Group Component. It has same setting as Column |\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/ngtreegrid/demo/custom_edit_component\"\u003eExample\u003c/a\u003e. |\n| on_component_init | Function | n/a | Callback function for the column on component init. |\n\n#### Basic Example\n\n```\n configs: any = {\n 'group_by': 'product_type',\n 'group_by_header': 'Product Type',\n 'group_by_width': '100px',\n 'columns': [{\n 'header': 'Product Name',\n 'name': 'name',\n 'sortable': false\n }, {\n 'header': 'Price',\n 'name': 'price',\n 'width': '200px',\n 'group_aggregator': (array) =\u003e {\n const prices = array.map((item) =\u003e item.price);\n return '$' + prices.reduce((acc, item) =\u003e acc + item);\n }\n }]\n};\n```\n\n### HTML\n\nAdd below node to your html.\n\n```\n \u003cdb-ngtreegrid [data]=\"products\" [configs]=\"configs\"\u003e\u003c/db-ngtreegrid\u003e\n```\n\n### Events\n\n| Event | Arguments | Description |\n| -------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------- |\n| expand | **row_data:** Expanded Row | Event fires when parent is expanded. |\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\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### Can I hire you guys?\n\nYes. Please contact us at \u003ca href=\"mailto:debabratapatra12@gmail.com\"\u003edebabratapatra12@gmail.com\u003c/a\u003e. 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%2Fngtreegrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdebabratapatra%2Fngtreegrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebabratapatra%2Fngtreegrid/lists"}