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

    npm i angular-tree-grid

Usage

Import

Import AngularTreeGridModule Module in your application module.

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

Add it to your imports array.

    @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 | Event fires when parent is expanded. For Subgrid, see this Example. For Dynamic-Children-Loading, see this Example | | collapse | row_data: Collapsed Row | Event fires when parent is collapsed. | | cellclick | event Consist of: 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 | Event fires when a row is deselected. | | rowselectall | event: Event Object | Event fires when select-all checkbox is checked. | | rowdeselectall | event: Event Object | Event fires when select-all checkbox is unchecked. | | rowsave | event Consist of: 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.

  <db-angular-tree-grid [data]="data" [configs]="configs"></db-angular-tree-grid>

Functions

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

    @Component({
      selector: 'app-basic-tree-grid',
      template: `
        <button (click)="collapseAll()">Collapse All</button><button (click)="expandAll()">Expand All</button>
        <p></p>
        <db-angular-tree-grid #angularGrid [data]="data" [configs]="configs"></db-angular-tree-grid>
      `
    })
    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. | Collapses a specific row. see this Example. | | disableRowSelection | id: Row id(Primary Key) | Disables Row Selection for the specific Row id. | | enableRowSelection | id: Row id(Primary Key) | Enables Row Selection for the specific Row id. | | disableRowExpand | id: Row id(Primary Key) | Disables Row Expand for the specific Row id. | | enableRowExpand | id: Row id(Primary Key) | Enables Row Expand for the specific Row id. | | export | name: String | Exports table content to csv. |

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.