Angular CdkTable – Working with Tables like A Pro – Part 1

| By Maina Wycliffe | | | Angular

Subscribe for more content from me

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.

Angular Hidden Treasures – Features you might know About

In this post, we are going to look at four important features in angular that can help you during your app development life cycle. These …

Read More
Enabling Hot Module Replacement (HMR) in Angular 6

Hot Module Replacement (HMR) is a key webpack feature that is not enable by default in Angular. It allows for modules to be replaced …

Read More
Angular Reactive Forms – Building Custom Validators

Angular has built-in input validators for common input validation such as checking min and max length, email etc. These built-in …

Read More
A Guide for Building Angular 6 Libraries

In an earlier post, I wrote about Angular CLI Workspaces, a new feature in Angular 6 that allows you to have more than one project in a …

Read More
Angular 6 - Angular CLI Workspaces

One of the least talked about features of Angular 6 is Angular CLI Workspaces. Workspaces or Angular CLI Workspaces give angular …

Read More
Working with Angular CLI Budgets in Angular 6

In this post, I am going to cover Angular CLI Budgets in details. So, what are CLI Budgets? CLI Budgets is a way of way of ensuring that …

Read More

Comments