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.

screen3

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.

screen4

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.

screen6

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
    https://fancygrid.com

  • Rohit R

    Hi Raja,

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