AngularJS / AngularJS 2 Data Table solutions with Demos

The Angular data table solutions

In this post, I am going to share a few data table solutions for AngularJS or AngularJS 2+ versions. The data table features include pagination, searching, sorting, etc.

The Angular-PagingTable directive

The Angular-PagingTable is a simple and easy-to-use solution for AjngularJS projects that enables creating the data tables with pagination. The users may also select how many rows to display from the available dropdown. The default is 5.

Demo Download

angularJS data tables simple

The features also include sorting the results by columns. For that, use the ev-sort directive as shown below. This is how you may use the directives for specifying the column names in table tag:

<table ev-table="vmDemo.tableData">



     <th ev-sort="ProductID">Product ID</th> <!-- Sort the results based on this column (optional)-->

     <th ev-sort="PName">Product Name</th>



   <tr ng-repeat="item in collection">

     <td>{{ item.ProductID }}</td>

     <td>{{ item.PName }}</td>



App Module dependencies:

var APP = angular.module(‘app’, [‘evTable’]);

After downloading the zipped file, include the directive:

<script src=”js/ev-table/ev-table.directive.js”></script>

(adjust the path as per your physical location). You may also add this directive in your own file.

For more on this, go to the developer’s page here.

The angular2-datagrid – A data grid for Angular2 Projects

The angular2-datagrid allows creating tables with certain features like searching the records, Add records on the fly, remove records and pagination as well.

angular data tables

Demo Source page

You may install the package via npm:

npm i angular2-datagrid –save

The source page also includes a demo that you can see how it works.

The DataTable – For angular2

The DataTable is a component for creating the data tables with features like pagination, sorting etc. The sorting can be done by using the column heads or selecting a column name from the dropdown.

You may also set how many rows to display per page. For styling the tables, you may use the Bootstrap CSS or apply your own styling.

Demo Source

For installing the Angular2 Data Table via npm:

npm i -S angular2-datatable

You may read more about the usage and configuration by visiting the source page.

ng2-handsontable – An Angular2 directive for Handsontable

In you have no idea about the Handsontable component then it is an HTML5/JavaScript based solution for presenting data in excel like view. The Handsonetbale component can be integrated with any data source and it has many useful features:

  • Data validation
  • Data binding
  • Sorting
  • Customized context menu
  • Data merging
  • Team scheduling and more

Learn more about the Handsontable component here.

The ng2-handsontable is the directive for AngularJS 2.

angular ng handsonta

Demo Source

Learn how to configure this directive by visiting the source page.