{"id":80,"date":"2018-04-30T22:06:00","date_gmt":"2018-04-30T22:06:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/2018\/04\/30\/how-to-add-a-progressbar-column-to-table-using-angularjs-and-bootstrap-ui\/"},"modified":"2020-11-05T14:20:39","modified_gmt":"2020-11-05T13:20:39","slug":"how-to-add-a-progressbar-column-to-table-using-angularjs-and-bootstrap-ui","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/how-to-add-a-progressbar-column-to-table-using-angularjs-and-bootstrap-ui\/","title":{"rendered":"How to Add a Progressbar Column to Table Using AngularJS and BootStrap UI"},"content":{"rendered":"

In this tutorial, we are going to learn how to add a progress bar column to HTML table using AngularJS<\/p>\n

<\/div>\n

Content<\/b><\/p>\n

    \n
  1. Introduction <\/a><\/li>\n
  2. About AngularJS <\/a><\/li>\n
  3. What you Need <\/a><\/li>\n
  4. How it works<\/a><\/li>\n
  5. How to Vary Color Based on Value <\/a><\/li>\n
  6. Final Notes<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Introduction<\/h3>\n

    By now you should know how to display tabular data using AnuglarJS. If not you can look at this lesson: Display SharePoint Table Using AngularJS <\/a>
    \nRemember you can reach me if you have challenges.<\/p>\n

    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 progress-bar would make it more interesting for your users.<\/p>\n

     <\/p>\n

    2. About AngularJS<\/h3>\n

    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.
    \nAll you need to to is to add the link to the js file in the head tag of your page.<\/p>\n

     <\/p>\n

    \n3. What You Need<\/h3>\n
      \n
    • BootStrap<\/li>\n
    • JQuery<\/li>\n
    • AngularJS<\/li>\n<\/ul>\n

       <\/p>\n

      4. How it Works<\/h3>\n

      It works in a very simple way.
      \nThe 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.<\/p>\n

      The code is shown in Listing 1.0.<\/p>\n

      <\/p>\n

      <table<\/span> border=\"1\"<\/span> class=\"em-c-table\"<\/span>><\/span>\r\n    <thead<\/span> class=\"em-c-table__header\"<\/span>><\/span>\r\n        <tr<\/span> ><\/span>\r\n            <th><\/span>Name<\/th><\/span>\r\n            <th><\/span>Points<\/th><\/span>\r\n            <td><\/span>Percentage<\/td><\/span>\r\n        <\/tr><\/span>\r\n    <\/thead><\/span>\r\n    <tbody<\/span> class=\"em-c-table__body\"<\/span>><\/span>\r\n        <tr<\/span> ng-repeat=\"row in data\"<\/span>><\/span>\r\n            <td><\/span>{{row.Name}}<\/td><\/span>\r\n            <td><\/span>{{row.Points}}<\/td><\/span>\r\n            <td><div<\/span> class=\"progress progress-striped\"<\/span>><\/span>\r\n      <div<\/span> class=\"progress progress-bar-warning\"<\/span> ng-style=\"{width: row.Percentage+'%'}\"<\/span>><\/span> {{row.Percentage}}<\/div><\/span>\r\n      <\/div><\/td><\/span>\r\n        <\/tr><\/span>\r\n     <\/tbody><\/span>\r\n <\/table><\/span><\/pre>\n
      Listing 1.0: <\/b>HTML Table Structure<\/p>\n
       <\/p>\n
      The progressbar is displayed in the third column of the table
      \nNote there are two div tags and one ng-style attribute<\/p>\n
        \n
      • The first div tag sets the type of progressbar:\u00a0 “progress progress-stripped<\/li>\n
      • The second div tag sets the\u00a0 color: “progress progress-bar-warning”<\/li>\n
      • The ng-style is used to set the width of the bar to the value of the Percentage field in the table.<\/li>\n<\/ul>\n
        I hope this is clear. But if not, leave me a comment. I would explain more clearly to you.<\/p>\n
         <\/p>\n
        5. How to Change Color Based on Value<\/h3>\n
        You may want to vary the color of the bar depending on the value of the lenght. For example:
        \n0 – 60: green
        \n61 – 90: orange
        \n91 – 99: red<\/p>\n
        To achieve this, you simply need to add a simple class to the <td> tag.<\/p>\n
        <\/p>\n
        ng-class=\"{'progress-bar-danger': percent<33<\/span>,<\/span> '<\/span>progress-bar-info<\/span>'<\/span>:<\/span> percent<\/span>><\/span>=33 &&<\/span> percent<66<\/span>,<\/span> '<\/span>progress-bar-success<\/span>'<\/span>:<\/span> percent<\/span>><\/span>=66}\"<\/pre>\n
         <\/p>\n
        6. Final Notes<\/h3>\n
        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.
        \nIf 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
        In this tutorial, we are going to learn how to add a progress bar column to HTML table using AngularJS Content Introduction About AngularJS What … <\/p>\n","protected":false},"author":2,"featured_media":634,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[113],"tags":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/80"}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":9,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"predecessor-version":[{"id":1768,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/80\/revisions\/1768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media\/634"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}