Angular 5 – Data tables revisited

Hi Friends,

Hope you are all well. Probably everyone reading this post has already seen my post on data tables that I made a few weeks back. So, why are we revisiting this again ? Well., a lot of people who looked into that were asking me if there was a simpler way of throwing up the data on a table. So here we go.

Let’s begin.


Code for this post is available – here.

We’ll be using ngx-datatables for accomplishing this.

Scaffold out an application using the CLI and configure firebase and angularfire2. Since we have already seen this a lot in our previous posts, let’s not get into that.

Now that it’s done., let’s use the same students collection that we used in our previous data-table post. The structure of the collection looks like this.


First install ngx-datatables using the below code.

Once it is installed, add it in app.module.ts as shown below.

Open up app.component.html and add the below code.

Open up styles.css and add the below code as well.

Now open up app.component.ts and let’s write code to actually pull data off firestore.


Now simply run the app. You would see something like this.


Alright it’s cool. What about pagination though.

Pagination with ngx-datatables is very simple.

Open up app.component.html and add a few attributes as shown below.

Now run the app and you would see a nice footer at the bottom as shown below.


Now we have pagination as well.

In our next post we’ll see how to add inline editing as well into this datatable.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading guys. Peace.. :)


Liked it? Take a second to support admin on Patreon!
  • Mikhail Tatsky

    It would cool if you will do similiar post about FancyGrid

  • Rohit R

    Hi Raja,

    Could you please create a tutorial on how to export this data table to excel (xls)?

  • Clizio Guedes

    Hello, I was wondering how to get the object’s id and accessed from the datatable as a link using the Angular Router

  • akmal sharif

    Hello Raja, its is the implementation same if i want to pull data from my Firebase Realtime Database?