• Edit
  • Download
  • <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      <style>
        body {
          padding: 1rem;
        }
    
        div[data-field-index="progress"] {
          width: 100%;
        }
      </style>
      <style>
        .zg-body {
          background: #e6e6e6;
        }
    
        zing-grid[loading] {
          height: 428px;
        }
      </style>
    </head>
    
    <body>
      <div>
    
        <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting data='[
            {
              "first": "Mark",
              "last": "Otto",
              "username": "@ZTfer",
              "category": "primary",
              "progress": "12"
            },
            {
              "first": "Jacob",
              "last": "Thorton",
              "username": "@jacobthorton",
              "category": "secondary",
              "progress": "62"
            },
            {
              "first": "Duncan",
              "last": "Mattheson",
              "username": "@dmattheson",
              "category": "danger",
              "progress": "84"
            },
            {
              "first": "David",
              "last": "Jose Perez",
              "username": "@djp",
              "category": "info",
              "progress": "45"
            },
            {
              "first": "Dave",
              "last": "Phillipson",
              "username": "@phillipson",
              "category": "warning",
              "progress": "30"
            }
          ]'>
          <zg-colgroup>
            <zg-column index="first">[[index.first]]</zg-column>
            <zg-column index="last">[[index.last]]</zg-column>
            <zg-column index="username">[[index.username]]</zg-column>
            <zg-column index="category">
              <span class="badge badge-pill badge-[[index.category]]">[[index.category]]</span>
            </zg-column>
            <zg-column index="progress" renderer="progressBar">
              <div class="progress">
                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: [[index.progress]]%" aria-valuenow="[[index.progress]]" aria-valuemin="0" aria-valuemax="100">[[index.progress]]%</div>
              </div>
            </zg-column>
          </zg-colgroup>
        </zing-grid>
      </div>
    
      <script>
        window.progressBar = function(customIndex, domCell) {
          const progress = domCell.querySelector('.progress-bar');
          const value = progress.getAttribute('aria-valuenow');
          let color;
          if (value >= 80) {
            color = 'success';
          } else if (value >= 60) {
            color = 'info';
          } else if (value >= 40) {
            color = 'warning';
          } else {
            color = 'danger'
          }
          progress.classList.add('bg-' + color);
        }
      </script>
    </body>
    
    </html>
    <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      <style>
        body {
          padding: 1rem;
        }
    
        div[data-field-index="progress"] {
          width: 100%;
        }
      </style>
    </head>
    
    <body>
      <div>
    
        <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting data='[
            {
              "first": "Mark",
              "last": "Otto",
              "username": "@ZTfer",
              "category": "primary",
              "progress": "12"
            },
            {
              "first": "Jacob",
              "last": "Thorton",
              "username": "@jacobthorton",
              "category": "secondary",
              "progress": "62"
            },
            {
              "first": "Duncan",
              "last": "Mattheson",
              "username": "@dmattheson",
              "category": "danger",
              "progress": "84"
            },
            {
              "first": "David",
              "last": "Jose Perez",
              "username": "@djp",
              "category": "info",
              "progress": "45"
            },
            {
              "first": "Dave",
              "last": "Phillipson",
              "username": "@phillipson",
              "category": "warning",
              "progress": "30"
            }
          ]'>
          <zg-colgroup>
            <zg-column index="first">[[index.first]]</zg-column>
            <zg-column index="last">[[index.last]]</zg-column>
            <zg-column index="username">[[index.username]]</zg-column>
            <zg-column index="category">
              <span class="badge badge-pill badge-[[index.category]]">[[index.category]]</span>
            </zg-column>
            <zg-column index="progress" renderer="progressBar">
              <div class="progress">
                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: [[index.progress]]%" aria-valuenow="[[index.progress]]" aria-valuemin="0" aria-valuemax="100">[[index.progress]]%</div>
              </div>
            </zg-column>
          </zg-colgroup>
        </zing-grid>
      </div>
    
    </body>
    
    </html>
    .zg-body {
      background: #e6e6e6;
    }
    window.progressBar = function(customIndex, domCell) {
      const progress = domCell.querySelector('.progress-bar');
      const value = progress.getAttribute('aria-valuenow');
      let color;
      if (value >= 80) {
        color = 'success';
      } else if (value >= 60) {
        color = 'info';
      } else if (value >= 40) {
        color = 'warning';
      } else {
        color = 'danger'
      }
      progress.classList.add('bg-' + color);
    }