The table component is able to let us present our data in columns and rows. We need to do the following to get a table component up and running:

1. Import and register the MatTableModule in our root module. 
2. Construct the data that we mean to display.
3. Define the markup for our table.

The first order of business is to import the necessary module, and that is easily done with the following code:

import {MatTableModule} from '@angular/material';

@NgModule({
  imports: [MatTableModule]
})

At this point, we start constructing our data and create an instance of the MatTableDataSource class. The code is as follows:

// app/jedi.model.ts
export class interface Jedi {
  name: string;
  side: string;
}

// app/table.example.component.ts
@Component({
 selector: 'example-table',
 template : `
 <div>
   <mat-table #table [dataSource]="tableSource" matSort>
     // header 'Name'
     <ng-container matColumnDef="name">
       <mat-header-cell *matHeaderCellDef mat-sort-header> Name 
       </mat-header-cell>
       <mat-cell *matCellDef="let element"> {{element.name}} 
       </mat-cell>
     </ng-container>
   
     // header 'Side'
     <ng-container matColumnDef="side">
       <mat-header-cell *matHeaderCellDef mat-sort-header> Side 
       </mat-header-cell>
       <mat-cell *matCellDef="let element"> {{element.side}} 
       </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 [pageSize]="2" [pageSizeOptions]="[1, 5, 10]">
   </mat-paginator>
</div>
 `
})
export class ExampleTableComponent {
 jediSource: Array<Jedi>;
 tableSource: MatTableDataSource<Jedi>;
 displayedColumns: string[];

 constructor() {
   this.displayedColumns = ['name', 'side'];
   this.jediSource = [{
     name: 'Yoda',
     side: 'Good'
   }, {
     name: 'Darth',
     side: 'Evil'
   }, {
     name: 'Palpatine',
     side: 'Evil'
   }];

   this.tableSource = new MatTableDataSource<Jedi>(this.jediSource);
 }
}

Noteworthy here is how we construct a MatTableDataSource instance out of an array of objects. We will use this instance in the markup and point it out as the data source. The next thing to do is construct the markup needed to support this table. The code for that is as follows:

<mat-table #table [dataSource]="tableSource">
  // header 'Name'
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>

  // header 'Side'
  <ng-container matColumnDef="side">
    <mat-header-cell *matHeaderCellDef> Side </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.side}} </mat-cell>
  </ng-container>

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

We have pointed out several points of interest in the previous code. Columns for the table are constructed by creating an ng-container element containing in turn a mat-header-cell, where the title is defined, and a mat-cell where we say what data should go in there. The mat-header-row element, further down in the code, enables us to point out the order in which the columns should appear. We can see in our previous code snippet how this is just an array of strings. Finally, with the mat-row element, we simple display all the rows of our table. The end result should look like this: