Material Design table not mapping to UserDataSource

Question

I have a hardcoded value in a UserDataSource that isnt being mapped to a Material Data table. Yet I can see the json when I print it to the screen... What am I missing?

UPDATE: I discovered that the table populates normally when the checkbox column is removed... Any ideas what is wrong with that column?

DATA: {{dataSource.data | json}}
<mat-table class="lessons-table mat-elevation-z8 overflow-x-auto" [dataSource]="dataSource">

<div class="spinner-container" *ngIf="dataSource.loading$ | async">
    <mat-spinner></mat-spinner>
</div>

<!-- Checkbox Column -->
<ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)">
        </mat-checkbox>
    </td>
</ng-container>
<!-- end checkbox column -->
<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let e">tempName</mat-cell>
</ng-container>

<ng-container matColumnDef="twodigitcoid">
    <mat-header-cell *matHeaderCellDef>Two digit coid</mat-header-cell>
    <mat-cell *matCellDef="let e">removeme</mat-cell>
</ng-container>

<ng-container matColumnDef="awscoid">
    <mat-header-cell *matHeaderCellDef>AWS coid</mat-header-cell>
    <mat-cell *matCellDef="let e">{{e.awsCoId}}</mat-cell>
</ng-container>

<ng-container matColumnDef="paiosLic">
    <mat-header-cell *matHeaderCellDef>PAIOS Lic In Use</mat-header-cell>
    <mat-cell *matCellDef="let e">{{e.paiosLicCount}}</mat-cell>
</ng-container>
<ng-container matColumnDef="paiosLicSupport">
    <mat-header-cell *matHeaderCellDef>PAIOS Support Lic In Use</mat-header-cell>
    <mat-cell *matCellDef="let e">{{e.paiosSupportCount}}</mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>

UserDataSource

export class UserDataSource implements DataSource<Company> {

private CompanyModelsSubject = new BehaviorSubject<Company[]>([]);//emits values to the view
private loadingSubject = new BehaviorSubject<boolean>(false);
public loading$ = this.loadingSubject.asObservable();
get data() { return this.CompanyModelsSubject.value; }

constructor(private svc: GreencardService) {}

//lets you subscribe to the data stream
connect(collectionViewer: CollectionViewer): Observable<Company[]> {
    console.log('datasource connected')
    return this.CompanyModelsSubject.asObservable();
}

disconnect(collectionViewer: CollectionViewer): void {
    this.CompanyModelsSubject.complete();
    this.loadingSubject.complete();
}

//called in response to user actions- changes data steam that you connected to using connect()
loadData(lgid) {

    //hardcoded test
    this.loadingSubject.next(true); //also sets loading$ to true
    let com: Company[] = [new Company({ awsCoId: 1038 })];
    this.CompanyModelsSubject.next(com);
    this.loadingSubject.next(false);
    //end hardcoded test
}}

CompanyComponent

export class CompanyComponent{

    dataSource: UserDataSource;
    displayedColumns = ["select", "name",/*"twodigitcoid",*/ "awscoid","paiosLic","paiosLicSupport"];

    @Input() set lgid(value: number) {
        console.log('------\ncompanytable: ' + value);
        if (this.dataSource==undefined)
            this.dataSource = new UserDataSource(this.svc);
        this.dataSource.loadData(value);
    }
    @Output() coIdSelected= new SelectionModel<Company>(true, [],true);


    constructor(private svc: GreencardService) { }
    ....
    }

Answer 1

In your Component you used coIdSelected identifier for SelectionModel. But in View you used selection identifier. Define selection as below inside your Component.

this.selection = new SelectionModel<Company>(true, []);

You did not post your complete CompanyComponent code. If you did not define masterToggle() and isAllSelected() functions define those as below inside your CompanyComponent

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }

StackBlitz Demo.