Using Angular Table to add sortable, paginated tables
Posted By : Kamaldeep Singh | 25-Jun-2015
Angular Table directive allows you declare sortable tables with pagination. Instead of using ng-repeat to iterate array object and further adding more code to perform pagination, sorting Angular table does this for you with a little effort.
Features:-
- Adds sorting to any column
- Adds pagination
- Display cell contents by name convention or allows custom cell content.
- Display header titles by name convention or allows custom header.
Required Dependencies:-
- To use angular table, angular 1.2 or higher is required.
- You need to include angular-table.js or angular-table.min.js in your HTML.
You can find one from here: https://github.com/samu/angular-table/tree/master/dist
- Inject the angular table dependency in your app.js as follows:-
angular.module('myApp', ['angular-table']);
How to use:-
Suppose we have a list of data in our controller say:-
$scope.dataList = [
{ name: 'indicator1' , description: 'blah1', essential: true },
{ name: 'indicator2' , description: 'blah2', essential: false },
{ name: 'indicator3' , description: 'blah3', essential: true },
{ name: 'indicator4' , description: 'blah4', essential: false }
];
Now to represent this data in a nice, sortable html table and eventually make it paginated, lets write some markup in our HTML
<table at-table at-list="dataList">
<thead></thead>
<tbody>
<tr>
<th at-implicit at-attribute="name"></th>
<th at-implicit at-attribute="description"></th>
<th at-implicit at-attribute="essential"></th>
</tr>
</tbody>
</table>
Result:-
This displays a simple html table with an automatically generated header (from key) and showing every entry in our list. The attributes are used as follows:-
- at-table - Indicate that we want to use the angular-table directive to extend our table
- at-list - Point to the data source in our controller scope (Here its dataList)
- at-attribute - It is the key object to the respective columns.
- at-implicit - If used, it automatically shows implicit values from dataList and render the content of each object's attribute defined in the at-attribute. If not then it will display the content displayed between <td>....</td>
- <thead> </thead> - This will automatically display the relevant headings corresponding to at-attribute defined in <tbody> </tbody>
Now to add sorting to columns, add at-sortable as:-
<td at-implicit at-attribute="name" at-sortable></td>
If we you want to display data in sorted order on page load use at-initial-sorting="desc" or use at-initial-sorting="asc" as:-
<td at-implicit at-attribute="name" at-sortable at-initial-sorting="desc"></td>
To provide custom headings define like this:-
<th at-attribute="name">First Name</th>
<th at-attribute="description">Employee Description</th>
<th at-attribute="essential">Essential</th>
To add pagination, you need to define a configuration for the table :-
<table at-table at-config="config" at-list="dataList" at-paginated>...</table>
And to display the additional pagination element to our view write:-
<at-pagination at-config="config" at-list="dataList"></at-pagination>
The at-config, properties need to be defined in controller as follows:-
$scope.config = {
itemsPerPage: 5,
maxPages:3,
fillLastPage: false
}
- itemsPerPage - Indicate number of rows per page.
- maxPages – Maximum number of pages to show in pagination bar.
- fillLastPage – How should it fill the last page with less number of rows.
These were the steps that are useful for implementing angular table.
Let me give you a detailed example:-
<table at-table at-config="config" at-list="dataList" at-paginated>
<thead>
<tr>
<th at-attribute="name">First Name</th>
<th at-attribute="description">Employee Description</th>
<th at-attribute="essential">Essential Data</th>
</tr>
</thead>
<tbody>
<tr>
<td at-implicit at-attribute="name" at-sortable at-initial-sorting="desc"></td>
<td at-implicit at-attribute="description" at-sortable></td>
<td at-implicit at-attribute="essential" at-sortable></td>
</tr>
</tbody>
</table>
<at-pagination at-config="config" at-list="dataList"></at-pagination>
The above markup will produce a sortable, paginated table having initial sorting on name feild in descending order. This will have custom headings i.e. First Name, Employee Description and Essential Data.
For demo:
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Kamaldeep Singh
Kamaldeep is a highly skilled Backend Developer specializing in Java, specifically the Spring framework. He also has extensive knowledge of Javascript and associated frameworks such as Node.js and Express. He possesses a deep understanding of the latest technologies and has hands-on experience with Core Java, Spring Boot, Hibernate, Apache Kafka messaging queue, Redis, as well as both relational databases like MySQL and PostgreSQL and non-relational databases like MongoDB. He has made significant contributions to various projects, including Viral Nation, ExamWorks, TNIBRO, Biogas engineering, SecureNow - Web Application, FB Messenger Chatbot, Dialogflow Chatbot, and Catalyst. Kamaldeep's expertise allows him to seamlessly integrate different technologies into applications, highlighting his adaptability and innovative mindset. His practical experience and strong technical skills make him an invaluable asset to any team.