start of StatusList component

src/app/status-list/status-list.component.ts

@@ -0,0 +1,34 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTable } from '@angular/material/table';
+import { StatusListFolderDataSource } from './status-list-folder-datasource';
+import { Folder } from '../folder';
+import { SystemConfigService } from '../system-config.service';
+
+@Component({
+  selector: 'app-status-list',
+  templateUrl: './status-list.component.html',
+  styleUrls: ['./status-list.component.scss']
+})
+export class StatusListComponent implements AfterViewInit, OnInit {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatTable) table: MatTable<Folder>;
+  dataSource: StatusListFolderDataSource;
+
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns = ['id', 'name'];
+
+  constructor(private systemConfigService: SystemConfigService) { };
+
+  ngOnInit() {
+    this.dataSource = new StatusListFolderDataSource(this.systemConfigService);
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+    this.table.dataSource = this.dataSource;
+  }
+}