Implementing Angular data tables in an Ionic Application

February 13, 2018, 9:00 am Categories:


Data isn't always the most exciting content to work with which is why, as human beings, we tend to prefer our content presented in more visually appealing and engaging formats.

Over the course of this tutorial I'm going to show you how we can take external data and display that in an aesthetically pleasing and interactive tabular format using a specialised Angular component called ngx-datatable.

This particular component will provide us with lots of neat features that we wouldn't get with a regular HTML table including pagination, sorting and dynamic data integration/rendering (amongst other features).

Before we dive into coding though let's take a look at what we'll be developing.

The application

We're going to import JSON data from an external file and use the ngx-datatable component (which we'll install courtesy of npm) to render that data in a tabular format which allows for client-side sorting and pagination.

By the end of this tutorial you should have an application that looks like the following:

Tabular data displaying a list of web and mobile development technologies

I think it's safe to say this definitely beats pouring over data in the form of a list of plain text bullet points doesn't it?

Now we know what to expect from this tutorial let's crack on...

Getting Started

Fire up your system CLI and create the following ionic project named ionic-tables and follow this, once the project has been generated, by installing the required ngx-datatable npm package:

ionic start ionic-tables blank
cd ./ionic-tables
npm install @swimlane/ngx-datatable --save

With the project created and the ngx-datatable npm package installed we now need to edit the application root module - ionic-tables/src/app/app.module.ts - to import/declare the following modules:

  • HttpClientModule
  • NgxDatatableModule

Once these have been added/configured your root module should now look like the following:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}

That completes the necessary software imports and configuration which means we can now move on to defining the JSON data source for the ionic-tables application.

Defining the data

As we are going to be importing external data in the form of JSON it's probably best that we define that data now (after all an application that calls data that doesn't exist won't be much use!)

To do this create a file named technologies.json and place that in the following location (which requires that you also create a new directory titled data):


