PrimeNg Treetable Example
Today, I want to talk about how to make a PrimeNg treetable example. Let me explain what the tree table is. You can use tree table data format to display hierarchical data in tabular format. You can use it for a well appearance of your html page.
Now lets look at the html code. We will use lazy keyword and set it to “true” in order to not pull the child data from database. When we click on the tree button, it goes to onNodeExpand method and pull the data from DB.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<p-treeTable [value]="products" [lazy]="true" (onNodeExpand)="onNodeExpand($event)" > <ng-template pTemplate="header"> <tr> <th>COLUMN A</th> <th>COLUMN B</th> <th>COLUMN C</th> <th>COLUMN D</th> </tr> </ng-template> <ng-template pTemplate="body" let-rowNode let-rowData="rowData"> <tr> <td> <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler> {{rowData.cola}} </td> <td>{{rowData.colb}}</td> <td>{{rowData.colc}}</td> <td>{{rowData.cold}}</td> </tr> </ng-template> </p-treeTable> |
And this is the component code below. Firstly we pull all the product key data. After, we pull data if we clicked the tree button.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<span class="token keyword">import</span> <span class="token punctuation">{</span>TreeTableModule<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'primeng/treetable'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span>TreeNode<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'primeng/api'</span><span class="token punctuation">;</span> ngOnInit() { this.loadAll(); } loadAll() { this.service .findProducts() .subscribe( (res: HttpResponse<Product[]>) => { this.products = res.body; }, (res: HttpErrorResponse) => { console.log(res); } ); } onNodeExpand(event) { const node = event.node; this.service .findChildProducts(node.cola) .subscribe( (res: HttpResponse<Product[]>) => { const childs: Product[] = res.body; for (let i = 0; i < products.length; i++) { childs[i].expanded = false; } node.children = childs; }, (res: HttpErrorResponse) => { console.log(res); } ); } |
And this is our model code we use it to keep data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
export interface Product { cola?: string; colb?: string; colc?: string; cold?: string; // tree table fields label?: string; data?: any; icon?: any; expandedIcon?: any; collapsedIcon?: any; children?: Product[]; leaf?: boolean; expanded?: boolean; type?: string; partialSelected?: boolean; styleClass?: string; draggable?: boolean; droppable?: boolean; selectable?: boolean; } |
You can have a look at this link if you interested in PrimeNg Paginator Example or if you interested in Android SignalR Chat.
Recent Comments