Paginator, Sort and Filter arent working for angular material project

Question

So I created a project on Angular CLI 7 and wanted to integrate angular material into it.

SO I have added modules for table pagination expansion filter sort etc. Even though I have added them into the app modules file. The paginator sort and filter dont work. Please can you tell me what could be the problem here, been stuck for a while.

Please find below files:

material.module.ts

import { NgModule } from '@angular/core';

import {
  MatCardModule,
  MatInputModule,
  MatButtonModule,
} from '@angular/material';

import {MatTableModule} from '@angular/material/table';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';

const modules = [
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatPaginatorModule,
  MatTableModule,
  MatSortModule,
  MatExpansionModule
];

@NgModule({
  imports: modules,
  exports: modules,
})
export class MaterialModule { }

app.module.ts

import { NgModule } from '@angular/core';

import {
  MatCardModule,
  MatInputModule,
  MatButtonModule,
} from '@angular/material';

import {MatTableModule} from '@angular/material/table';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';

const modules = [
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatPaginatorModule,
  MatTableModule,
  MatSortModule,
  MatExpansionModule
];

@NgModule({
  imports: modules,
  exports: modules,
})
export class MaterialModule { }

dashboard.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  animations: [
    trigger('detailExpand', [
      state('void', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
      state('*', style({ height: '*', visibility: 'visible' })),
      transition('void <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class DashboardComponent implements OnInit {

  public projectsResponse = {}
  public projectsGL: Project[]

  displayedColumns: string[] = ['bob_id', 'name', 'pod', 'version', 'v_env'];
  dataSource: MatTableDataSource<Project> = new MatTableDataSource<Project>(this.projectsGL);

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  isExpansionDetailRow = (index, row) => row.hasOwnProperty('detailRow');

  constructor(private _projectService: ProjectService) { }

  ngOnInit() {
    this._projectService.getProjects().subscribe(data => {
      this.projectsResponse = data;
      this.initializeProjects();
      this.dataSource = new MatTableDataSource<Project>(this.projectsGL);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });

  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}
initializeProjects()
/* code to populate projectGL */

Dashboard.component.html

<div class="example-header">
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
</div>

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="projectsGL" matSort>

        <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

        <!-- Position Column -->
        <ng-container matColumnDef="bob_id">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Bob Id </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.bob_id}} </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.name}} </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="pod">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Pod </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.pod}} </mat-cell>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="version">
            <mat-header-cell *matHeaderCellDef mat-sort-header> version </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.version}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="v_env">
            <mat-header-cell *matHeaderCellDef mat-sort-header> v-env </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.v_env}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="project-row" [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl">
        </mat-row>
    </mat-table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

<ng-template #tpl let-project>
    <div class="mat-row detail-row" [@detailExpand] style="overflow: hidden">
        The Envirent for {{project.name}} is {{project.env}}
    </div>
</ng-template>

I seem to have added all the modules required still paginator, sort and filter isnt working.

Answer 1

Found the mistake,

    <mat-table #table [dataSource]="projectsGL" matSort> 

should have been

    <mat-table #table [dataSource]="dataSource" matSort>