Почему сортировка матов и пагинатор не работает?

Question

У меня есть таблица матов, которая выбирает список столбцов из таблицы, используя Api. Данные отображаются правильно, однако я не могу использовать сортировку матов и разбивку на страницы таблицы матов. Хотя я использовал технику сортировки матов и разбивки на страницы, ссылаясь на сайт material.angular.io. До сих пор я не могу отсортировать или разбить таблицу на страницы.

Мой HTML-код:

<mat-table #table [dataSource]="dataSource" matSortclass="mat-cell">                       
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef></mat-header-cell>
    <mat-cell *matCellDef="let row"></mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      Name
    </mat-header-cell>
    <mat-cell *matCellDef="let row" 
              style="cursor:pointer;" 
              (click)="proceed(row)">
      {{row.projectName}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      Description
    </mat-header-cell>
    <mat-cell *matCellDef="let row">
      {{row.projectDescription}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="actions">
    <mat-header-cell *matHeaderCellDef></mat-header-cell>
    <mat-cell *matCellDef="let row; let i = index">
      <button mat-icon-button 
              color="accent" 
              matTooltip="Edit"
              (click)="startEdit(row)">
        <mat-icon aria-label="Edit">edit</mat-icon>
      </button>
      <button mat-icon-button
              color="#b71c1c"
              matTooltip="Delete"
              (click)="deleteItem(row)">
        <mat-icon aria-label="Delete">
          delete
        </mat-icon>
      </button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

<mat-paginator #paginator 
               [length]="dataSource" 
               [pageIndex]="0" 
               [pageSize]="10" 
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

Мой код TypeScript: -

import {
Component,
ElementRef,
OnInit,
ViewChild,
EventEmitter,
Output
} from "@angular/core";
import { Router, ActivatedRoute, ParamMap } from "@angular/router";


import { SelectionModel } from "@angular/cdk/collections";
import {
MatTableDataSource,
MatSort,
MatDialog,
MatPaginator
} from "@angular/material";
import { BehaviorSubject, fromEvent, merge, Observable } from "rxjs";
import { SnakBarComponent } from "../custom-components/snak-bar/snak- 
bar.component";
@Component({
selector: "app-project",
templateUrl: "./project.component.html",
styleUrls: ["./project.component.scss"]
})
export class ProjectComponent implements OnInit {
isLoadingResults = false;
displayedColumns = ["name", "description", "actions"];
dataSource: MatTableDataSource<any>;
columnList: any = [];
index: number;
id: number;
data;
@ViewChild(MatPaginator) paginator: MatPaginator;
@Output() columnListChange = new EventEmitter<any[]>();
@ViewChild(MatSort) sort: MatSort;
@ViewChild("filter") filter: ElementRef;
selection = new SelectionModel<Element>(false, null);

constructor(
    public dialog: MatDialog,
    public recommendationService: RecommendationService,
    private snakbar: SnakBarComponent,
    private router: Router,
    public globalAppSateService: GlobalAppSateService,
    private dataService: DataService
) {}

addColumns(data, index) {
    // const copiedData = data.slice();
    this.columnList.push(this.createColumnList(data, index));

    // this.columnListChange.next(copiedData);
}
// prepare mat table json to display
private createColumnList(data, index) {
    return {
        index: index,
        id: data.id,
        projectName: data.projectName,
        projectDescription: data.projectDescription,
        selected: false
    };
}

ngOnInit() {


    const project = JSON.parse(this.dataService.getObject("project"));
    if (project != null) {
        this.globalAppSateService.onMessage(project);
    }
    this.loadData();

}



public loadData() {
    this.isLoadingResults = true;
    this.recommendationService.getAllProjects().subscribe(
        data => {
            let index = 0;
            const response: any = data;
            response.forEach(el => {
                index++;
                this.addColumns(el, index);
            });
            const selectedProject = JSON.parse(
                this.dataService.getObject('project')
            );
            if (selectedProject !== null) {
                this.columnList.forEach(project => {
                    const temp: any = project;
                    if (temp.projectName === selectedProject.projectName) {
                        temp.selected = true;
                    }
                });
            }

            this.dataSource = new MatTableDataSource<any>(this.columnList);

            this.dataSource
                .connect()
                .subscribe(list => this.columnListChange.emit(list));
            this.dataSource.sort = this.sort;
            fromEvent(this.filter.nativeElement, 'keyup')
                // .debounceTime(150)
                // .distinctUntilChanged()
                .subscribe(() => {
                    if (!this.dataSource) {
                        return;
                    }
                    this.dataSource.filter = this.filter.nativeElement.value;
                });

            this.isLoadingResults = false;
        },
        error => {
            this.isLoadingResults = false;
            this.snakbar.statusBar('Filed to load projects', 'Filure');
        }
    );
}
public proceed(row) {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {});
        dialogRef.afterClosed().subscribe(result => {
            if (result === true) {
                this.dataService.setObject('project', JSON.stringify(row));
                this.globalAppSateService.onMessage(row);
                this.router.navigate(['/metadata']);
            }
        });
        this.columnList.forEach(column => {
            if (row.projectName === column.projectName) {
                column.selected = true;
            } else {
                column.selected = false;
            }
        });
        this.dataSource = new MatTableDataSource<any>(this.columnList);

        this.dataSource
            .connect()
            .subscribe(list => this.columnListChange.emit(list));
        this.dataSource.sort = this.sort;
}
ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

}