Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/debabratapatra/angular-tree-grid

Angular 10 Tree Grid
https://github.com/debabratapatra/angular-tree-grid

angular angular-nested-grid angular-sub-grid angular-tree-component angular-tree-grid grid nested-grid opensource sub-grid tree-grid tree-view

Last synced: 2 months ago
JSON representation

Angular 10 Tree Grid

Host: GitHub
URL: https://github.com/debabratapatra/angular-tree-grid
Owner: debabratapatra
License: mit
Created: 2019-04-21T03:01:00.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-02-25T16:36:12.000Z (10 months ago)
Last Synced: 2024-04-25T10:01:08.713Z (8 months ago)
Topics: angular, angular-nested-grid, angular-sub-grid, angular-tree-component, angular-tree-grid, grid, nested-grid, opensource, sub-grid, tree-grid, tree-view
Language: TypeScript
Homepage: https://curiouslinks.com/pages/angular-tree-grid/demo
Size: 246 KB
Stars: 31
Watchers: 5
Forks: 17
Open Issues: 6
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Angular Tree Component

Angular 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 ngtreegrid Package. If header needs to be fixed/freezed and body needs to be scrollable then check out this Fix Header Grid Package.

## Demo

Click here for demo. This readme is the documentation. Visit my Website to know other packages.

## Donate :hearts:

Please consider a donation if it is useful to you.

## Version

Choose the correct version for your application.

| Angular | angular-tree-grid |
| -------------- | ----------------- |
| <= 8 | 2.8.76 |
| >= 9 and <= 12 | 5.0.2 |
| >= 12 | 7.0.0 |

## Installation

```bash
npm i angular-tree-grid
```

## Usage

### Import

Import AngularTreeGridModule Module in your application module.

```javascript
import { AngularTreeGridModule } from "angular-tree-grid";
```

Add it to your imports array.

```javascript
@NgModule({
imports: [
AngularTreeGridModule
]
})
```

### Data

Data 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.

```
data= [
{ id: 1, name: 'Ashok', age: 60, parent: 0},
{ id: 2, name: 'Sam', age: 40, parent: 1},
{ id: 3, name: 'Sriya', age: 36, parent: 1},
{ id: 4, name: 'Prakash', age: 20, parent: 2},
{ id: 5, name: 'Sneha', age: 21, parent: 3},
{ id: 6, name: 'Pritam', age: 60, parent: 34},
{ id: 7, name: 'Roshan', age: 40, parent: 6},
{ id: 8, name: 'Suraj', age: 36, parent: 6},
{ id: 9, name: 'Swarup', age: 20, parent: 8},
{ id: 10, name: 'Aditya', age: 21, parent: 8},
];
```

### Configs

Below are configs that can be set

#### Grid Configurations

| Field | Type | Default | Description |
| ----------------------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| \*id_field | string | n/a | It's a mandatory field. It is the primary key. |
| \*parent_id_field | string | n/a | It's a mandatory field. It is the foreign key. |
| \*parent_display_field | string | n/a | It's a mandatory field. It is the display field of the row that will be expanded. |
| data_loading_text | string | 'Loading...' | Loading place holder. This will be displayed when data is empty. |
| filter | boolean | false | It enables filter toolbar. Filter is customizable at column level. |
| multi_select | boolean | false | It enables checkbox selection. |
| rtl_direction | boolean | false | It is for right to left drawing. |
| cascade_selection | boolean | false | It enables selection of children on selection of Parent and viceversa. |
| pagination | boolean | false | It enables Pagination. |
| per_page | number | 10 | Number of rows per page. |
| row_draggable | boolean | false | It enables dragging and dropping of a row over another. See Example for more information. |
| show_summary_row | boolean | false | It enables summary or footer row. Use summary_renderer at the column level |
| load_children_on_expand | boolean | false | It enables dynamic children loading. It means children will be loaded on row-expand. See Example for more information. |
| 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 Example for more information |
| subgrid_config | Object | n/a | Configs for subgrid. See below table for this. |
| show_parent_on_edit | boolean | true | Show Parent column On Edit. It is true by default. |
| row_class_function | Function | n/a | Callback function for row class. A custom class can be returned which will be added to the row. |
| 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 Example for more information. |
| 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 Example for more information. |
| actions | Object | n/a | Settings for Action column. See Below |
| css | Object | n/a | Css class for icons. See Below |
| 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 |

##### actions

| Field | Type | Default | Description |
| -------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| add | boolean | false | It enables add feature. |
| edit | boolean | false | It enables edit feature. |
| delete | boolean | false | It enables delete feature. |
| resolve_add | boolean | false | Manually resolve add(after making call to server). It defaults to false. See example for more information. |
| resolve_edit | boolean | false | Manually resolve edit. |
| resolve_delete | boolean | false | Manually resolve delete feature. |

##### css

