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 tables 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
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">
<thead>
<tr>
<th ev-sort="ProductID">Product ID</th> <!-- Sort the results based on this column (optional)-->
<th ev-sort="PName">Product Name</th>
</tr>
</thead>
<tr ng-repeat="item in collection">
<td>{{ item.ProductID }}</td>
<td>{{ item.PName }}</td>
</tr>
</table>
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.
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.
Demo Source
Learn how to configure this directive by visiting the source page.