Angular Material Exploring Data Table

In this lecture let's take a detailed look at data tables in angular material, let's start with the displayedColumns property.

export class AppComponent implements OnInit {
  displayedColumns: string[] = ["position", "name", "weight", "symbol"];
}

This property as the name suggests controls the columns to be displayed in the browser, as you can see it is just an array of strings, if I were to for example remove symbol from this list.

export class AppComponent implements OnInit {
  displayedColumns: string[] = ["position", "name", "weight"];
}

Save and take a look at the browser you will see that the column is not displayed. Angular Material Exploring Data Table

So the property controls which of the columns have to be shown but there is more to it than just showing and hiding columns, the order in which you specify the fields to be displayed is the order in which the columns are displayed in the browser, you can see that we have the order as position, name, weigh, symbol and in the browser the columns are in the exact same order. angular material data table columns order If you want the weight column to be the last column you just have to specify the weight column as the last column in displayed columns property.

displayedColumns: string[] = ["position", "name", "symbol", "weight"];

angular material data table columns change order as you can see weight is displayed as the last column which now brings us to the HTML to highlight another point.

The order in which you specify these column templates with the <ng-container> doesn't affect the order in anyway whatsoever the order is controlled by displayedColumns property which is specified to the <mat-header-row> and <mat-row> components.

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

But what does matter the container column template is the matColumnDef attribute the value has to be a value from the displayedColumns property, if I've already changed position to let's say positionTest.

  <!-- Position Column -->
  <ng-container matColumnDef="positionTest">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.position }} </mat-cell>
  </ng-container>

Save the file and take a look at the browser. matColumnDef You can see that the code breaks and the data table is not displayed so make sure you specify the right column name to the template.

Next let's talk about the <mat-row> component you can see that we have two variables declared row and columns.

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

the columns property is set to displayedColumns to indicate what data has to be displayed let's change this and see what happens. So in the class component I'm gonna create another property called displayedColumnsData and in this list I'm gonna remove weight.

  displayedColumns: string[] = ["position", "name", "symbol", "weight"];
  displayedColumnsData: string[] = ["position", "name", "symbol"];

Back in the HTML I'm gonna set columns to displayedColumnsData.

<mat-row *matRowDef="let row; columns: displayedColumnsData"></mat-row>

If you save the files and take a look at the browser. displayedColumnsData You can see that we have only three columns of data being displayed and four columns of header the data for the weight column is hidden so it's very much possible to set separate columns to be displayed for the header and the data but then again not sure if you would ever want to do that.

Next let's talk about the row declaration, what this helps us is to get hold of the row data to handle events on each row in that data table for example I can add a click event binding and call a method that provides us with the row data.

  <mat-row (click)="logData(row)" *matRowDef="let row; columns: displayedColumnsData"></mat-row>

In the component class we can quickly define logData().

export class AppComponent implements OnInit {
  displayedColumns: string[] = ["position", "name", "symbol", "weight"];

  dataSource = ELEMENT_DATA;

  logData(row) {
    console.log(row);
  }
}

If I save the files and take look at the browser, open console and click on a row you can see the corresponding row data being logged in the console. angular material data table row So if you have any action that has to be performed for example editing, deleting or navigating to a different route based on this row data this the way to go, passing the data extract the id probably of the column and perform the necessary action.

Alright I hop that now you have a much better understanding of how a data table works in angular material, in the next we'll talk about filtering salting and pagination in data tables.