Angular 7 Multi level Tree Grid. Simple, Light Weight and dependency free. Basically it groups data by a field or multiple fields..
npm install @epcelone/ng-tree-gridbash
npm i @epcelone/ng-tree-grid
`
Usage
$3
Import NgtreegridModule Module in your application module.
`javascript
import {NgTreeGridModule} from '@epcelone/ng-tree-grid';
`
Add it to your imports array.
`javascript
@NgModule({
imports: [
NgTreeGridModule
]
})
`
$3
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 }
];
`
$3
#### 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| group_aggregator | Function | n/a | It is a method which can be used to show data at the parent level for the corresponding column. 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.|
| editor | Object | n/a | Custom Editor Component. If given custom editor component will be used instead of default editor. |
| onComponentInit | 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);
}
}]
};
`
$3
Add below node to your html.
`
``