Компоненты PrimeNG
TreeTable
Sort

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'
      }
    }
  ]
}