| Field | Type | Default | Description |
| ------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| expand_icon | string | plus | Icon for Expand icon. Font Awesome class can be given. See example for more information. |
| collapse_icon | string | minus | Icon for Collapse icon. Font Awesome class can be given. |
| add_icon | string | plus | Icon for Add icon. Font Awesome class can be given. |
| edit_icon | string | edit | Icon for Edit icon. Font Awesome class can be given. |
| delete_icon | string | delete | Icon for Delete icon. Font Awesome class can be given. |
| save_icon | string | save | Icon for Save icon. Font Awesome class can be given. |
| cancel_icon | string | cancel | Icon for Cancel icon. Font Awesome class can be given. |
| row_selection_class | string | n/a | CSS Class for selected row. |
| header_class | string | n/a | CSS Class for header. |
| table_class | string | n/a | CSS Class for Table. |

##### columns

| Field | Type | Default | Description |
| --------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | string | n/a | key of the column. |
| header | string | n/a | Header of the column that will be displayed in the table. |
| width | string | n/a | Width of the column with unit(px/rem). |
| css_class | string | n/a | Custom css class for the column. |
| hidden | boolean | false | Show/Hide column. |
| filter | boolean | true | Enable/Disable filter. |
| filter_function | Function | n/a | Custom filter function. filter must be enabled for this. See this Example for more information. |
| case_sensitive_filter | boolean | false | Case Sensitive/Insensitive Filter. |
| editable | boolean | false | To make a specific column editable. By default columns are not editable. edit option needs to be true at **grid** level. |
| renderer | Function | n/a | It is a method to render customized value for the column. See this Example. |
| header_renderer | Function | n/a | It is a method to customize column header. |
| type | string | '' | Set to 'custom' to have custom component for the column. Otherwise leave blank. |
| component | Object | n/a | Custom View Component. Mandatory if type is custom.See this Example. |
| editor | Object | n/a | Custom Editor Component. If given custom editor component will be used instead of default editor. See this Example. |
| on_component_init | Function | n/a | Callback function for the column on component init. |
| summary_renderer | Function | n/a | Renderer for summary. See this Example for more information. |
| sortable | boolean | false | Sort Column. Only available for subgrid feature. |

##### subgrid_config

| Field | Type | Default | Description |
| ----------------- | ------- | ------------ | ------------------------------------------------------------------------------------ |
| \*id_field | string | n/a | It’s a mandatory field. It is the primary key of child data. |
| data_loading_text | string | 'Loading...' | Loading place holder. This will be displayed when data is getting loaded. |
| show_summary_row | boolean | false | To show summary row. It defaults to false. Use summary_renderer at the column level. |
| columns | Array | n/a | See above columns table. |

#### Example

```
configs: any = {
id_field: 'id',
parent_id_field: 'parent',
columns: [
{
name: 'name',
header: 'Name',
},
{
name: 'age',
header: 'Age',
renderer: function(value) {
return value + ' years';
}
}
]
};
```

#### Events

| Event | Arguments | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| expand | **row_data:** Expanded Row
For Subgrid and Dynamic-Children-Loading:
**event** Consist of:

**data:** Selected Row

**resolve:** Promise Object

**row:** Selected Row

**column:** Selected Column

**event:** Selected Column

| Event fires when a child cell is clicked. |
| rowselect | **event** Consist of:

**data:** Selected Row

**event:** Event Object

| Event fires when a row is selected. |
| rowdeselect | **event** Consist of:

**data:** Selected Row

**event:** Event Object

**data:** Selected Row

**event:** Event Object

| Event fires when a row is saved. |
| rowdelete | **event** Consist of:

**data:** Selected Row

**event:** Event Object

| Event fires when a row is deleted. |
| rowadd | **event** Consist of:

**data:** Selected Row

**event:** Event Object

| Event fires when a row is added. |

### HTML

Add below node to your html.

```

```

#### Functions

AngularTreeGridComponent has some very useful functions. Below is an example how to call.

```
@Component({
selector: 'app-basic-tree-grid',
template: `
Collapse AllExpand All

`
})
export class BasicTreeGridComponent {
@ViewChild('angularGrid') angularGrid: AngularTreeGridComponent;

expandAll() {
this.angularGrid.expandAll();
}
collapseAll() {
this.angularGrid.collapseAll();
}
}
```

| Function | Arguments | Description |
| ------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| expandAll | None | Expands all rows |
| collapseAll | None | Collapses all rows |
| selectAll | None | Selects all rows |
| deSelectAll | None | DeSelects all rows |
| expandRow |

id: Row id(Primary Key)

suppress_event: Suppress expand event. It defaults to false.

| Expands a specific row. see this Example. |
| collapseRow |

id: Row id(Primary Key)

suppress_event: Suppress expand event. It defaults to false.

### Can I hire you guys?

Yes. Please contact us at [email protected] for any professional support. We will be happy to work with you!

## License

This project is licensed under the MIT license.