How I pick which library to use in a project

Previously, I created a good base for our project, lets add our first feature: a list of jobs. This feature will let you display a list of saved jobs. I will assume that at some point we will add an api to return a list of jobs and a create screen to create them. To display the list of jobs we will use a table. Before we get started, I will admit that a table for a list is a semantically incorrect element to use to display the list of jobs. Some may successfully argue for a definition list to display the data. I agree with this point of view and will still be using tables.

Adding a page

Before displaying the list, we need to add a new page to the application that will house the list. The ng-generate is great to get going with a page quickly. The Core-UI package has bound ng in the scripts, so you can use npm run ng to gain access to the cli without having to have Angular CLI as a global install. To add the module use npm run ng g module tables -- --routes. Note the -- before --routes , this tells npm to pass the rest of the parameters to the script and not treat it as part of the npm command. After that add your new module to the app.routing.ts. Then generate a component with npm run ng g component tables. And add the root route for the new TablesComponent. At that point going to http://localhost:4200/tables should result in a tables works! message to be displayed on the page. I also renamed the tables-routing.module.ts to be tables.routing.module.ts because I think it looks cleaner.

Picking the right library

First, I started with a google search for “angular tables,” then realizing that this includes all the angularjs results, I change the search to “angular 4 tables” then “angular 2 tables” and keep on searching. Luckily Sam Deering put together a list of 20!

My actual process is to start at number one and consider most of them. If you don’t find a list of 20 to checkout then consider the top 20 search results as a good list to start with. A few questions that I consider about each:

1. How good is the documentation? Is there a working demo?
2. How complicated is the sample code? What is the simplest use case and how difficult is it to implement? How much boilerplate code is required to create a simple example? How feature complete is the sample?
3. Checkout commit history on GitHub or wherever the code is hosted. Are there lots of commits? When was the last commit made?
4. Check the License for the project. Is it safe to use in a commercial environment?
5. How many issues are open, and when was the last closed issue? Does it seem like the project is active and has good support?
6. If applicable, check NPM for the project. The stats on the right side will give you total downloads and some GitHub totals. The higher the number the better chance that this project will continue to be improved.

ng2-table

The first link in the 20 Amazing Angular 4 Tables is ng2-table and seems like a good project to evaluate. It has all the requirements that I am looking for in the sample. The sample code is feature-rich but implements a lot of typescript. The documentation seems extensive and has a working demo I can start with. After checking commits, npm and issues, it does seem a little out of date, at this time, it has been 9 months since the last commit. Normally I would move on to the next project and make a mental note that this is a good one to come back to, but for this purpose I will go ahead and implement it and see how that goes.

Install with npm i ng2-table --save and copy paste the code from the main site. TableData has a lot of data and will need its own file. Import the Ng2TableModule to tables.routing.module.ts and check your page out to see how it looks.

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘pagination’. (“
<pagination *ngIf=”config.paging”

There should be an error in the console. The error is quite lengthy and the beggining of the error does not help much.

‘pagination’ is not a known element:
1. If ‘pagination’ is an Angular component, then verify that it is part of this module.
2. To allow any element add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (“
 [rows]=”rows” [columns]=”columns”>
</ng-table>

Reading further down we see that we are just missing pagination from the ngx-bootstrap project. But we are really evaluating tables and I was looking for the simplest implementation so we can just take out the pagination parts. Once that’s gone, the pages comes together nicely and have lots of features we can use. At this point one could be satisfied with the library, since it works and was not too much trouble to implement, but there are downsides. The current implementation requires quite a bit of setup on the part of the developer , which seems like repetitive code to write for every table someone could have. After further research, I found out you can exclude a lot of the features that complicate the code such as sorting and filtering.

Angular Smart Table Component

Another one to try out is the Angular Smart Table Component. At first glance the project seems a little out of date because the last release was a few months ago and there is a large number of open issues. But there is a steady npm download rate, so perhaps the authors are just a little behind. Get started code seems much simpler than the previous example. Uninstall ng2-tables, npm install ng2-smart-table, import and copy paste and we should be done. After few minutes we have an implementation that does not look like a table. You can update the settings with the following gist.

This will hide the filters row, move the actions to the right, turn off the edit button, and add some paging so we can see what it looks like. The library was simple and quick to implement and it is feature-rich with decent documentation.

ngx-datatable

This will be the last example that I attempt. The project is in excellent health and has regular updates and releases. A large number of issues with an active community and a steady download rate, make this project worth checking out. After following the Getting Started tutorial, I have a small table. But it has no styles and looks weird. After about 15 minutes of trying to get the style to work and reading through documentation, I grew frustrated and decided to look up whether or not the project supports bootstrap. One way is to Google something like “ngx-datatable bootstrap support”, but another way that I found works better, is to use the GitHub issues and search there first; usually you will find someone already asked the question and there is a detailed explanation. Unfortunately for me, a relatively recent answer indicated that you need to implement your own custom theme if you want your table to look like the bootstrap table. After this discovery I abandoned this test. The library was simple to implement and easy to use, it has great documentation, and is worth taking a look if you need the flexibility it offers.

Wrapping up

I have tried other libraries on the list, but the process is repetitive and didn’t learn anything new, so I decided to limit it to 3 and show a few pitfalls I ran into. The total time for evaluating each of the libraries did not exceed 30 minutes. When you are new to any technology ecosystem, it is worth it to take the time to evaluate different solutions. The time invested is learning time to see how other people structure their code and what kinds of patterns they are following. I encourage everyone to read the code of the library that they are using. Be curious about how the features were implemented and don’t just focus on the end result. If you feel that you have no time, then time-box the discovery time to something that you can live with, but make sure to take the time to explore.