ngtreegrid

Angular 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 Angular Tree Grid Package. If header needs to be fixed/freezed and body needs to be scrollable then check out this Angular 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 | ngtreegrid | | ------- | ---------- | | <= 8 | 3.3.8 | | >= 9 | 4.0.5 | | >= 12 | 6.0.0 |

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

Grid Configurations

| Field | Type | Default | Description | | ------------------- | ------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | *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. | | group_by_header | string/Array | n/a | Header for the GroupBy Column. It can be an array of Column Headers. | | group_by_width | string/Array | 'auto' | Width of the GroupBy Column. It can be an array of GroupBy Column widths. | | action_column_width | string | 50px | Width of the Action Column. | | 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. | | multi_select_width | string | 'auto' | Width of multi-select column. | | 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. | | 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 | 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 |

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_class | string | plus | Icon class for Expand icon. Font Awesome class can be given. | | collapse_class | string | minus | Icon class for Collapse icon. Font Awesome class can be given. | | add_class | string | plus | Icon class for Add icon. Font Awesome class can be given. | | edit_class | string | edit | Icon class for Edit icon. Font Awesome class can be given. | | delete_class | string | delete | Icon class for Delete icon. Font Awesome class can be given. | | save_class | string | save | Icon class for Save icon. Font Awesome class can be given. | | cancel_class | string | cancel | Icon class 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. | | parent_class | string | n/a | Class for parent(group by) row. |

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). | | hidden | boolean | false | Show/Hide column. | | filter | boolean | true | Enable/Disable 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. | | sortable | boolean | false | To make a specific column sortable. | | renderer | Function | n/a | It is a method to render customized value for the column. See this Example. | | 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 Example. for better understanding). This field for the parent will be left blank if not provided. | | 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. | | group_component | Object | n/a | Custom Group Component. It has same setting as Column | | 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. |

Basic 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);
        }
      }]
};

HTML

Add below node to your html.

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

Events

| Event | Arguments | Description | | -------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------- | | expand | row_data: Expanded Row | Event fires when parent is expanded. | | collapse | row_data: Collapsed Row | Event fires when parent is collapsed. | | cellclick | event Consist of: row: Selected Row column: 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. |

Can I hire you guys?

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

License

This project is licensed under the MIT license.