Monday, 30 April 2018

How to Add a Progressbar Column to Table Using AngularJS and BootStrap UI

Hello, my friend. I'm Kindson, and good to see you here!

In this tutorial, we are going to learn how to add a progresss bar column to HTML table using AngularJS
Content



  1. Introduction
  2. About AngularJS
  3. What you Need
  4. How it works
  5. How to Vary Color Based on Value
  6. Final Notes

1. Introduction


By now you should know how to display tabular data using AnuglarJS. If not you can look at this lesson: Display SharePoing Table Using AngularJS
Remember you can reach me if you have challenges.

Sometime you may need to display percentages in a progress bar in a table column. Or it may be number of points a user have accumulated in membership website. Using a progressbar would make it more interesting for your users.

2. About AngularJS


AngularJS is a very easy to use framework that helps you to create dynamic page that integrates data into your html page using AngularJS markup.
All you need to to is to add the link to the js file in the head tag of your page.




3. What You Need


  • BootStrap
  • JQuery
  • AngularJS

4. How it Works


It works in a very simple way.
The lenght of the progress bar is defined by the values in another column of the table. So basically, any table that have a column containing number can be used to display a progressbar.
The code is shown in Listing 1.0.


<table border="1" class="em-c-table">
    <thead class="em-c-table__header">
        <tr >
            <th>Name</th>
            <th>Points</th>
            <td>Percentage</td>
        </tr>
    </thead>
    <tbody class="em-c-table__body">
        <tr ng-repeat="row in data">
            <td>{{row.Name}}</td>
            <td>{{row.Points}}</td>
            <td><div class="progress progress-striped">
      <div class="progress progress-bar-warning" ng-style="{width: row.Percentage+'%'}"> {{row.Percentage}}</div>
      </div></td>
        </tr>
     </tbody>
 </table>  
Listing 1.0: HTML Table Structure

The progressbar is displayed in the third column of the table
 Note there are two div tags and one ng-style attribute
  • The first div tag sets the type of progressbar:  "progress progress-stripped
  • The second div tag sets the  color: "progress progress-bar-warning"
  • The ng-style is used to set the width of the bar to the value of the Percentage field in the table.
I hope this is clear. But if not, leave me a comment. I would explain more clearly to you.


5. How to Change Color Based on Value


You may want to vary the color of the bar depending on the value of the lenght. For example:
0 - 60: green
61 - 90: orange
91 - 99: red

To achieve this, you simply need to add a simple class to the <td> tag.

ng-class="{'progress-bar-danger': percent<33, 'progress-bar-info': percent>=33 && percent<66, 'progress-bar-success': percent>=66}"





6. Final Notes


Make sure you try it yourself. Just copy the code to your IDE and try to modify it to fit your data and then make sure it works.
If you completed this tutorial, thumbs up to you!. If you have any challenges, let me know in the comment box below or to the left of this page.