Inside the newly created techologies.json file enter the following JSON data:

   "technologies" : [
         "name" : "Ionic Framework",
         "summary" : "Hybrid application development framework",
         "company" : "Drifty"
         "name" : "Angular",
         "summary" : "Front-end development framework",
         "company" : "Google"
         "name" : "TypeScript",
         "summary" : "Superset of JavaScript",
         "company" : "Microsoft"
         "name" : "Apache Cordova",
         "summary" : "Native application development framework",
         "company" : "Apache"
         "name" : "Ionic Native",
         "summary" : "Apache Cordova compatible plugins",
         "company" : "Drifty"
         "name" : "HTML5",
         "summary" : "Mark-up language and API's",
         "company" : "W3C"
         "name" : "Sass",
         "summary" : "CSS pre-processor",
         "company" : "W3C"
         "name" : "Ionic CLI",
         "summary" : "The engine behind the framework",
         "company" : "Drifty"
         "name" : "Stencil",
         "summary" : "Web component generator",
         "company" : "Drifty"
         "name" : "Firebase",
         "summary" : "Backend as a Service (BaaS)",
         "company" : "Firebase/Google"
         "name" : "MongoDB",
         "summary" : "NoSQL database solution",
         "company" : "Mongo"
         "name" : "PHP",
         "summary" : "Server-side scripting language",
         "company" : "Zend"
         "name" : "MySQL",
         "summary" : "Popular open-source database",
         "company" : "Oracle"
         "name" : "PouchDB",
         "summary" : "Client-side NoSQL database abstraction solution",
         "company" : "PouchDB"
         "name" : "CouchDB",
         "summary" : "Server-side NoSQL database solution",
         "company" : "CouchDB"

As you can see this is, in its simplest form, a list of software languages and vendor tools that we can use when developing Ionic applications.

With our data in place we move on to crafting the required logic for importing and rendering/displaying that data within the ngx-datatable component.

Scripting the application

Thankfully the logic for configuring the ngx-datatable component is relatively small (and is almost entirely handled on the template side - which we'll cover in the next section).

As a result of this our HomePage component class - ionic-tables/src/pages/home/home.ts - will simply concentrate on covering the following requirements:

  • Defining an interface to allow Angular's HttpClient module to 'recognise' the shape of the data object being returned by the observable for the imported technologies.json file
  • Defining the column structure for the ngx-datatable component that will be located in the template

These are handled as follows:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NavController } from 'ionic-angular';

export interface Config {
	technologies: string;

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

    * @name config
    * @type {any}
    * @public
    * @description     Defines an object allowing the interface properties to be accessed 
   public config : Config;

    * @name columns
    * @type {any}
    * @public
    * @description     Defines an object for storing the column definitions of the datatable 
   public columns : any;

    * @name rows
    * @type {any}
    * @public
    * @description     Defines an object for storing returned data to be displayed in the template 
   public rows : any;

   constructor(public navCtrl 	: NavController,
               private _HTTP   	: HttpClient) 
      // Define the columns for the data table
      // (based off the names of the keys in the JSON file)   
      this.columns = [
        { prop: 'name' },
        { name: 'Summary' },
        { name: 'Company' }

    * Retrieve the technologies.json file (supplying the data type, via 
    * the config property of the interface object, to 'instruct' Angular 
    * on the 'shape' of the object returned in the observable and how to 
    * parse that)
    * @public
    * @method ionViewDidLoad
    * @return {none}
   ionViewDidLoad() : void
      .subscribe((data) =>
         this.rows = data.technologies;


As you can see this is a fairly simple class - albeit with one important difference: the addition of an interface to define a property for use with 'helping' the HttpClient get method to 'understand' the shape of the object returned by the JSON data.

Without this in play we would receive error messages like the following:

Property 'technologies' does not exist on type 'Object'.

Thanks to our interface we now have a property which defines the expected data type returned by the HttpClient Observable and thereby allows the JSON to be parsed correctly.

In object oriented programming an interface is simply an agreement, if you will, for what properties and/or methods the class is expected to use.

With our logic for retrieving and parsing data now completed we proceed on to embedding and configuring the ngx-datatable component in the HomePage component's template...

Templating the application

Remember in the previous section that I stated the majority of the configuration for the ngx-datatable component was handled template side?

This is handled through the use of Angular property bindings with a number of available input properties - of which we are going to make use of the following:

  • columnMode
  • columns
  • footerHeight
  • headerHeight
  • limit
  • rowHeight
  • rows
  • sortType

Within our HomePage template - ionic-table/src/pages/home/home.html - our ngx-datatable component is rendered, using these property bindings, in the following way:

      Ionic Stack

<ion-content padding>


  	   Embed the ngx-datatable component with following property bindings/values:
       1. sorttype - allow data to be sorted on multiple columns
       2. headerHeight - Set height of table header at 50 pixels
       3. footerHeight - Set height of table footer at 50 pixels
       4. rowHeight - Set height of table rows at 50 pixels
       5. rows - Derives the data for the table rows from the component class 
                 property of rows
       6. columns - Derives the names for the table columns from the component 
                    class property of columns
       7. columnMode - Use of standard, flex or force - Force value makes columns 
                       equidistant and span the width of the parent container
       8. limit - the number of records to display before paginating the results


Thanks to the pre-built functionality of the ngx-datatable component our template is pretty slim - no extra code required!

Our next, and final, step involves adding the necessary styling for the table to make our data even more presentable.

Styling the application

The ngx-datatable component provides a number of classes, such as the following, that we can use to supply custom styling for the data table:

  • .ngx-datatable
  • .datatable-header
  • .datatable-header-cell
  • .datatable-body-row
  • .datatable-row-even
  • .datatable-row-odd
  • .datatable-body-cell
  • .datatable-footer

We'll use some of these classes, within the HomePage stylesheet - ionic-tables/src/pages/home/home.scss, to create the following style rules for defining the appearance of the table header, row and footer:

page-home {
   .datatable-header {
      background: rgba(164, 192, 214,1); 
      padding: 1em 0 0 1em;

   .datatable-header-cell {
      font-size: 1.2em;
      font-weight: bold;

   .datatable-body-row {
      padding: 0;

   .datatable-row-even {
      background: rgba(240, 240, 240, 1);

   .datatable-row-odd {
      background: rgba(255, 255, 255,1);

   .datatable-body-cell {
      font-size: 1.2em;
      padding: 1em;

   // Style footer appearance
   .datatable-footer {
      background: rgba(218, 226, 234,1); 
      padding: 0 1em 0 1em;

      .pager {
         li {
      	    padding: 0 1em !important;

      	    a {
      	       color: rgba(68, 68, 68, 1);
      	       text-decoration: none;

   // Style rules for the footer pagination elements
   .datatable-icon-done-all:before {
      content: ">>";

   .datatable-icon-left:before {
      content: "<";

   .datatable-icon-right:before {
      content: ">";

   .datatable-icon-skip:before {
      content: ">>";
   .datatable-icon-prev:before {
      content: "<<";


With our styling in place all that's left now is to test our application!

Seeing is believing

From your system command line (and whilst at the root of the ionic-tables project) run the following command to launch the application in your system web browser:

ionic serve

Always assuming there are no coding errors then you should see the application being launched in the browser and displayed like so:

Tabular data displaying a list of web and mobile development technologies


Doesn't our data look so much nicer as a result of the ngx-datatable component?

In summary

Data can be quite boring to work with which is why we tend to represent that using visual aids such as charts, graphs or, in the case of this tutorial, tables.

Thanks to the ngx-datatable component we get the ability to work with data from local or remote sources as well as functionality including column sorting and record pagination (as well as other features which we haven't touch upon in this tutorial - but feel free to explore the documentation and play to your heart's content!)

If you enjoyed this tutorial then feel free to share your thoughts, reactions and suggestions in the comments section below.

If you liked what was written here then please consider signing up to my FREE mailing list to stay updated on further articles and e-books that I have in the pipeline.



Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.