Simple Table

Let’s get started by creating a simple table to show some heroes.

ng new simple-table

npm install --save @angular/cdk

ng g component table

Add the CdkTableModule to your app.module.ts file:

Inside of the table.component.ts , we’ll start by creating a BehaviorSubject of an array of heroes, as well as a BehaviorSubject of the columns to show in our table:

This tableDataSource$ will serve as our DataSource input for our Angular CDK Table. And we’ll use displayedColumns$ to keep track of the columns that our CDK Table should show.

[Note: I’m using a BehaviorSubject of an array for displayedCoulmns$ here instead of just a regular array so that if we decided to later add functionality to hide/show columns we could react to the fact that they changed via a subscription to displayedColumns$ . We won’t be doing anything that requires that in this demo, so a normal array is absolutely valid here. Note also though, that you can also synchronously get the current value of a BehaviorSubject with the syntax myBehaviorSubject$.value , so in a sense, it’s the best of both worlds, and why the author is particularly found of BehaviorSubjects!]

Next we’ll create our template using the table CDK guide for a starting point.

The basic steps for developing CDK tables are to first define a template for how your table’s headers, footers, and regular cells look like for each column of your table. To do this, we’ll create a <ng-container> element for each of our columns that we would want to show. Here’s an example of an ng-container for the name of our heroes:

The cdkHeaderCellDef structural directive lets the CDK Table know to to use the <th> tag in the template above for a header, while the cdkCellDef directive specifies the <td> tag as the template for each table cell in this Name column. The cdkColumnDef also exports the row content so we can reference it here in our template.

After defining each column, we then provide the following tags to give the CDK Table instructions on which columns to display for each row:

This tells the CDK Table which columns to actually show. For example — we could splice out one of the items in our displayedColumns$ array here to exclude one of our columns from being rendered (without having to touch the corresponding <ng-container> for that column).

Note also that we can still add input/outputs to these <tr> tags, like a (click) on an entire row, or [draggable] / (dragstart) / (dragenter) / (dragend) to support dragging and dropping in your table. Also note that *cdkRowDef also provides access to the row context, so we could include the data for that row inside those ins/outs we set on the <tr> here!

All this put together now gets us a working table:

But it’s not a very exciting table yet. Let’s add another column to this row to let our user level up their heroes.

To do this well add another column to our displayedColumns$ array and add another <ng-container> to our template.

Let’s also create a Dictionary object to hold our heroes to make it easier to figure out which one to level up.

Since we’re managing our heroes separately from our table’s data source, we’ll set up our table data source to react to changes to our heroes data inside of the OnInit lifecycle hook:

Now whenever we change our heroes, our tableDataSource will be updated to reflect those changes.

Finally let’s write our levelUp() function to call whenever a user clicks level up:

Now we’ve got a table that does some neat stuff: