ngtreegrid

Angular Tree Grid. Simple, Light Weight and dependency free.

Demo

Click here for demo.

Installation

    npm i ngtreegrid

Usage

Import

Import NgtreegridModule Module in your application module.

  import { NgtreegridModule } from 'ngtreegrid';

Add it to your imports array.

    @NgModule({
      imports: [
        NgtreegridModule
      ]
    })

Data

Format of the data should be like below.

  products: any[] = [
      { product_type: 'Book', name: 'Angular', price: 90 },
      { product_type: 'Book', name: 'Python', price: 70 },
      { product_type: 'Book', name: 'PHP', price: 80 },
      { product_type: 'Book', name: 'Java', price: 50 },
      { product_type: 'Electronic', name: 'Mouse', price: 50 },
      { product_type: 'Electronic', name: 'Earphone', price: 20 },
      { product_type: 'Electronic', name: 'Speaker', price: 45 },
      { product_type: 'Electronic', name: 'Hard Drive', price: 55 }
];

Configs

1. group_by(Mandatory): It's a mandatory field. It is a column key.
2. group_by_header(Optional): Header for the GroupBy Column.
3. group_by_width(Optional): Width of the GroupBy Column.
4. data_loading_text(Optional): Loading place holder. This will be displayed when data is empty.
5. actions(Optional): Action column.
   • add: Boolean for add feature. It defaults to false.
   • edit: Boolean for edit feature. It defaults to false.
   • delete: Boolean for delete feature. It defaults to false.
6. css(Optional): Css class for icons
   • expand_class(Optional): Icon class for Expand icon. Font Awesome class can be given.
   • collapse_class(Optional): Icon class for Collapse icon. Font Awesome class can be given.
   • add_class(Optional): Icon class for Add icon. Font Awesome class can be given.
   • edit_class(Optional): Icon class for Edit icon. Font Awesome class can be given.
   • delete_class(Optional): Icon class for Delete icon. Font Awesome class can be given.
   • save_class(Optional): Icon class for Save icon. Font Awesome class can be given.
   • cancel_class(Optional): Icon class for Cancel icon. Font Awesome class can be given.
7. columns(Optional): It is an object. If not provided all keys of the data Array will be used as Column Headers. Please find the description below.
   • name: key of the column
   • header: Header of the column that will be displayed in the table
   • width: Width of the column
   • hidden: Show/Hide column. It defaults to false.
   • sortable: False to disable sorting of this column. By default columns are sortable.
   • editable: To make a specific column editable. By default columns are not editable. edit option needs to be true at grid level.
   • group_aggregator: It is a method which can be used to show data at the parent level for the corresponding column. (See example for better understanding). This field for the parent will be left blank if not provided.
   • type: Set to 'custom' to have custom component for the column. Otherwise leave blank.
   • edit_type: Set to 'custom' to have custom editor component for the column. Only if editable is true for the column. Default editor is a input text field.
   • component: Custome View Component. Mandatory if type is custom.
   • edit_component: Custome Editor Component. Mandatory if edit_type is custom.
   • onComponentInit: Callback function for the column on component init.

Example

  configs: any = {      
      'group_by': 'product_type',
      'group_by_header': 'Product Type',
      'group_by_width': '100px',
      'columns': [{
        'header': 'Product Name',
        'name': 'name',
        'sortable': false
      }, {
        'header': 'Price',
        'name': 'price',
        'width': '200px',
        'group_aggregator': (array) => {
          const prices = array.map((item) => item.price);
          return '$' + prices.reduce((acc, item) => acc + item);
        }
      }]
};

Directive

Add below directive to your html.

  <db-ngtreegrid [data]="products" [configs]="configs"></db-ngtreegrid>

Events

1. expand: Event fires when parent is expanded.
2. collapse: Event fires when parent is collapsed.
3. cellclick: Event fires when a child cell is clicked.
4. rowselect: Event fires when a row is selected.
5. save: Event fires when a row is saved.
6. delete: Event fires when a row is deleted.
7. add: Event fires when a row is added.

License

This project is licensed under the MIT license.