Angular Component Development Kit (CDK) is a set of un-opinionated developers’ tools to add common interaction behavior to your angular UI with minimal effort. It mainly offers some of the tools found in Angular 2 Material, but with the freedom to use the UI of choice.

Whether you want to use Bootstrap, Clarity Design System etc. This will be a two-part post. This post will be an introduction to Angular CdkTable, with a working demo. In the second post, we will add additional functionality such as sorting, searching, which adds some flair to your tables. We will use Angular CdkTable to handle the table controller and Bootstrap for the UI using Bootstrap Table Component. This can easily be swapped for a custom CSS solution or any other UI Framework you want. Let’s get started

Setting up Bootstrap

First, we are going to create a new application and add Angular CDK and Bootstrap.

$ ng new angular-cdk-table-demo

And then, install Angular CDK, which is part of Angular Material and bootstrap.

$ yarn add @angular/cdk bootstrap

$ npm install @angular/cdk bootstrap

We are only interested with CSS Bootstrap and not jQuery. So, we need to import those SCSS files into our app inside angular.json under styles.

"projects": {
  "your-app-name": {
    "targets": {
       // ...
       "build": {
          // ...
          "options": {
            // ...
            "styles": [
              // ...
              "./node_modules/bootstrap/scss/bootstrap-grid.scss",
              "./node_modules/bootstrap/scss/bootstrap-reboot.scss",
              "./node_modules/bootstrap/scss/bootstrap.scss"
              // ...
            ],
            // ...
          }
        }
      }
    }
  }

Now, we have partially integrated bootstrap in to our Angular app. If you wish to fully use the power of bootstrap (Including replacing jQuery with Angular native components) follow the tutorial here.

Using Angular CdkTable on Our Component Controller

First, let’s import CdkTableModule and add to our list of imports in our application module (app.module.ts).

import { CdkTableModule } from '@angular/cdk/table';

And then:

imports: [
  //...
  CdkTableModule //...
];

Next up, we need data to display in our table. So, I went ahead and created some data that I think makes sense. We add the data as a component property – StudentData. I also went ahead and created an interface for our data – StudentResults.

public StudentData: StudentResults[] = [
  { name: 'John', class: 'Grade 6', marks: '300', grade: 'B' },
  { name: 'Charles', class: 'Grade 6', marks: '300', grade: 'B' },
  { name: 'Eunice', class: 'Grade 6', marks: '420', grade: 'A' },
  { name: 'Kate', class: 'Grade 6', marks: '410', grade: 'A-' },
  { name: 'Joe', class: 'Grade 6', marks: '310', grade: 'B-' },
  { name: 'Peter', class: 'Grade 6', marks: '200', grade: 'C' },
  { name: 'Henry', class: 'Grade 6', marks: '250', grade: 'C+' },
  { name: 'Paul', class: 'Grade 6', marks: '450', grade: 'A' },
  { name: 'Pius', class: 'Grade 6', marks: '400', grade: 'A-' },
  { name: 'Kennedy', class: 'Grade 6', marks: '150', grade: 'D' }
];

Then, we need to prepare our data, so we can connect it to our Angular CdkTable. First, we need a DataSource property in our component:

public StudentDataSource: BehaviorSubject<StudentResults[]>;

Then, connect our StudentData to that property.

constructor() {
  this.StudentDataSource = new BehaviorSubject<StudentResults[]>(
    this.StudentData
  );
}

Next, we need to define the columns that will be visible for our table:

public DisplayedColumns: string[] = ['no', 'name', 'class', 'marks', 'grade'];

Now, let’s head over our template and create the view.

Creating our View with Bootstrap

Let’s add our table, with Bootstrap classes. I am going to have a condensed, stripped and dark themed table. You can learn more about the bootstrap tables here.

<table class="table table-condensed table-striped table-dark"></table>

Next, let’s add a cdk-table directive and connect our our Data Source through dataSource property.

<table
  class="table table-condensed table-striped table-dark"
  cdk-table
  [dataSource]="StudentDataSource"
></table>

Next, we need to define the columns for our table and connect them to the column data. We do this by using ng-container with cdkColumnDef with the column name. Inside ng-container, we need to define the header and body cell of our column.

<ng-container cdkColumnDef="name">
  <th cdk-header-cell *cdkHeaderCellDef>Name</th>
  <td cdk-cell *cdkCellDef="let element">{{element.name}}</td>
</ng-container>

We need to repeat the above process, for each column we have in our table:

<ng-container cdkColumnDef="name">
  <th cdk-header-cell *cdkHeaderCellDef>Name</th>
  <td cdk-cell *cdkCellDef="let element">{{element.name}}</td>
</ng-container>

<ng-container cdkColumnDef="class">
  <th cdk-header-cell *cdkHeaderCellDef>Class</th>
  <td cdk-cell *cdkCellDef="let element">{{element.class}}</td>
</ng-container>

<ng-container cdkColumnDef="marks">
  <th cdk-header-cell *cdkHeaderCellDef>Marks</th>
  <td cdk-cell *cdkCellDef="let element">{{element.marks}}</td>
</ng-container>

<ng-container cdkColumnDef="grade">
  <th cdk-header-cell *cdkHeaderCellDef>Grade</th>
  <td cdk-cell *cdkCellDef="let element">{{element.grade}}</td>
</ng-container>

The final thing we have to do, is define our rows – header and body rows. For our header row, we are going to add cdk-header-row directive and pass the list of columns to display through the cdkHeaderRowDef directive.

<thead>
  <tr cdk-header-row *cdkHeaderRowDef="DisplayedColumns"></tr>
</thead>

And then, in our table body, we are going to add a cdk-row directive and pass the column row definition data through the cdkRowDef directive:

<tbody>
  <tr cdk-row *cdkRowDef="let row; columns: DisplayedColumns;"></tr>
</tbody>

And that’s it. We have successfully used Angular CdkTable with Bootstrap to display data.

Source Code and Demo

You can find the source code for this post here and the demo here.