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

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

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

    <!-- Quantity Column -->
    <ng-container matColumnDef="quantity">
        <mat-header-cell *matHeaderCellDef> Quantity</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.quantity}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="order">
        <mat-header-cell *matHeaderCellDef> Order</mat-header-cell>
        <mat-cell *matCellDef="let element">
            <button mat-raised-button color="accent" (click)="order(element.id)">Order</button>
        </mat-cell>
    </ng-container>

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