Skip to content

debabratapatra/ngtreegrid

Repository files navigation

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.

Angular Tree Grid

Donate ♥️

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 debabratapatra12@gmail.com. We will be happy to work with you!

License

This project is licensed under the MIT license.