Sort
Single Sort
col.header rowData[col.field]
<p-treeTable [value]="filesSingleSort" [columns]="cols">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ttSortableColumn]="col.field">
{ { col.header } }
<p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
<tr>
<td *ngFor="let col of columns; let i = index">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
{ { rowData[col.field] } }
</td>
</tr>
</ng-template>
</p-treeTable>
Multiple Sort
col.header rowData[col.field]
<p-treeTable [value]="filesMultipleSort" [columns]="cols" sortMode="multiple">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ttSortableColumn]="col.field">
{ { col.header } }
<p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
<tr>
<td *ngFor="let col of columns; let i = index">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
{ { rowData[col.field] } }
</td>
</tr>
</ng-template>
</p-treeTable>
import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
@Component({
selector: 'app-prime-treetable',
templateUrl: './prime-treetable.component.html',
styleUrls: ['./prime-treetable.component.scss']
})
export class PrimeTreetableComponent implements OnInit {
constructor() { }
filesMultipleSort: TreeNode[] = fileMultipleSort;
cols: any[] = [];
ngOnInit(): void {
this.cols = [
{ field: 'name', header: 'Name' },
{ field: 'size', header: 'Size' },
{ field: 'type', header: 'Type' }
];
this.filesMultipleSort.push({
data: {
name: 'Documents',
size: '100kb',
type: 'Link'
}
});
}
}
const fileMultipleSort: TreeNode[] = [
***ВАШ JSON ФАЙЛ***
];
{
data: {
name: 'Applications',
size: '200mb',
type: 'Folder'
},
children: [
{
data: {
name: 'Angular',
size: '25mb',
type: 'Folder'
},
children: [
{
data: {
name: 'angular.app',
size: '10mb',
type: 'Application'
}
},
{
data: {
name: 'cli.app',
size: '10mb',
type: 'Application'
}
},
{
data: {
name: 'mobile.app',
size: '5mb',
type: 'Application'
}
}
]
},
{
data: {
name: 'editor.app',
size: '25mb',
type: 'Application'
}
},
{
data: {
name: 'settings.app',
size: '50mb',
type: 'Application'
}
}
]
},
{
data: {
name: 'Cloud',
size: '20mb',
type: 'Folder'
},
children: [
{
data: {
name: 'backup-1.zip',
size: '10mb',
type: 'Zip'
}
},
{
data: {
name: 'backup-2.zip',
size: '10mb',
type: 'Zip'
}
}
]
},
{
data: {
name: 'Desktop',
size: '150kb',
type: 'Folder'
},
children: [
{
data: {
name: 'note-meeting.txt',
size: '50kb',
type: 'Text'
}
},
{
data: {
name: 'note-todo.txt',
size: '100kb',
type: 'Text'
}
}
]
},
{
data: {
name: 'Documents',
size: '75kb',
type: 'Folder'
},
children: [
{
data: {
name: 'Work',
size: '55kb',
type: 'Folder'
},
children: [
{
data: {
name: 'Expenses.doc',
size: '30kb',
type: 'Document'
}
},
{
data: {
name: 'Resume.doc',
size: '25kb',
type: 'Resume'
}
}
]
},
{
data: {
name: 'Home',
size: '20kb',
type: 'Folder'
},
children: [
{
data: {
name: 'Invoices',
size: '20kb',
type: 'Text'
}
}
]
}
]
},
{
data: {
name: 'Downloads',
size: '25mb',
type: 'Folder'
},
children: [
{
data: {
name: 'Spanish',
size: '10mb',
type: 'Folder'
},
children: [
{
data: {
name: 'tutorial-a1.txt',
size: '5mb',
type: 'Text'
}
},
{
data: {
name: 'tutorial-a2.txt',
size: '5mb',
type: 'Text'
}
}
]
},
{
data: {
name: 'Travel',
size: '15mb',
type: 'Text'
},
children: [
{
data: {
name: 'Hotel.pdf',
size: '10mb',
type: 'PDF'
}
},
{
data: {
name: 'Flight.pdf',
size: '5mb',
type: 'PDF'
}
}
]
}
]
},
{
data: {
name: 'Main',
size: '50mb',
type: 'Folder'
},
children: [
{
data: {
name: 'bin',
size: '50kb',
type: 'Link'
}
},
{
data: {
name: 'etc',
size: '100kb',
type: 'Link'
}
},
{
data: {
name: 'var',
size: '100kb',
type: 'Link'
}
}
]
},
{
data: {
name: 'Other',
size: '5mb',
type: 'Folder'
},
children: [
{
data: {
name: 'todo.txt',
size: '3mb',
type: 'Text'
}
},
{
data: {
name: 'logo.png',
size: '2mb',
type: 'Picture'
}
}
]
},
{
data: {
name: 'Pictures',
size: '150kb',
type: 'Folder'
},
children: [
{
data: {
name: 'barcelona.jpg',
size: '90kb',
type: 'Picture'
}
},
{
data: {
name: 'primeng.png',
size: '30kb',
type: 'Picture'
}
},
{
data: {
name: 'prime.jpg',
size: '30kb',
type: 'Picture'
}
}
]
},
{
data: {
name: 'Videos',
size: '1500mb',
type: 'Folder'
},
children: [
{
data: {
name: 'primefaces.mkv',
size: '1000mb',
type: 'Video'
}
},
{
data: {
name: 'intro.avi',
size: '500mb',
type: 'Video'
}
}
]
}