1.0.11 • Published 5 years ago
@epcelone/ng-tree-grid v1.0.11
NgTreeGrid
Angular 7 Multi level Tree Grid. Simple, Light Weight and dependency free. Basically it groups data by a field or multiple fields..
Installation
npm i @epcelone/ng-tree-grid
Usage
Import
Import NgtreegridModule Module in your application module.
import {NgTreeGridModule} from '@epcelone/ng-tree-grid';
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. |
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);
}
}]
};
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. |
License
This project is licensed under the MIT license.